Coletar dados sobre as métricas vitais da Web do seu site é o primeiro passo para melhorá-las. Uma análise completa coleta dados de desempenho de ambientes reais e de laboratório. Medir as Vitals da Web exige poucas mudanças no código e pode ser feito com ferramentas sem custo financeiro.
Medir as Métricas da Web usando dados de RUM
Os dados de Real User Monitoring (RUM), também conhecidos como dados de campo, capturam o desempenho experimentado pelos usuários reais de um site. Os dados de RUM são usados pelo Google para determinar se um site atende aos valores recomendados das Core Web Vitals.
Primeiros passos
Se você não tiver uma configuração de RUM, as ferramentas a seguir vão fornecer rapidamente dados sobre o desempenho real do seu site. Essas ferramentas são baseadas no mesmo conjunto de dados (o Chrome User Experience Report), mas têm casos de uso ligeiramente diferentes:
- O Chrome DevTools se integra 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 fundamentada sobre onde concentrar seus esforços de depuração. Se você está procurando uma única ação para começar a medir e melhorar as Web Vitals do seu site, recomendamos usar o painel "Performance" do Chrome DevTools.
- O PageSpeed Insights (PSI) gera relatórios sobre o desempenho agregado 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.
- Os relatórios do Search Console mostram dados de performance por página. Isso o torna adequado para identificar páginas específicas que precisam de melhorias. Ao contrário do PageSpeed Insights, os relatórios do Search Console incluem dados históricos de desempenho. O Search Console só pode ser usado com sites que você possui e cuja propriedade foi verificada.
- O CrUX Vis é um painel pré-criado que mostra dados históricos da CrUX para um URL ou uma origem de sua escolha (quando disponível no conjunto de dados da CrUX). Ele é criado com base na API CrUX History e o processo de configuração leva cerca de um minuto. Em comparação com o PageSpeed Insights e o Search Console, o CrUX Vis inclui mais exemplos de dados, subpartes de LCP, tipos de navegação e assim por diante.
- O CrUX Vis é um painel histórico que mostra dados da CrUX para uma origem ou um URL de sua escolha. Ele é criado com base na API CrUX History. Em comparação com o PageSpeed Insights e o Search Console, os relatórios do CrUX Vis incluem mais detalhes. Por exemplo, os tipos de navegação e os dados de LCP e RTT estão disponíveis no CrUX Vis.
Vale a pena observar que, embora as ferramentas listadas anteriormente sejam adequadas para "começar" a medir as Web Vitals, elas também podem ser úteis em outros contextos. Em particular, 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 de RUM
Embora as ferramentas baseadas no CrUX sejam um bom ponto de partida para investigar a performance das Web Vitals, recomendamos complementar com seu próprio RUM. Os dados de RUM coletados por você 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 de RUM usando um provedor dedicado ou configurando suas próprias ferramentas.
Os provedores dedicados de RUM são especializados em coletar e gerar relatórios 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, talvez seja possível aumentar sua 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 é explicado com mais detalhes a seguir.
A biblioteca JavaScript web-vitals
Se você estiver implementando sua própria configuração de RUM para as métricas da Web, a maneira mais fácil de coletar medições é usar a biblioteca JavaScript web-vitals. O web-vitals é uma biblioteca pequena e modular (~2 KB) que oferece uma API conveniente para coletar e gerar relatórios de cada uma das métricas de Web Vitals mensuráveis em campo.
As métricas que compõem as Web Vitals não são todas expostas diretamente pelas APIs de performance integradas do navegador, mas sim 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 por conta própria. Além disso, os dados coletados correspondem à 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 métricas da Web em campo.
Agregação de dados
É essencial que você informe as medições coletadas por web-vitals. Se esses dados forem medidos, mas não informados, você nunca os verá. A documentação do web-vitals inclui exemplos de como enviar os dados para um endpoint de API genérico, o Google Analytics ou o Gerenciador de tags do Google.
Se você já tiver uma ferramenta 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 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 de forma multifuncional para saber como conseguir a adesão de diferentes departamentos.
Interpretação de dados
Ao analisar dados de performance, é importante prestar atenção às extremidades da distribuição. Os dados de RUM geralmente revelam que o desempenho varia muito. Alguns usuários têm experiências rápidas, outros têm experiências lentas. No entanto, usar a mediana para resumir os dados pode mascarar esse comportamento.
Em relação aos 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 precisam atender ao limite "bom" de 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 de um ambiente controlado, e não de usuários reais. Ao contrário dos dados de RUM, os dados de laboratório podem ser coletados de ambientes de pré-produção e, portanto, incorporados aos fluxos de trabalho de desenvolvedores e 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 de RUM e de laboratório, principalmente se as condições de rede, o tipo de dispositivo ou a localização do ambiente de laboratório forem muito diferentes dos dos usuários. No entanto, ao coletar dados de laboratório sobre as métricas de Web Vitals, há algumas considerações específicas importantes:
- Maior exibição de conteúdo (LCP) medida em ambientes de laboratório pode ser diferente da medida em campo com dados de RUM devido a atrasos no carregamento da página (por redirecionamentos, latência na conexão com o servidor ou dados não armazenados em cache), conteúdo diferente mostrado a usuários diferentes dependendo da tela ou por outros motivos (incluindo banners de cookies, personalização).
- A mudança de layout cumulativa (CLS, na sigla em inglês) medida em ambientes de laboratório pode ser artificialmente menor do que a CLS observada nos dados de RUM. Muitas ferramentas de laboratório apenas carregam a página, sem interagir com ela. Como resultado, eles só capturam mudanças de layout que ocorrem durante o carregamento inicial da página. Por outro lado, a CLS medida por ferramentas de RUM captura mudanças de layout inesperadas que ocorrem durante toda a vida útil da página.
- Não é possível medir a Interação com a próxima exibição (INP) em ambientes de laboratório porque ela exige interações do usuário com a página. Como resultado, o Tempo total de bloqueio (TBT) é o proxy de laboratório recomendado para o INP. O TBT mede o "tempo total entre o First Contentful Paint e o Tempo para interação da página em que a página fica bloqueada e não responde à entrada do usuário". Embora o INP e o TBT sejam calculados de maneira diferente, ambos refletem uma linha de execução principal bloqueada durante o processo de bootstrap. Quando a linha de execução principal é bloqueada, o navegador demora para responder às interações do usuário.
Ferramentas
Essas ferramentas podem ser usadas para coletar medições de laboratório das Web Vitals:
- O Chrome DevTools mede e informa as Core Web Vitals de uma determinada página na visualização de métricas em tempo real do painel "Performance". Essa visualização fornece aos desenvolvedores feedback de desempenho em tempo real à medida que eles fazem mudanças no código.
- Lighthouse: o Lighthouse gera relatórios 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 Web Vitals como parte dos relatórios padrão. O WebPageTest é útil para coletar informações sobre as métricas vitais da Web em condições específicas de dispositivo e rede.