Encontrar oportunidades para melhorar a experiência do usuário com as ferramentas da Web do Chrome.
Publicado em: 11 de maio de 2021
Hoje, vamos falar sobre os novos recursos de ferramentas no Lighthouse, no PageSpeed e no DevTools para ajudar a identificar como seu site pode melhorar as Web Vitals.
Para relembrar, o Lighthouse é uma ferramenta automatizada de código aberto para melhorar a qualidade das páginas da Web. Ele está disponível no pacote de ferramentas de depuração do Chrome DevTools e pode ser executado em qualquer página da Web, pública ou que exija autenticação. Você também pode 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 para capturas de tela de elementos no PageSpeed Insights, o que facilita a identificação de problemas em execuções de desempenho únicas de páginas.
Medir as Core Web Vitals
O Lighthouse pode medir de forma sintética 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 First Contentful Paint, destacadas no futuro das Core Web Vitals, também estão disponíveis.
A seção "Métricas" do relatório do Lighthouse inclui versões de laboratório dessas métricas. Use isso como uma visualização resumida de quais aspectos da experiência do usuário exigem sua atenção.
As métricas de campo, como as encontradas no Chrome UX Report ou no RUM, não têm essa limitação e são um complemento valioso para os dados de laboratório, já que refletem a experiência de usuários reais. Os dados de campo não oferecem os tipos de informações de diagnóstico que você recebe no laboratório, então os dois andam juntos.
Identificar onde você pode melhorar as Web Vitals
Identificar o elemento Largest Contentful Paint
A LCP é uma medição da experiência de carregamento percebida. Ela 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 de "Elemento Largest Contentful Paint" que identifica qual elemento foi a Largest Contentful Paint. Passe o cursor sobre o elemento para destacá-lo na janela principal do navegador.
Se esse elemento for uma imagem, essa informação é uma dica útil de que talvez seja necessário otimizar o carregamento dela. O Lighthouse inclui várias auditorias de otimização de imagens para ajudar você a entender se as imagens podem ser melhor compactadas, redimensionadas ou entregues em um formato de imagem moderno mais otimizado.
Você também pode achar útil o bookmarklet LCP de Annie Sullivan para identificar rapidamente o elemento LCP com um retângulo vermelho em apenas um clique.
Pré-carregar imagens descobertas tardiamente para melhorar a LCP
Para melhorar a Largest Contentful Paint, pré-carregue as imagens principais importantes se elas estiverem sendo descobertas tarde pelo navegador. Uma descoberta tardia pode acontecer se um pacote JavaScript precisar ser carregado antes que a imagem seja detectável.
Há algumas perguntas comuns sobre o pré-carregamento de imagens LCP que também podem ser abordadas brevemente.
É possível pré-carregar imagens responsivas? Sim.
Digamos que temos uma imagem principal responsiva, conforme especificado 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 da LCP for definida por um plano de fundo CSS? Sim.
Qualquer imagem sinalizada como LCP, seja pelo plano de fundo CSS ou por <img>, é uma candidata se for
descoberta em uma profundidade de cascata de três ou mais.
Carregamento lento de imagens fora da tela e como 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 para perto dela, o que pode reduzir a contenção de rede para recursos críticos e, em alguns casos, melhorar a LCP. A auditoria "Adiar o carregamento de imagens fora da tela" pode ajudar:
Imagens críticas acima da dobra, como a imagem da Maior exibição de conteúdo, não podem ser carregadas de forma lenta. Isso pode atrasar o carregamento da imagem da LCP. O Lighthouse vai destacar se uma imagem LCP estiver sendo carregada de forma lenta incorretamente com a auditoria "A imagem da Largest Contentful Paint foi carregada de forma lenta":
Identificar contribuições para a CLS
A Cumulative Layout Shift é uma medida de estabilidade visual. Ela quantifica o quanto o conteúdo de uma página muda visualmente. O Lighthouse tem uma auditoria para depurar a CLS chamada "Evite grandes mudanças de layout".
Essa auditoria destaca os elementos DOM que mais contribuem para as mudanças na página. Na coluna "Element" à esquerda, você verá a lista desses elementos DOM e, à direita, a contribuição geral deles para o CLS.
Graças ao novo recurso de capturas de tela de elementos do Lighthouse, podemos ver uma prévia visual dos principais elementos observados na auditoria, além de clicar para ampliar e ter uma visão mais clara:
Para CLS pós-carregamento, pode ser útil visualizar de forma persistente com retângulos quais elementos mais contribuíram para a CLS. Esse é um recurso que você encontra em ferramentas de terceiros, como o painel de Core Web Vitals da SpeedCurve, e que eu adoro usar com o gerador de GIFs de mudança de layout da Defaced para:
Para uma visualização em todo o site dos problemas de mudança de layout, o relatório 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 parciais de modelo preciso analisar):
Identificar CLS de imagens sem dimensões
Para limitar a Cumulative Layout Shift causada por imagens sem dimensões, inclua atributos de largura e altura nos elementos de imagem e vídeo. Essa abordagem garante que o navegador possa alocar a quantidade correta de espaço no documento enquanto a imagem é carregada.
Consulte Setting Height And Width On Images Is Important Again para uma boa explicação sobre a importância de pensar nas dimensões e na proporção da imagem.
Como identificar CLS em anúncios
Com o Publisher Ads para Lighthouse, você pode encontrar oportunidades para melhorar a experiência de carregamento dos anúncios na sua página, incluindo contribuições para mudanças de layout e tarefas longas que podem atrasar o momento em que a página fica disponível para os usuários. No Lighthouse, é possível ativar isso usando os plug-ins da comunidade.
Lembre-se de que os anúncios são um dos maiores responsáveis por mudanças de layout na Web. É importante:
- Tenha 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 do anúncio.
Evite animações não compostas
As animações não compostas podem apresentar instabilidade em dispositivos mais simples se tarefas pesadas de 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 pôde ser composta, ele vai informar isso a um trace do DevTools que o Lighthouse lê, permitindo que ele liste quais elementos com animações não foram compostos e por qual motivo. Você pode encontrá-las na auditoria Evitar animações não compostas.
Depurar First Input Delay / Total Blocking Time / tarefas longas
A First Input mede o tempo entre a primeira interação de um 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 começar a processar os manipuladores de eventos em resposta a essa interação. As tarefas longas de JavaScript podem afetar essa métrica e o proxy dela, o Total Blocking Time.
O Lighthouse inclui uma auditoria Evitar tarefas longas na 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, podemos ver o URL dos scripts responsáveis por tarefas longas da linha de execução principal.
À direita, podemos ver a duração dessas tarefas. Como lembrete, as tarefas longas são aquelas que levam mais de 50 milissegundos para serem executadas. 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 bastante do visual 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 pai e filho que contribuem para tarefas longas que afetam a interatividade.
Bloquear solicitações de rede para ver o impacto antes/depois no Lighthouse
O Chrome DevTools permite bloquear solicitações de rede para ver o impacto da remoção ou indisponibilidade de recursos individuais. Isso pode ser útil para entender o custo que scripts individuais (por exemplo, incorporações ou rastreadores de terceiros) têm em métricas como Total Blocking Time (TBT) e Time to Interactive.
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 do Intersection Observer no Chrome, o que não é necessário. Vamos bloquear!
Podemos clicar com o botão direito do mouse em um script no painel Network do DevTools e clicar em Block Request URL para bloqueá-lo. Aqui, vamos fazer isso para o polyfill do Intersection Observer.
Em seguida, podemos executar o Lighthouse novamente. Desta vez, podemos ver que nossa pontuação de desempenho melhorou (70/100), assim como o Total Blocking Time (400 ms => 300 ms).
Substituir incorporações de terceiros caras por uma fachada
É comum usar recursos de terceiros para incorporar vídeos, postagens de redes sociais ou widgets em páginas. Por padrão, a maioria das incorporações é carregada imediatamente e pode vir com 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 antes de vê-lo).
Um padrão para melhorar o desempenho desses widgets é carregá-los lentamente na interação do usuário. Para isso, renderize uma prévia leve do widget (uma fachada) e carregue a versão completa apenas se um usuário interagir com ela. O Lighthouse tem uma auditoria que recomenda recursos de terceiros que podem ser carregados lentamente com uma fachada, como vídeos incorporados do YouTube.
Como lembrete, 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 ter carregamento lento se o que eles renderizam exigir rolagem para visualização.
Além das 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 velocidade de carregamento de aplicativos da Web com muito JavaScript se os mapas de origem estiverem ativados.
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 duplicatas 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, fique de olho na conta do Twitter da equipe do Lighthouse (link em inglês) e em Novidades no DevTools.