Core Web Vitals: 7 ferramentas e técnicas para identificar gargalos de desempenho

Core Web Vitals (CWV) são um assunto quente no momento. Aqui, veremos algumas das ferramentas que podemos usar para ajudar a identificar problemas de desempenho do site, em preparação para a próxima atualização de classificação do Google em maio de 2021.

Precisa de uma atualização sobre o Core Web Vitals? Aprenda o que são e como otimizá-los em meu artigo Core Web Vitals Explained.

Monitoramento automatizado de métricas CWV

Se você tem vários sites ou páginas importantes que deseja monitorar ao longo do tempo, sem ter que executar teste após teste manualmente, esta planilha da Digital Inspiration pode ser para você. Basta pegar uma chave de API do Lighthouse PageSpeed, inserir alguns URLs e pronto!

A planilha ajuda a identificar possíveis problemas de desempenho em torno dos principais indicadores de CWV e quando eles podem ter ocorrido, o que pode nos dar pistas sobre o que pode ser a causa. Ele também pode ser usado para demonstrar como as pontuações de velocidade podem mudar naturalmente ao longo do tempo à medida que um site cresce ou quando são feitas alterações nos algoritmos de velocidade da página subjacentes.

Estamos usando uma versão modificada desta planilha há alguns meses e ela nos ajudou a identificar oportunidades de melhorar o desempenho de vários sites.

PageSpeed ​​Insights

O PageSpeed ​​Insights do Google é minha ferramenta ideal para investigações iniciais de primeira linha sobre desempenho e problemas relacionados ao CWV, tanto para dispositivos móveis quanto para desktops. Os relatórios contêm 'Dados de campo'; como os usuários do mundo real experimentam o site junto com os dados do Lighthouse 'Lab' que simulam um carregamento de página, o que é útil para testes consistentes e repetíveis.

Core Web As métricas vitais são claramente destacadas com indicadores simples e codificados por cores. As métricas ruins são destacadas em vermelho e as boas em verde. Essas métricas são combinadas para dar uma pontuação geral de velocidade, e você precisa de 90% ou mais para uma 'aprovação' verde.

Uma série de recomendações e diagnósticos também são fornecidos nesses relatórios, ordenados pelos itens de maior impacto em termos de segundos totais que podem ser salvos.

Monitor de desempenho do Chrome DevTools

Para uma análise mais detalhada de desempenho e problemas relacionados ao CWV, costumo recorrer ao Monitor de desempenho do Chrome no DevTools e alguns dos principais indicadores CWV que uso estão numerados na captura de tela abaixo.

1. Em primeiro lugar, você vai querer ter certeza de que está executando o monitor de desempenho na resolução correta, já que os elementos LCP e CLS costumam mudar em resoluções diferentes. Eu tenho o meu definido para 350 x 636 pixels para replicar a exibição móvel do PageSpeed ​​Insights.
2. Antes de executar o relatório, você também pode simular a conectividade e a potência de um dispositivo móvel. Costumo selecionar Fast 3g e 4x CPU slowdown.
3. Selecionar a métrica LCP após a geração de um relatório identifica qual é o maior elemento. Deve ser o mais próximo possível do FCP (First Contentful Paint). Se houver uma lacuna, você desejará identificar e agilizar a entrega do maior elemento.
4. Tarefas longas da CPU são destacadas pelas diagonais vermelhas nas barras cinza. Isso geralmente é causado por JavaScript mais pesado, representado pelas barras amarelas e afetará suas métricas de interatividade (FID, TBT e TTI). Detalhar as barras abaixo geralmente apontará para os arquivos e funções JavaScript ofensivos.
5. As mudanças de layout são destacadas por essas barras vermelhas e selecioná-las geralmente destacará o elemento que foi alterado. Uma grande quantidade deles criará valores CLS mais altos.
6. A visualização do quadro pode ser uma ótima maneira de destacar visualmente como o conteúdo aparece e o layout é alterado à medida que é carregado. Para valores CLS altos, geralmente fica óbvio a partir dos quadros qual é a causa. Neste exemplo, um grande banner de cookie causa a mudança de layout conforme o conteúdo é empurrado para baixo.

Extensões do Chrome Web Vitals

Core SERP Vitals

A extensão SERP Vitals exibe um indicador útil para as métricas LCP, FID e CLS direto nos resultados da pesquisa. É ótimo para análise de concorrentes e pode dar uma indicação rápida de quão rápida uma página da web provavelmente será antes de você visitá-la.

Os dados são compilados anonimamente de usuários reais pelo Chrome User Experience Report (CrUX). Não está disponível para todos os sites, no entanto, porque novos sites ou sites com pouco tráfego não terão acumulado pontos de dados suficientes.

Web Vitals

A extensão Web Vitals útil mede as 3 principais métricas CWV para usuários de desktop no Chrome em tempo real, e sua coloração de semáforo fornece um indicador rápido enquanto você navega por um site. Como não depende de dados do usuário coletados externamente, pode ser ótimo para os desenvolvedores que trabalham em um ambiente local detectar quaisquer problemas logo no início.

Farol

O Lighthouse Extensions fornece uma rota rápida para o mesmo recurso de relatório disponível no Chrome DevTools e extrai dados de laboratório usando a API Lighthouse em vez de dados de campo de usuários do mundo real por meio do CrUX.

O relatório de desempenho é muito semelhante à análise móvel do PageSpeed ​​Insights, fornecendo diagnósticos e recomendações semelhantes. Relatórios adicionais também são gerados para SEO, Acessibilidade e Melhores Práticas.

Treo Site Speed ​​Visualiser

O visualizador em https://treo.sh/sitespeed mostra as métricas CWV ao longo do tempo, filtráveis ​​por dispositivo, conectividade e região geográfica. Ele é atualizado semanalmente e usa dados do relatório CrUX.

No exemplo abaixo para bbc.co.uk, podemos ver como a métrica CLS caiu significativamente nos últimos 3 meses, fornecendo resultados de 'aprovação' verdes para todas as métricas principais. Essa é uma ótima maneira de analisar o desempenho das métricas CWV ao longo do tempo ou de conduzir uma análise da concorrência.

Visualização de solicitações de terceiros

As métricas de interatividade para FID, TTI e TBT costumam ser difíceis de solucionar. O PageSpeed ​​Insights pode ser útil para identificar alguns dos scripts de terceiros mais pesados, mas às vezes uma visualização decente pode comunicar o impacto desses scripts com muito mais facilidade.

A ferramenta de mapeamento de solicitação https://requestmap.herokuapp.com/ é excelente para isso. Os mapas gerados contêm nós para cada solicitação de terceiros, com nós maiores representando scripts de maior impacto. Se suas métricas de interatividade forem ruins, é provável que você veja muitos nós neste mapa.

Aqui está um exemplo de um site que tem 26 segundos colossais para a métrica Tempo para TTI interativo. Uma rápida olhada no mapa mostra um widget de chat ao vivo, representado pelos vários nós azul-escuros na parte superior, respondendo por mais da metade do total de solicitações.

A ferramenta de mapa de solicitação também é uma ótima maneira de determinar de onde os scripts ou outros ativos são carregados. Podemos ver abaixo vários nós vindos diretamente do nó amarelo do Gerenciador de tags do Google neste exemplo.

Cachoeiras em WebPageTest

Os relatórios WebPageTest fornecem muito mais detalhes do que o PageSpeed ​​Insights e podem ser gerados a partir de vários dispositivos e locais.

Costumo usar essa ferramenta para análise em cascata, que visualiza a sequência de carregamento de todos os ativos em uma página. Isso pode ser particularmente útil ao tentar otimizar seu conteúdo crítico 'acima da dobra'. Por exemplo, se você estiver otimizando para LCP e o maior elemento acima da dobra for uma imagem ou tipografia, você pode querer implementar o pré-carregamento nos maiores arquivos de imagem e fonte e verificar se esses recursos pré-carregados estão aparecendo no topo da cascata .

Não tendo certeza de como o CWV impactará seu site, escreva para nós hoje.