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 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 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.
Medir as Core Web Vitals
O Lighthouse pode sintetizar 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.
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, então os dois vão juntos.
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. Passe o cursor sobre o elemento para destacá-lo na janela principal do navegador.
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.
O Favoritelet 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. A 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 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.
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 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:
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":
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 da página. Na coluna "Elemento" à esquerda, você vai encontrar a lista desses elementos DOM e, à direita, a contribuição geral de CLS.
Graças ao novo recurso "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 de Core Web Vitals do SpeedCurve e o Layout Shift GIF Generator do Defaced:
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):
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.
Consulte o artigo Definir altura e largura das imagens mais uma vez 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
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 uso da página pelos usuários. No Lighthouse, é possível ativar isso usando os plug-ins da comunidade.
Os anúncios são um dos principais contribuintes para mudanças de layout na Web. É importante:
- Tenha cuidado ao colocar 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
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 encontrá-las na auditoria Evitar animações não compostas.
Depuração de First Input Delay / tempo total de bloqueio / 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 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 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 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.
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 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 Tempo de bloqueio total (TBT, na sigla em inglês) e Tempo para interatividade.
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.
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.
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).
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 imediatamente 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.
Não se esqueça de que 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.
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 rapidez com que os aplicativos da Web com muito JavaScript podem ser carregados se você tiver ativado os mapas de origem.
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).