O Lighthouse do Google agora está recomendando alternativas de biblioteca JavaScript

Publicados: 2021-01-06

Usando a noção de farol como uma metáfora, o Google Lighthouse afasta os desenvolvedores das rochas, iluminando os problemas que descobre ativo por ativo. Com feedback específico para melhorias de desempenho e segurança, os relatórios incluem referências a mídias que podem usar redimensionamento com compactação, políticas de cache novas ou diferentes e arquivos vinculados que contêm blocos de CSS e/ou JavaScript não utilizados.

Até setembro, no entanto, o Google não estava chamando as próprias bibliotecas JavaScript.

E agora, os avisos foram graduados para aparecer no Page Speed ​​Insights.

Uma palavra sobre JavaScript

No mundo JavaScript de código aberto, os desenvolvedores ficam nos ombros dos desenvolvedores que vieram antes deles, especialmente aqueles que resolveram algo que, de outra forma, teria que ser resolvido por um novo autor de biblioteca. O sistema de empacotamento JavaScript predominante NPM (Node Package Manager) facilita a inclusão de bibliotecas preexistentes em seu projeto. No ponto de partida, um determinado projeto JavaScript é sempre a ponta de um iceberg feito de muito mais JavaScript por baixo, geralmente armazenado pelo NPM no diretório .node_modules .

É lógico que os projetos, especialmente aqueles criados usando uma estrutura sofisticada, usariam apenas uma pequena porcentagem do código disponível para ele, em grande parte por meio de inúmeras dependências de biblioteca. É por isso que existe um processo de otimização conhecido como “tree shake” para agrupar o máximo possível apenas o que está sendo usado ativamente por um determinado projeto. A agitação da árvore nem sempre funciona bem com bibliotecas mais antigas devido aos objetivos móveis de acompanhar a sintaxe moderna e os padrões de codificação.

Sobre estruturas

Os frameworks facilitam a vida dos desenvolvedores removendo a complexidade de fazer suas escolhas de biblioteca, configurar bundlers e escrever scripts para automatizar processos de otimização para produção. Com uma receita de “início rápido” encontrada na maioria das documentações, os desenvolvedores podem começar a executar scripts interpretadores de linha de comando pré-escritos que vêm como parte da maioria das estruturas empacotadas. Um exemplo disso é o Create React App que monta o código do aplicativo React em branco pronto para você desenvolver ainda mais em um aplicativo da web.

$ npx create-react-app meu-app

A execução do comando acima cria um diretório “my-app” e gera toda a árvore de diretórios do aplicativo React nele, completo com todos os arquivos necessários e dependências de biblioteca. Otimizar seu pacote de produção, que pode conter código de várias bibliotecas Javascript, talvez seja a razão mais importante pela qual os pacotes de estrutura modernos têm ferramentas e etapas que eliminam blocos de código não utilizados e minimizam a saída para produção.

Quando você escolhe usar um framework, você aceita, talvez sem conhecer todos os detalhes, as difíceis decisões de arquitetura, configuração e dependências de biblioteca desse framework. Aqui está o guia para otimizar o React para produção dos criadores da popular biblioteca frontend atualmente usada por muitos projetos e frameworks como o NextJS.

É muito comum que um punhado de bibliotecas mais antigas (altamente úteis em seus dias) tenham chegado aos pacotes de projeto como dependências. Sites, bibliotecas e estruturas criadas antes dos marcos do JavaScript mostram sua idade ao usar código obsoleto, pois o JavaScript progride fundamentalmente em um ritmo tão vertiginoso. O Lighthouse agora serve como um farol para avisá-lo quando seu projeto inclui código antigo e/ou vulnerável.

MomentJS

Uma biblioteca notável, MomentJS (com 12 milhões de downloads por semana em setembro de 2020), é a primeira que Lighthouse aponta como tendo algumas opções melhores. A lógica do Google aqui é irrefutável e bastante conhecida. Em resposta, a própria página inicial e a documentação do Moment agora refletem o conselho fornecido nos relatórios do Lighthouse. O momento está congelado, com apenas atualizações de estabilidade planejadas.

Outras bibliotecas que o Google tem sob o microscópio são Lodash e possivelmente Underscore. Houve sentimentos negativos legítimos expressos sobre isso em toda a comunidade de desenvolvedores, com mais de um desenvolvedor chamando-o de “tóxico” ou “prejudicial” para a comunidade de código aberto. As reclamações têm a ver com o Google “envergonhar” bibliotecas sem dar contexto suficiente e promover alternativas que podem prejudicar a descoberta de alternativas de bibliotecas menores e menos conhecidas.

Embora tudo isso seja verdade, também é verdade que você precisa quebrar ovos para fazer uma omelete. O progresso muitas vezes prejudicará algumas pessoas. O Google conta com uma referência de terceiros (BundlePhobia) para coletar listas de bibliotecas alternativas. Eles também avaliam as escolhas com base em um “alto padrão de equivalência” e “facilidade de migração”, conforme determinado pela equipe do Lighthouse.

Autores de bibliotecas menos conhecidos podem entrar na mistura enviando sua biblioteca para o serviço. Além disso, um desenvolvedor comentou que, como o Google agora recomenda oficialmente as bibliotecas, eles devem ajudar a financiar o código aberto doando para o projeto e um membro da equipe no Twitter concordou em começar a fazer isso a partir de 2021.

O que isso significa para TechSEOs

É verdade que os profissionais do TechSEO não precisam ser desenvolvedores para serem excelentes em seu trabalho. Também é verdade que quanto mais familiarizado você estiver com a luta que os desenvolvedores enfrentam, talvez aprendendo um pouco sobre codificação e pelo menos entendendo os detalhes do Google Lighthouse o máximo possível, melhor você poderá comunicar problemas e soluções práticas aos desenvolvedores .

Substituir o atacado do MomentJS pode ser super fácil a assustadoramente complexo para o destinatário das notícias que precisa ser substituído. A menos que você seja um desenvolvedor, ou pelo menos tenha tentado se envolver em um pouco de desenvolvimento web usando bibliotecas e estruturas JavaScript modernas, será difícil para você saber o quão doloroso pode ser trocar uma biblioteca como o Moment por uma alternativa menor para um determinado projeto.

Tem a ver com o quanto essa biblioteca foi integrada à base de código. Padrões de código podem ter que ser completamente reescritos em todo o aplicativo. Quanto maior e mais interconectada for a base de código do aplicativo, mais difícil será realizar a substituição. Nem sempre é tão simples quanto dizer “Basta usar uma das bibliotecas alternativas que o Google está dizendo para você usar”.

Um dos pensamentos assustadores que podem ocorrer quando se aprende a substituir Moment vem do fato de que os objetos na biblioteca são escritos para serem mutáveis ​​(mutáveis). Manter esse padrão é considerado necessário para compatibilidade com versões anteriores e isso realmente complica a substituição do Moment por outra biblioteca. Blocos inteiros de código podem precisar ser escritos para que seu aplicativo acomode o fato de que valores de variáveis ​​atribuídos usando Moment em algum lugar em uma cadeia de chamadas não podem ser considerados valores imutáveis ​​dentro de sua base de código de aplicativo.

Um padrão moderno que depende de objetos imutáveis ​​de uma biblioteca mais nova é mais estável. Para chegar lá, pode ser necessário reescrever cada instância em que o Moment é usado.

SEO para desenvolvedores

Otimizar o JavaScript para produção como uma tarefa é muito importante para o TechSEO trabalhando no código ou fornecendo feedback para um desenvolvedor que pode não estar familiarizado com SEO, pois os desenvolvedores devem entender a otimização de desempenho em primeiro lugar. Não se pode presumir que os desenvolvedores conheçam BundlePhobia, Lighthouse ou SEO.

Se você chegou até aqui e deseja saber mais sobre codificação para oferecer um melhor serviço aos seus clientes, está com sorte. Este ano, produziremos o Workshop SEO for Developers como um complemento opcional para a série de conferências SMX. As informações apresentadas serão direcionadas para guiar sua jornada de onde você estiver como praticante de TechSEO, para onde quer que nossos caminhos coletivos nos levem à codificação. Dado o quão rápido as coisas estão progredindo, o céu é o limite!