Como otimizar as Métricas da Web usando o Lighthouse

Encontrar oportunidades de melhorar a experiência do usuário com as ferramentas da Web do Chrome.

Publicado em 11 de maio de 2021

Hoje, vamos abordar os novos recursos de ferramentas no Lighthouse, PageSpeed e DevTools para ajudar a identificar como seu site pode melhorar as Core Web Vitals.

Para relembrar as ferramentas, o Lighthouse é uma ferramenta automatizada de código aberto para melhorar a qualidade das páginas da Web. Você pode encontrá-lo no conjunto de ferramentas de depuração do Chrome DevTools e executá-lo em qualquer página da Web, pública ou que exija autenticação. Também é possível encontrar o Lighthouse no PageSpeed Insights, CI e WebPageTest.

O Lighthouse 7.x inclui novos recursos, como capturas de tela de elementos, para facilitar a inspeção visual de partes da interface que afetam as métricas de experiência do usuário (por exemplo, quais nós estão contribuindo para a mudança de layout).

Também lançamos o suporte a capturas de tela de elementos no PageSpeed Insights, facilitando a identificação de problemas em execuções de desempenho únicas de páginas.

Capturas de tela de elementos destacando o nó DOM que contribui para a mudança de layout na página

Medir as Core Web Vitals

O Lighthouse pode medir sinteticamente as métricas das Core Web Vitals, incluindo Largest Contentful Paint, Cumulative Layout Shift e Total Blocking Time (um proxy de laboratório para First Input Delay). Essas métricas refletem o carregamento, a estabilidade do layout e a prontidão para interação. Outras métricas, como a Primeira exibição de conteúdo destacada no futuro das Core Web Vitals, também estão presentes.

A seção "Métricas" do relatório do Lighthouse inclui versões de laboratório dessas métricas. Você pode usar essa visualização como um resumo dos aspectos da experiência do usuário que exigem sua atenção.

Métricas de performance do Lighthouse
Faixa de Web Vitals no painel de desempenho do DevTools
A nova opção "Web Vitals" no painel de desempenho do DevTools mostra uma faixa que destaca momentos de métricas, como a Layout Shift (LS) mostrada acima.

As métricas de campo, como as encontradas no Chrome UX Report ou na RUM, não têm essa limitação e são um complemento valioso para os dados de laboratório, porque refletem a experiência dos usuários reais. Os dados de campo não podem oferecer os tipos de informações de diagnóstico que você recebe no laboratório.

Identifique onde você pode melhorar nas Core Web Vitals

Identifique o elemento de Maior exibição de conteúdo

A LCP é uma medição da experiência de carregamento percebida. Ele marca o ponto durante o carregamento da página em que o conteúdo principal, ou "maior", foi carregado e está visível para o usuário.

O Lighthouse tem uma auditoria "Elemento de maior exibição de conteúdo" que identifica qual elemento foi a maior exibição de conteúdo. Passar o cursor sobre o elemento vai destacá-lo na janela principal do navegador.

Elemento de Maior exibição de conteúdo

Se esse elemento for uma imagem, essas informações são uma dica útil para otimizar o carregamento dela. O Lighthouse inclui várias auditorias de otimização de imagens para ajudar a entender se as imagens podem ser melhor compactadas, redimensionadas ou enviadas em um formato de imagem moderno mais otimizado.

Auditoria de tamanho adequado das imagens

Você também pode usar o LCP Bookmarklet (link em inglês) de Annie Sullivan para identificar rapidamente o elemento LCP com um retângulo vermelho em apenas um clique.

Como destacar o elemento da LCP com um bookmarklet

Pré-carregar imagens descobertas mais tarde para melhorar a LCP

Para melhorar a Maior pintura de conteúdo, carregue previamente suas imagens principais essenciais se elas forem descobertas tarde pelo navegador. A descoberta tardia pode acontecer se um pacote JavaScript precisar ser carregado antes que a imagem seja detectável.

Pré-carregar a maior imagem de conteúdo

Há algumas perguntas comuns sobre o carregamento prévio de imagens de LCP que também vale a pena abordar brevemente.

É possível pré-carregar imagens responsivas? Sim. Digamos que temos uma imagem de destaque responsiva especificada usando srcset e sizes abaixo:

<img src="lighthouse.jpg"
          srcset="lighthouse_400px.jpg 400w,
                  lighthouse_800px.jpg 800w,
                  lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
Lighthouse">

Graças aos atributos imagesrcset e imagesizes adicionados ao atributo link, podemos pré-carregar uma imagem responsiva usando a mesma lógica de seleção de imagem usada por srcset e sizes:

<link rel="preload" as="image" href="lighthouse.jpg"
           imagesrcset="lighthouse_400px.jpg 400w,
                        lighthouse_800px.jpg 800w,
                        lighthouse_1600px.jpg 1600w"
imagesizes="50vw">

A auditoria também vai destacar oportunidades de pré-carregamento se a imagem do LCP for definida usando um plano de fundo CSS? Sim.

Qualquer imagem sinalizada como LCP, seja por plano de fundo do CSS ou <img>, é um candidato se for detectada em uma profundidade de hierarquia de três ou mais.

Carregar imagens fora da tela com carregamento lento e evitar isso para a LCP

As imagens fora da tela que não são essenciais para a experiência inicial do usuário podem ser carregadas de forma lenta. Essa é uma técnica que adia o download de uma imagem até que o usuário role a tela até ela, o que pode reduzir a contenção de rede para recursos críticos e, em alguns casos, melhorar o LCP. A auditoria "Defer offscreen images" pode ajudar aqui:

Adie a exibição de imagens fora da tela

As imagens importantes acima da dobra, como a imagem da Maior exibição de conteúdo, não devem ser carregadas lentamente. Isso pode atrasar o carregamento da imagem da LCP. O Lighthouse vai destacar se uma imagem de LCP está sendo carregada de forma incorreta com a auditoria "A imagem da Maior exibição de conteúdo foi carregada lentamente":

Evite o carregamento lento de imagens de LCP

Identificar as contribuições da CLS

A mudança de layout cumulativa é uma medida da estabilidade visual. Ele quantifica o quanto o conteúdo de uma página muda visualmente. O Lighthouse tem uma auditoria para depurar o CLS chamada "Evitar grandes mudanças de layout".

Essa auditoria destaca os elementos DOM que mais contribuem para as mudanças na página. Na coluna "Elemento" à esquerda, você vai encontrar a lista desses elementos DOM e, à direita, a contribuição geral de CLS.

A auditoria &quot;Evitar grandes mudanças no layout&quot; no Lighthouse destaca os nós DOM relevantes que contribuem para o CLS.

Graças ao novo recurso de capturas de tela de elementos do Lighthouse, podemos conferir uma visualização dos principais elementos observados na auditoria, além de clicar para ampliar e ter uma visão mais clara:

Clicar em uma captura de tela do elemento vai expandi-la

Para a CLS pós-carregamento, pode ser útil visualizar de forma persistente com retângulos quais elementos contribuíram mais para a CLS. Esse é um recurso que você encontra em ferramentas de terceiros, como o painel de Core Web Vitals do SpeedCurve e o Layout Shift GIF Generator do Defaced:

o gerador de mudança de layout destacando as mudanças

Para uma visão geral dos problemas de mudança de layout em todo o site, o relatório de Core Web Vitals do Search Console é muito útil. Isso me permite ver os tipos de páginas no meu site com um CLS alto (neste caso, ajudando a identificar quais partes do modelo eu preciso dedicar meu tempo):

O Search Console mostra problemas de CLS

Como identificar CLS em imagens sem dimensões

Para limitar o deslocamento cumulativo de layout causado por imagens sem dimensões, inclua atributos de tamanho de largura e altura nas imagens e nos elementos de vídeo. Essa abordagem garante que o navegador possa alocar a quantidade correta de espaço no documento enquanto a imagem está sendo carregada.

Auditoria de elementos de imagem sem largura e altura explícitas

Consulte Definir altura e largura em imagens é importante de novo para ler um bom artigo sobre a importância de pensar nas dimensões e na proporção da imagem.

Como identificar CLS em anúncios

Os anúncios do editor para o Lighthouse permitem encontrar oportunidades para melhorar a experiência de carregamento de anúncios na sua página, incluindo contribuições para a mudança de layout e tarefas longas que podem atrasar o tempo de uso da página pelos usuários. No Lighthouse, é possível ativar isso usando os plug-ins da comunidade.

Auditorias relacionadas a anúncios que destacam oportunidades para reduzir o tempo de solicitação e a mudança de layout

Os anúncios são um dos principais contribuintes para mudanças de layout na Web. É importante:

  • Tome cuidado ao colocar anúncios não fixos perto da parte de cima da janela de visualização
  • Elimine as mudanças reservando o maior tamanho possível para o espaço de anúncio

Evitar animações não compostas

Animações não compostas podem ficar instáveis em dispositivos de baixo custo se tarefas pesadas do JavaScript estiverem mantendo a linha de execução principal ocupada. Essas animações podem introduzir mudanças de layout.

Se o Chrome descobrir que uma animação não pode ser composta, ele vai informar isso a uma leitura de rastreamento do Lighthouse nas DevTools, permitindo listar quais elementos com animações não foram compostos e por qual motivo. Você pode encontrar essas informações na auditoria Evitar animações não compostas.

Auditoria para evitar animações não compostas

Depurar o primeiro atraso de entrada / tempo de bloqueio total / tarefas longas

O First Input mede o tempo entre a primeira interação do usuário com uma página (por exemplo, quando ele clica em um link, toca em um botão ou usa um controle personalizado com tecnologia JavaScript) e o momento em que o navegador consegue processar os manipuladores de eventos em resposta a essa interação. Tarefas JavaScript longas podem afetar essa métrica e o proxy dela, "Tempo de bloqueio total".

Auditoria para evitar tarefas longas da linha de execução principal

O Lighthouse inclui uma auditoria Evitar tarefas longas da linha de execução principal, que lista as tarefas mais longas na linha de execução principal. Isso pode ser útil para identificar os piores contribuidores para a latência de entrada. Na coluna à esquerda, é possível ver o URL dos scripts responsáveis por tarefas longas da linha de execução principal.

À direita, podemos ver a duração dessas tarefas. As tarefas longas são aquelas que são executadas por mais de 50 milissegundos. Isso é considerado um bloqueio da linha de execução principal por tempo suficiente para afetar a taxa de frames ou a latência de entrada.

Se você estiver considerando serviços de terceiros para monitoramento, também gosto da linha do tempo de execução da linha de execução principal que o Calibre tem para visualizar esses custos, que destaca as tarefas principais e filhas que contribuem para tarefas longas que afetam a interatividade.

A linha do tempo de execução da linha de execução principal do Calibre tem

Bloquear solicitações de rede para conferir o impacto antes/depois no Lighthouse

O Chrome DevTools oferece suporte ao bloqueio de solicitações de rede para conferir o impacto de recursos individuais removidos ou indisponíveis. Isso pode ser útil para entender o custo dos scripts individuais (por exemplo, incorporações ou rastreadores de terceiros) em métricas como Tempo de bloqueio total (TBT, na sigla em inglês) e Tempo para interação.

O bloqueio de solicitações de rede também funciona com o Lighthouse. Vamos dar uma olhada rápida no relatório do Lighthouse para um site. A pontuação de desempenho é 63/100 com um TBT de 400 ms. Analisando o código, descobrimos que esse site carrega um polyfill de Intersection Observer no Chrome, o que não é necessário. Vamos bloquear.

Bloqueio de solicitações de rede

Podemos clicar com o botão direito do mouse em um script no painel de rede do DevTools e clicar em Block Request URL para bloqueá-lo. Aqui, vamos fazer isso para o polyfill do Intersection Observer.

Bloquear URLs de solicitação no DevTools

Em seguida, podemos executar o Lighthouse novamente. Dessa vez, a pontuação de performance melhorou (70/100), assim como o tempo de bloqueio total (400 ms => 300 ms).

A visualização após o bloqueio de solicitações de rede custosas

Substituir incorporações de terceiros caras por uma fachada

É comum usar recursos de terceiros para incorporar vídeos, postagens de mídias sociais ou widgets em páginas. Por padrão, a maioria das incorporações é carregada imediatamente e pode ter payloads caros que afetam negativamente a experiência do usuário. Isso é um desperdício se o terceiro não for essencial (por exemplo, se o usuário precisar rolar a tela para encontrá-lo).

Um padrão para melhorar o desempenho desses widgets é carregá-los com carregamento lento na interação do usuário. Isso pode ser feito renderizando uma visualização leve do widget (uma fachada) e carregando a versão completa apenas se um usuário interagir com ele. O Lighthouse tem uma auditoria que recomenda recursos de terceiros que podem ser carregados lentamente com uma fachada, como incorporações de vídeo do YouTube.

Auditoria destacando que alguns recursos de terceiros caros podem ser substituídos

O Lighthouse destaca o código de terceiros que bloqueia a linha de execução principal por mais de 250 ms. Isso pode expor todos os tipos de scripts de terceiros (incluindo os criados pelo Google) que podem ser adiados ou carregados com o recurso de carregamento lento, se o que eles renderizam exige rolagem para visualização.

Reduzir o custo da auditoria de JavaScript de terceiros

Além dos Core Web Vitals

Além de destacar as Core Web Vitals, as versões recentes do Lighthouse e do PageSpeed Insights também tentam fornecer orientações concretas que você pode seguir para melhorar a rapidez com que os aplicativos da Web com muito JavaScript podem ser carregados se você tiver ativado os mapas de origem.

Isso inclui uma coleção crescente de auditorias para reduzir o custo do JavaScript na sua página, como reduzir a dependência de polyfills e duplicações que podem não ser necessárias para a experiência do usuário.

Para mais informações sobre as ferramentas das Core Web Vitals, confira a conta do Twitter da equipe do Lighthouse e Novidades nas Ferramentas do desenvolvedor.

Imagem principal de Mercedes Mehling no Unsplash.