Começar a medir as Web Vitals

Katie Hempenius
Katie Hempenius

A coleta de dados sobre as Core Web Vitals do seu site é o primeiro passo para melhorá-las. Uma análise completa coleta dados de desempenho de ambientes reais e de laboratório. A medição dos Web Vitals requer mudanças mínimas no código e pode ser feita usando ferramentas sem custo financeiro.

Os dados de Monitoramento de usuários reais (RUM, na sigla em inglês), também conhecidos como dados de campo, capturam o desempenho que os usuários reais de um site vivenciam. Os dados do RUM são usados pelo Google para determinar se um site atende aos limites recomendados das Core Web Vitals.

Se você não tiver uma configuração do RUM, as ferramentas a seguir vão fornecer dados rápidos sobre o desempenho real do seu site. Todas essas ferramentas são baseadas no mesmo conjunto de dados (o Chrome User Experience Report), mas têm casos de uso um pouco diferentes:

  • As Ferramentas do desenvolvedor do Chrome são integradas ao conjunto de dados do CrUX na visualização de métricas em tempo real do painel "Performance". Ao comparar sua experiência local com as experiências de usuários reais na mesma página, você pode tomar uma decisão mais informada sobre onde concentrar seus esforços de depuração. Se você quer começar a medir e melhorar as Core Web Vitals do seu site, recomendamos usar o painel de desempenho do Chrome DevTools.
  • Os relatórios do PageSpeed Insights (PSI) mostram a performance agregada no nível da página e da origem nos últimos 28 dias. Além disso, ele oferece sugestões sobre como melhorar a performance. O PSI está disponível na Web e como uma API.
  • O Search Console informa dados de desempenho por página. Isso é útil para identificar páginas específicas que precisam de melhorias. Ao contrário dos Insights do PageSpeed, os relatórios do Search Console incluem dados de desempenho históricos. O Search Console só pode ser usado com sites que você possui e confirmou a propriedade.
  • O painel do CrUX é um painel pré-criado que mostra dados do CrUX para uma origem que você escolher. Ele é criado com base no Data Studio, e o processo de configuração leva cerca de um minuto. Em comparação com o PageSpeed Insights e o Search Console, os relatórios do painel do CrUX incluem mais dimensões. Por exemplo, os dados podem ser divididos por dispositivo e tipo de conexão.

Vale ressaltar que, embora as ferramentas listadas anteriormente sejam adequadas para "começar" a medir as Core Web Vitals, elas também podem ser úteis em outros contextos. Especificamente, o CrUX e o PSI estão disponíveis como uma API e podem ser usados para criar painéis e outros relatórios.

Coletar dados do RUM

Embora as ferramentas baseadas em CrUX sejam um bom ponto de partida para investigar a performance das Web Vitals, recomendamos que você as complemente com seu próprio RUM. Os dados do RUM que você coleta podem fornecer feedback mais detalhado e imediato sobre a performance do seu site. Isso facilita a identificação de problemas e o teste de possíveis soluções.

Você pode coletar seus próprios dados do RUM usando um provedor dedicado ou configurando suas próprias ferramentas.

Os provedores dedicados de RUM são especializados na coleta e no envio de dados de RUM. Para usar as Core Web Vitals com esses serviços, peça ao seu provedor de RUM para ativar o monitoramento das Core Web Vitals no seu site.

Se você não tiver um provedor de RUM, poderá aumentar a configuração de análise atual para coletar e gerar relatórios sobre essas métricas usando a biblioteca JavaScript web-vitals. Esse método será explicado em mais detalhes a seguir.

A biblioteca JavaScript do Web Vitals

Se você estiver implementando sua própria configuração do RUM para as métricas da Web, a maneira mais fácil de coletar as medições é usar a biblioteca JavaScript web-vitals. O web-vitals é uma biblioteca modular pequena (~2 KB) que fornece uma API conveniente para coletar e informar cada uma das métricas mensuráveis no campo das Core Web Vitals.

As métricas que compõem as Core Web Vitals não são todas expostas diretamente pelas APIs de performance integradas do navegador, mas são criadas com base nelas. Por exemplo, o Cumulative Layout Shift (CLS) é implementado usando a API Layout Instability. Ao usar web-vitals, você não precisa se preocupar em implementar essas métricas. Além disso, ele garante que os dados coletados correspondam à metodologia e às práticas recomendadas de cada métrica.

Para mais informações sobre a implementação de web-vitals, consulte a documentação e o guia Práticas recomendadas para medir as Core Web Vitals no campo.

Agregação de dados

É essencial informar as medições coletadas por web-vitals. Se esses dados forem medidos, mas não informados, você nunca vai ter acesso a eles. A documentação da web-vitals inclui exemplos que mostram como enviar os dados para um endpoint genérico da API, o Google Analytics ou o Gerenciador de tags do Google.

Se você já tem uma ferramenta de geração de relatórios favorita, use-a. Caso contrário, o Google Analytics é sem custo financeiro e pode ser usado para essa finalidade.

Ao considerar qual ferramenta usar, é útil pensar em quem vai precisar ter acesso aos dados. As empresas geralmente alcançam os maiores ganhos de performance quando toda a empresa, e não apenas um departamento, tem interesse em melhorar a performance. Consulte Como corrigir a velocidade do site em várias funções para saber como conseguir o apoio de diferentes departamentos.

Interpretação de dados

Ao analisar dados de performance, é importante prestar atenção às caudas da distribuição. Os dados do RUM geralmente revelam que a performance varia muito: alguns usuários têm experiências rápidas, outros têm experiências lentas. No entanto, usar a mediana para resumir dados pode mascarar esse comportamento.

Em relação aos Core Web Vitals, o Google usa a porcentagem de experiências "boas", em vez de estatísticas como medianas ou médias, para determinar se um site ou página atende aos limites recomendados. Especificamente, para que um site ou página seja considerado como atendendo aos limites das Core Web Vitals, 75% das visitas à página precisam atender ao limite "bom" para cada métrica.

Medir as Métricas da Web usando dados de laboratório

Os dados de laboratório, também conhecidos como dados sintéticos, são coletados em um ambiente controlado, e não de usuários reais. Ao contrário dos dados do RUM, os dados de laboratório podem ser coletados em ambientes de pré-produção e, portanto, incorporados aos fluxos de trabalho de desenvolvedores e aos processos de integração contínua. Exemplos de ferramentas que coletam dados sintéticos são o Lighthouse e o WebPageTest.

Considerações

Sempre haverá discrepâncias entre os dados do RUM e do laboratório, principalmente se as condições de rede, o tipo de dispositivo ou a localização do ambiente do laboratório forem significativamente diferentes das dos usuários. No entanto, quando se trata de coletar dados de laboratório sobre as métricas do Web Vitals em particular, é importante considerar alguns aspectos específicos:

  • A maior exibição de conteúdo (LCP, na sigla em inglês) medida em ambientes de laboratório pode ser diferente daquela medida em campo com dados do RUM devido a atrasos no carregamento da página (por redirecionamentos, latência de conexão com o servidor ou dados não armazenados em cache), conteúdo diferente mostrado para usuários diferentes dependendo da tela ou por outros motivos (incluindo banners de cookies, personalização).
  • O Cumulative Layout Shift (CLS) medido em ambientes de laboratório pode ser artificialmente menor do que o CLS observado nos dados do RUM. Muitas ferramentas de laboratório apenas carregam a página, não interagem com ela. Como resultado, eles só capturam mudanças de layout que ocorrem durante o carregamento inicial da página. Em contraste, o CLS medido pelas ferramentas de RUM captura mudanças de layout inesperadas que ocorrem durante toda a vida útil da página.
  • A métrica Interaction to Next Paint (INP) não pode ser medida em ambientes de laboratório porque exige interações do usuário com a página. Como resultado, o Tempo total de bloqueio (TBT, na sigla em inglês) é o proxy de laboratório recomendado para INP. O TBT mede o "tempo total entre a First Contentful Paint e o Tempo para interação, em que a página fica bloqueada para responder à entrada do usuário". Embora a INP e a TBT sejam calculadas de maneira diferente, elas são reflexos de uma linha de execução principal bloqueada durante o processo de inicialização. Quando a linha de execução principal é bloqueada, o navegador demora para responder às interações do usuário.

Ferramentas

Estas ferramentas podem ser usadas para coletar medições de laboratório das Core Web Vitals:

  • O Chrome DevTools mede e gera relatórios sobre as Core Web Vitals de uma página específica na visualização de métricas em tempo real do painel "Performance". Essa visualização oferece aos desenvolvedores feedback de desempenho em tempo real à medida que eles fazem mudanças no código.
  • Lighthouse: relatórios do Lighthouse sobre LCP, CLS e TBT, além de destacar possíveis melhorias de performance. O Lighthouse está disponível no Chrome DevTools como um pacote npm e também pode ser incorporado a fluxos de trabalho de integração contínua usando o Lighthouse CI.
  • O WebPageTest inclui as Core Web Vitals como parte dos relatórios padrão. O WebPageTest é útil para coletar informações sobre os Web Vitals em determinadas condições de dispositivo e rede.