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 gratuitas.
Medir as Métricas da Web usando dados RUM
Os dados de monitoramento real do usuário (RUM, na sigla em inglês), também conhecidos como dados de campo, capturam o desempenho observado pelos usuários reais de um site. Os dados do RUM são usados pelo Google para determinar se um site atende aos limites recomendados das Core Web Vitals.
Primeiros passos
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:
- O Chrome DevTools se integra ao conjunto de dados CrUX na visualização de métricas em tempo real do painel "Desempenho". 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 Performance do Chrome DevTools.
- Relatórios do PageSpeed Insights (PSI) sobre a performance agregada no nível da página e da origem nos últimos 28 dias. Além disso, ela fornece sugestões sobre como melhorar o desempenho. O PSI está disponível na Web e como uma API.
- O Search Console gera relatórios de dados de performance por página. Isso a torna adequada 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.
Embora as ferramentas listadas anteriormente sejam adequadas para "começar" a medir as Métricas da Web, 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 do 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 sua configuração de análise existente 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. A web-vitals é uma pequena biblioteca modular (aproximadamente 2 KB) que oferece uma API conveniente para coletar e gerar relatórios de cada uma das métricas das Web Vitals mensuráveis.
As métricas que compõem as Métricas da Web não são todas diretamente expostas pelas APIs de desempenho integradas do navegador, mas construídas 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. Isso também 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 Métricas da Web 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á tiver 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 decidir qual ferramenta usar, é útil pensar em quem precisará ter acesso aos dados. As empresas normalmente alcançam as maiores conquistas de desempenho quando toda a empresa, em vez de um único departamento, está interessada em melhorar o desempenho. 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.
Com relação às Métricas da Web, o Google usa a porcentagem de experiências "boas", em vez de estatísticas como médias ou medianas, 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 de um ambiente controlado, não de usuários reais. Ao contrário dos dados RUM, os dados de laboratório podem ser coletados em ambientes de pré-produção e, portanto, incorporados aos fluxos de trabalho do desenvolvedor 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 RUM e os dados do laboratório, especialmente se as condições da rede, o tipo de dispositivo ou o local do ambiente do laboratório forem muito diferentes dos dados dos usuários. No entanto, quando se trata de coletar dados de laboratório especificamente sobre as métricas das Métricas da Web, há algumas considerações específicas importantes a serem observadas:
- A maior exibição de conteúdo (LCP, na sigla em inglês) medida em ambientes de laboratório pode ser diferente daquela medida no 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).
- Cumulative Layout Shift (CLS, na sigla em inglês) medido em ambientes de laboratório pode ser artificialmente menor do que o CLS observado nos dados RUM. Muitas ferramentas de laboratório apenas carregam a página, não interagem com ela. Como resultado, eles capturam apenas mudanças de layout que ocorrem durante o carregamento inicial da página. Por outro lado, a CLS medida pelas ferramentas de RUM captura mudanças de layout inesperadas que ocorrem durante toda a vida útil da página.
- A Interação com a 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. A TBT mede a "quantidade total de tempo entre a First Contentful Paint e o Tempo para interação da página em que a página fica impedida de 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 atrasa na resposta à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 determinada página 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.
- O Lighthouse (link em inglês) informa sobre LCP, CLS e TBT, além de destacar possíveis melhorias na 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 os Web Vitals em determinadas condições de dispositivo e rede.