Encontrar oportunidades para melhorar a experiência do usuário com as ferramentas da Web do Chrome.
Hoje, vamos abordar os novos recursos de ferramentas no Lighthouse, PageSpeed e DevTools para ajudar a identificar como seu site pode melhorar nas Web Vitals.
Para relembrar, o Lighthouse é uma ferramenta automatizada de código aberto para melhorar a qualidade das páginas da Web. Você pode encontrá-lo no pacote de ferramentas de depuração 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 em 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 incluímos o suporte para capturas de tela de elementos no PageSpeed Insights, o que facilita a identificação de problemas em execuções únicas de páginas com desempenho.
Medir as Core Web Vitals
O Lighthouse pode medir sintéticamente as métricas Core Web Vitals, incluindo Largest Contentful Paint, Cumulative Layout Shift e Total Blocking Time, que é 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 lá.
A seção "Métricas" do relatório do Lighthouse inclui versões de laboratório dessas métricas. Use isso como uma visão resumida de quais aspectos da experiência do usuário exigem sua atenção.
As métricas de campo, como as encontradas no Relatório de UX do Chrome ou no RUM, não têm essa limitação e são um complemento valioso aos dados do laboratório, porque 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 nas Métricas da Web
Identificar o elemento Largest Contentful Paint
A LCP é uma medição da experiência de carregamento percebida. Isso marca o ponto durante o carregamento da página em que o conteúdo principal, ou "maior", é carregado e fica visível para o usuário.
O Lighthouse tem uma auditoria de "Maior elemento de pintura de conteúdo" que identifica qual elemento foi a maior pintura de conteúdo. Passe o cursor sobre o elemento para destacá-lo na janela principal do navegador.
Se esse elemento for uma imagem, essa informação será uma dica útil para otimizar o carregamento da imagem. O Lighthouse inclui várias auditorias de otimização de imagens para ajudar você a entender se elas poderiam ser melhor compactadas, redimensionadas ou entregues em um formato de imagem moderno mais adequado.
O Marcador da LCP de Annie Sullivan também pode ser útil para identificar rapidamente o elemento da LCP com um retângulo vermelho com apenas um clique.
Pré-carregue imagens descobertas tardiamente para melhorar a LCP
Para melhorar a Largest Contentful Paint, pré-carregue suas imagens principais críticas caso elas sejam descobertas com atraso 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 que recebemos sobre o pré-carregamento de imagens da LCP que também podem valer a pena abordar 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 destacará as oportunidades de pré-carregamento se a imagem LCP for definida por um segundo plano do CSS? Sim.
Qualquer imagem sinalizada como LCP, seja pelo plano de fundo do CSS ou pelo <img>, será candidata se for
descoberta em uma profundidade de cascata de três ou mais.
Carregamento lento de imagens fora da tela e evitando isso para LCP
As imagens fora da tela que não são essenciais para a experiência inicial do usuário podem ser carregadas lentamente. Essa é uma técnica que adia o download de uma imagem até que o usuário role a tela 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 imagens fora da tela pode ajudar:
Imagens críticas acima da dobra, como a imagem da Largest Contentful Paint, não devem ser carregadas lentamente. Isso pode atrasar o carregamento da imagem LCP. O Lighthouse vai destacar se uma imagem LCP estiver sendo carregada lentamente de forma incorreta pela auditoria "A imagem da Maior exibição de conteúdo foi carregada lentamente":
Identificar contribuições de CLS
A Cumulative Layout Shift é uma medida de estabilidade visual. Ela quantifica quanto o conteúdo de uma página muda visualmente. O Lighthouse tem uma auditoria para depurar a CLS chamada "Evitar grandes mudanças no layout".
Esta auditoria destaca os elementos DOM que mais contribuem para as mudanças da página. Na coluna Elemento, à esquerda, você verá a lista desses elementos DOM e, à direita, a contribuição geral deles na CLS.
Graças ao novo recurso de capturas de tela de elementos do Lighthouse, podemos visualizar os principais elementos observados na auditoria e clicar para aplicar zoom para ter uma visão mais clara:
Para o CLS pós-carregamento, pode haver valor na visualização persistente com retângulos quais elementos contribuíram mais para o CLS. Esse é um recurso que você encontra em ferramentas de terceiros, como o painel Core Web Vitals do SpeedCurve e que adoro usar o Gerador de GIFs do Layout Shift da Defaced para:
Para ter uma visão geral dos problemas de mudança de layout em todo o site, percebo muito bem com o relatório Core Web Vitals do Search Console. Isso me permite ver os tipos de páginas no meu site com CLS alto (neste caso, ajudar a identificar por conta própria em quais partes do modelo preciso gastar meu tempo):
Como identificar a CLS de imagens sem dimensões
Para limitar a Cumulative Layout Shift causada por imagens sem dimensões, inclua atributos de tamanho 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 está sendo carregada.
Consulte o artigo Definir altura e largura das imagens novamente (em inglês) para uma boa descrição da importância de se pensar nas dimensões e na proporção da imagem.
Identificar a CLS com base em anúncios
Com o Publisher Ads for Lighthouse, você encontra oportunidades para melhorar a experiência de carregamento dos anúncios na sua página, incluindo contribuições para a mudança de layout e tarefas longas que podem aumentar a velocidade de uso da página para os usuários. No Lighthouse, é possível ativar essa opção pelos plug-ins da comunidade.
Lembre-se de que os anúncios são um dos maiores fatores que contribuem para as mudanças de layout na Web. É importante:
- Tenha cuidado ao posicionar anúncios não fixos perto da parte superior da janela de visualização
- Eliminar as mudanças reservando o maior tamanho possível para o espaço do anúncio
Evitar animações não compostas
As animações não compostas podem apresentar instabilidade em dispositivos mais simples se tarefas JavaScript pesadas estiverem mantendo a linha de execução principal ocupada. Essas animações podem introduzir mudanças de layout.
Se o Chrome descobrir que não é possível compor uma animação, ele a informará a um trace do DevTools das leituras do Lighthouse, permitindo listar quais elementos com animações não foram compostas e por qual motivo. Você pode encontrá-las na auditoria Evitar animações não compostas.
Depuração de First Input Delay / tempo total de bloqueio / tarefas longas
A Primeira entrada 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) até o momento em que o navegador pode começar a processar manipuladores de eventos em resposta a essa interação. Tarefas JavaScript longas podem afetar essa métrica e o proxy dela, o tempo total de bloqueio.
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 fatores do atraso 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. As tarefas longas são executadas por mais de 50 milissegundos. Considera-se que isso bloqueia a linha de execução principal por tempo suficiente para afetar o frame rate ou a latência de entrada.
Se 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 tarefas mãe e filhas que contribuem para tarefas longas que afetam a interatividade.
Bloqueie 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 da remoção ou indisponibilidade de recursos individuais. Isso pode ser útil para entender o custo de scripts individuais (por exemplo, incorporações ou rastreadores de terceiros) em métricas como tempo total de bloqueio (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 este site carrega um polyfill do Intersection Observer no Chrome, o que não é necessário. Vamos bloqueá-lo!
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, faremos isso para o polyfill do Intersection Observer.
Em seguida, execute o Lighthouse novamente. Desta vez, nossa pontuação de desempenho melhorou (70/100), porque o tempo total de bloqueio (400 ms => 300 ms).
Substituir incorporações caras de terceiros 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 prontamente e pode vir com payloads caros que afetam negativamente a experiência do usuário. Isso será um desperdício se o terceiro não for essencial (por exemplo, se o usuário precisar rolar a tela para vê-lo).
Um padrão para melhorar o desempenho desses widgets é o 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 ela. O Lighthouse tem uma auditoria que recomenda recursos de terceiros que podem ser carregados lentamente com uma fachada, como incorporações de vídeos do YouTube.
O Lighthouse vai destacar 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 aqueles de autoria do Google) que talvez valham mais a pena adiar ou o carregamento lento se o que eles renderizarem exigir rolagem para vê-los.
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 oferecem orientações concretas para melhorar a rapidez com que aplicativos da Web com uso intenso de JavaScript podem ser carregados se os mapas de origem estiverem ativados.
Isso inclui um conjunto crescente de auditorias para reduzir o custo do JavaScript na sua página, como reduzir a dependência de polyfills e cópias que podem não ser necessárias para a experiência do usuário.
Para saber mais sobre as ferramentas das Core Web Vitals, fique de olho na conta da equipe do Lighthouse no Twitter e em Novidades no DevTools.
Imagem principal de Mercedes Mehling no Unsplash (links em inglês).