Como usar o Lighthouse para melhorar o desempenho do carregamento de páginas

O Lighthouse é uma ferramenta automatizada que melhora a qualidade de sites. Você fornece um URL a ela, e ela fornece uma lista de recomendações sobre como melhorar o desempenho e tornar as páginas mais acessíveis, além de seguir as práticas recomendadas e muito mais. Ele pode ser executado no Chrome DevTools, como uma extensão do Chrome ou até mesmo como um módulo Node, o que é útil para integração contínua.

Há algum tempo, o Lighthouse oferece muitas dicas para melhorar o desempenho do carregamento de páginas, como ativar a compactação de texto ou reduzir scripts de bloqueio de renderização. A equipe do Lighthouse continua lançando novas auditorias para oferecer conselhos ainda mais úteis para tornar seus sites mais rápidos. Esta postagem é um resumo de auditorias de desempenho úteis que talvez você não conheça, como:

Detalhamento do trabalho da linha de execução principal

Se você já usou o painel de desempenho no DevTools, sabe que pode ser trabalhoso entender onde o tempo de CPU foi gasto carregando uma página. Temos o prazer de anunciar que essas informações agora estão disponíveis de forma rápida e conveniente pela nova auditoria Detalhamento da linha de execução principal.

Um detalhamento da atividade principal da linha de execução no Lighthouse.
Figura 1. Um detalhamento da atividade principal da linha de execução no Lighthouse.

Esse novo diagnóstico avalia a quantidade e o tipo de atividade que ocorre durante o carregamento de página, que pode ser usado para entender problemas de desempenho de carregamento relacionados a layout, avaliação de script, análise e outras atividades.

Pré-carregar solicitações de chave

Quando os navegadores recuperam recursos, eles fazem isso ao encontrar referências a eles no documento e nos sub-recursos dele. Isso às vezes pode não ser o ideal, porque alguns recursos essenciais são descobertos mais tarde no processo de carregamento da página. Felizmente, o rel=preload permite que os desenvolvedores indiquem aos navegadores compatíveis quais recursos precisam ser buscados o mais rápido possível. A nova auditoria de solicitações de chaves de pré-carregamento informa aos desenvolvedores quais recursos podem se beneficiar do carregamento antecipado por rel=preload.

A auditoria do Lighthouse de solicitações de chaves de pré-carregamento recomenda uma lista de recursos a serem considerados no pré-carregamento.
Figura 2. A auditoria do Lighthouse de solicitações de chaves de pré-carregamento recomenda uma lista de recursos a serem considerados no pré-carregamento.

É muito importante testar e comparar as mudanças de desempenho com e sem rel=preload, já que isso pode afetar o desempenho do carregamento de maneiras inesperadas. Por exemplo, o pré-carregamento de uma imagem grande pode atrasar a renderização inicial, mas a desvantagem é que a imagem pré-carregada aparecerá mais cedo no layout. Não se esqueça de conferir os resultados.

O tempo de inicialização do JavaScript é alto

Quando muito JavaScript é carregado, a página pode parar de responder enquanto o navegador a analisa, compila e executa. Scripts e anúncios de terceiros são uma fonte específica de atividade excessiva de scripts que pode sobrecarregar até mesmo dispositivos mais avançados. A nova auditoria Tempo de inicialização do JavaScript é alto revela quanto tempo de CPU cada script de uma página consome, além do URL:

O Lighthouse exibe a quantidade de tempo de avaliação, análise e compilação dos scripts em uma página.
Figura 3. Lighthouse exibindo a quantidade de tempo de avaliação, análise e compilação dos scripts em uma página.

Ao executar essa auditoria, também é possível ativar selos de terceiros no painel de rede e filtrar a lista para identificar recursos de script de terceiros. Com os dados dessa auditoria, você estará mais preparado para encontrar fontes de atividade excessiva de JavaScript que transformam as páginas de páginas lentas em lentas. No caso de scripts específicos do seu aplicativo, use técnicas como divisão de código e tree shaking para limitar a quantidade de JavaScript em cada página do site.

Evita redirecionamentos de página

Às vezes, quando um navegador solicita um URL, o servidor pode responder com um código de status de nível 300. Isso faz com que o navegador redirecione para outro URL. Embora os redirecionamentos sejam necessários para SEO e conveniência, eles adicionam latência às solicitações. Isso é importante principalmente se eles redirecionarem para outras origens, o que pode gerar mais busca de DNS e tempo de negociação de conexão/TLS.

Uma cadeia de redirecionamento, como visto no painel de rede das ferramentas para desenvolvedores do Chrome.
Figura 4. Uma cadeia de redirecionamento, como vista no painel de rede das ferramentas para desenvolvedores do Chrome.

Os redirecionamentos não são desejáveis para as páginas de destino em seu site. Para ajudar a reduzir a latência e melhorar o desempenho do carregamento, o Lighthouse agora oferece a auditoria Evitar redirecionamentos de página, que informa quando uma navegação aciona redirecionamentos.

Uma lista de redirecionamentos de página no Lighthouse.
Figura 5. Uma lista de redirecionamentos de página no Lighthouse.

Essa auditoria é difícil de acionar na versão DevTools do Lighthouse, porque ela analisa o URL atual na barra de endereço da página, que reflete a resolução de todos os redirecionamentos. É provável que você veja essa auditoria preenchida na CLI do nó.

JavaScript não utilizado

Códigos inativos podem ser um problema sério em aplicativos com muito JavaScript. Embora não apresente custos de execução, porque nunca é invocado, ele tem outros efeitos indesejados. O código morto ainda é transferido por download, analisado e compilado pelo navegador. Isso afeta o desempenho do carregamento e o tempo de inicialização do JavaScript. Semelhante ao painel de cobertura no DevTools, a auditoria Unused JavaScript revela o JavaScript transferido por download pela página atual, mas nunca é usado.

Lighthouse mostrando a quantidade de JavaScript não usado em uma página.
Figura 6. Lighthouse exibindo a quantidade de JavaScript não utilizado em uma página.

Com essa auditoria, é possível identificar código morto nos seus aplicativos e removê-lo para melhorar o desempenho do carregamento e reduzir o uso de recursos do sistema. Dica profissional: você também pode usar o painel de cobertura de código no DevTools do Chrome para encontrar essas informações.

Usa uma política de cache ineficiente em recursos estáticos

Embora muitas recomendações de desempenho tendam a se concentrar em aumentar a velocidade de um site para novos usuários, também é importante usar o armazenamento em cache para melhorar o desempenho de carregamento para usuários recorrentes. A auditoria usa uma política de cache ineficiente em recursos estáticos inspeciona os cabeçalhos de armazenamento em cache dos recursos de rede e notifica se as políticas de cache para recursos estáticos estão abaixo do padrão.

Tabela de recursos estáticos
Figura 7.

Com a ajuda dessa auditoria, você poderá encontrar e corrigir problemas facilmente com sua política de cache atual. Isso vai melhorar muito o desempenho para usuários recorrentes, e eles vão gostar da velocidade extra.

Evite idas e voltas onerosas para qualquer origem

Quando os navegadores recuperam recursos de um servidor, pode levar um tempo significativo para realizar uma busca DNS e estabelecer uma conexão com um servidor. rel=preconnect permite que os desenvolvedores mascarem essa latência estabelecendo conexões com outros servidores antes que o navegador aconteça no momento certo. A auditoria Evitar várias viagens de ida e volta caras para qualquer origem ajudará você a descobrir oportunidades de usar o rel=preconnect.

Uma lista de origens recomendadas para o rel=preconnectin Lighthouse.
Figura 8. Uma lista de origens recomendadas para rel=preconnect no Lighthouse.

Quando a latência para recursos de origem cruzada é reduzida, os usuários percebem que as coisas estão avançando um pouco mais rapidamente. Com essa nova auditoria do Lighthouse, você aprenderá novas oportunidades de usar o rel=preconnect para fazer exatamente isso.

Usar formatos de vídeo para conteúdo animado

Os GIFs animados são enormes e costumam consumir no mínimo várias centenas de kilobytes ou vários megabytes de dados. Se você se preocupa com o desempenho do carregamento, converta esses GIFs em vídeo é o caminho a seguir. Felizmente, a auditoria Usar formatos de vídeo para conteúdo animado pode ajudar você.

Uma recomendação para converter um GIF em vídeo no Lighthouse.
Figura 9. Uma recomendação para converter um GIF em vídeo no Lighthouse.

Se o site tiver GIFs com mais de 100 KB, essa auditoria os sinalizará automaticamente e direcionará você a algumas orientações sobre como convertê-los em vídeo e incorporá-los. Sites como o Imgur melhoraram significativamente o desempenho de carregamento ao converter GIFs em vídeo. Além disso, se o site estiver em um plano de hospedagem com largura de banda limitada, a economia em potencial por si só será suficiente para persuadir você.

Todo o texto permanece visível durante o carregamento da fonte da Web

Quando carregamos fontes da Web para páginas, os navegadores geralmente renderizam texto invisível até que a fonte seja carregada. Esse fenômeno, conhecido como Flash of Invisible Text (FOIT, na sigla em inglês), pode ser preferível do ponto de vista do design, mas é um problema. O texto bloqueado para a renderização não pode ser lido até que seja renderizado e se torne visível. Em conexões de alta latência e/ou alta largura de banda, isso significa que uma parte essencial da experiência do usuário está ausente. Também pode ser um tipo de problema de desempenho perceptivo, porque a página não está renderizando conteúdo significativo com a velocidade que poderia de outro modo. Felizmente, a auditoria Todo o texto permanece visível durante os carregamentos da fonte da Web ajuda você a encontrar oportunidades para corrigir isso no seu site.

Lighthouse oferecendo recomendações para melhorar a renderização da fonte.
Figura 10. Lighthouse oferecendo recomendações para melhorar a renderização de fontes.

Se o Lighthouse encontrar fontes da Web no seu aplicativo que estejam atrasando a renderização de texto, há algumas soluções possíveis. Você pode controlar a renderização de texto com a propriedade CSS font-display e/ou a API FontLoading. Se você quiser se aprofundar, leia Um guia abrangente para estratégias de carregamento de fonte, um excelente guia de Zach Leatherman que é um excelente recurso para o carregamento de fonte ideal.

CSS e JavaScript não reduzidos

A minificação é uma técnica sugerida, já que o desempenho na Web é importante e por um bom motivo. Ele reduz significativamente o tamanho dos recursos baseados em texto, o que, por sua vez, é bom para o desempenho de carregamento. No entanto, é fácil ignorar essa otimização, especialmente se os processos de criação não cuidarem disso para você. As auditorias Minimizar CSS e Minimizar JavaScript vão compilar uma lista de recursos não reduzidos encontrados na página atual. Depois, você pode reduzir esses arquivos manualmente ou aumentar o sistema de build para fazer isso por você.

Regras CSS não utilizadas

À medida que um local fica um pouco longo no dente, é inevitável que o problema remanescente da refatoração comece a se acumular. Uma dessas fontes de desperdício ocorre na forma de regras CSS não utilizadas, que não são mais necessárias para o funcionamento do site, mas ainda consomem largura de banda. Para sua conveniência, a auditoria Regras de CSS não usadas revela quais recursos de CSS na página contêm CSS não usado.

Lighthouse mostrando uma lista de recursos CSS contendo regras CSS não usadas.
Figura 11. Lighthouse mostrando uma lista de recursos que contêm regras CSS não usadas.

Se o Lighthouse encontrar CSS não utilizado na página, há formas de se livrar deles. UnCSS é um desses utilitários que faz isso automaticamente para você, embora precise ser usado com cuidado. Um método mais manual envolve o uso do painel de cobertura de código no DevTools. No entanto, lembre-se de que CSS não utilizado em uma página pode ser necessário em outra. Outra abordagem é dividir o CSS em arquivos específicos do modelo que são carregados somente quando necessário. Independentemente do que você decidir fazer, o Lighthouse estará lá informando se o problema com o CSS está ficando difícil.

Teste o Lighthouse!

Se você está animado com essas novas auditorias, atualize o Lighthouse e faça um teste.

  • A extensão do Chrome do Lighthouse é atualizada automaticamente, mas pode ser atualizada manualmente usando chrome://extensions.
  • No DevTools, é possível executar o Lighthouse no painel de auditorias. O Chrome é atualizado para uma nova versão a cada seis semanas, por isso, algumas auditorias mais recentes podem não estar disponíveis. Se quiser usar as auditorias mais recentes disponíveis, execute o código mais recente do Chrome fazendo o download do Chrome Canary.
  • Para usuários do Node: execute npm update lighthouse ou npm update lighthouse -g se você instalou o Lighthouse globalmente.

Um agradecimento especial a Kayce Basques, Patrick Hulce, Addy Osmani e Vinamrata Singal pelo feedback valioso, que melhorou significativamente a qualidade deste artigo.