A coleta de dados nas Métricas da Web do seu site é o primeiro passo para aprimorá-las. Uma análise completa coletará dados de desempenho de ambientes reais e de laboratório. A medição das Métricas da Web requer mudanças mínimas no código e pode ser feita com ferramentas sem custo financeiro.
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 dos usuários reais de um site. Os dados RUM são usados pelo Google para determinar se um site atende aos limites recomendados das Core Web Vitals.
Como começar
Se você não tiver uma configuração de RUM, as ferramentas a seguir fornecerão rapidamente dados sobre o desempenho real do seu site. Essas ferramentas se baseiam no mesmo conjunto de dados subjacente (o Chrome User Experience Report), mas têm casos de uso ligeiramente diferentes:
- PageSpeed Insights (PSI): relatórios do PageSpeed Insights sobre o desempenho agregado no nível da página e da origem nos últimos 28 dias. Além disso, ela apresenta sugestões para melhorar o desempenho. Se você estiver procurando uma única ação para medir e melhorar as Métricas da Web do seu site, recomendamos usar o PSI para fazer a auditoria. O PSI está disponível na Web e como uma API.
- Search Console: o Search Console informa dados de desempenho 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 de desempenho histórico. O Search Console só pode ser usado com sites que você possui e tem propriedade verificada.
- Painel CrUX: o painel CrUX é um painel pré-criado que mostra dados do CrUX para a origem que você escolher. Ele é baseado 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 detalhados por dispositivo e tipo de conexão.
Embora as ferramentas listadas acima sejam adequadas para dar os primeiros passos na medição das Métricas da Web, elas também podem ser úteis em outros contextos. Tanto o CrUX quanto o PSI estão disponíveis como uma API e podem ser usados para criar painéis e outros relatórios.
Coleta de dados RUM
Embora as ferramentas baseadas no CrUX sejam um bom ponto de partida para investigar o desempenho das Web Vitals, recomendamos complementá-las com seu próprio RUM. Os dados RUM que você mesmo coleta podem fornecer feedback mais detalhado e imediato sobre o desempenho 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 de RUM dedicado ou configurando suas próprias ferramentas.
Fornecedores de RUM dedicados são especializados na coleta e na geração de relatórios de dados de RUM. Para usar as Core Web Vitals com esses serviços, pergunte ao seu provedor de RUM sobre como 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 atual para coletar e gerar relatórios sobre essas métricas usando a biblioteca JavaScript web-vitals. Esse método é explicado com mais detalhes abaixo.
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 (aproximadamente 1 KB) que fornece uma API conveniente para coletar e relatar cada uma das métricas da Web Vitals mensuráveis no campo.
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 criadas com base nelas. Por exemplo, a Mudança de layout cumulativa (CLS, na sigla em inglês) é implementada usando a API Layout Instability. Ao usar web-vitals, você não precisa se preocupar em implementar essas métricas. Ele também garante que os dados coletados correspondam à metodologia e às práticas recomendadas para cada métrica.
Para mais informações sobre como implementar web-vitals, consulte a documentação e o guia Práticas recomendadas para avaliar as Métricas da Web em campo.
Agregação de dados
É essencial informar as medições coletadas por web-vitals. Se esses dados forem medidos, mas não relatados, 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á tem uma ferramenta de relatórios favorita, considere usá-la. 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 melhores resultados quando toda a empresa, e não um departamento específico, está interessada em melhorar o desempenho. Consulte Como corrigir a velocidade do site de maneira multifuncional para saber como conseguir a adesão de diferentes departamentos.
Interpretação de dados
Ao analisar os dados de performance, é importante prestar atenção nas caudas da distribuição. Dados RUM muitas vezes 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 facilmente 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 medianas ou médias, para determinar se um site ou uma página atende aos limites recomendados. Especificamente, para que um site ou uma página atenda aos limites das Core Web Vitals, 75% das visitas à página precisam alcançar o valor "bom" para cada métrica.
Medir as Métricas da Web com dados de laboratório
Os dados de laboratório, também conhecidos como dados sintéticos, são coletados em um ambiente controlado, em vez de usuários reais. Ao contrário dos dados do RUM, os dados dos laboratórios podem ser coletados em ambientes de pré-produção e incorporados aos fluxos de trabalho do desenvolvedor e aos processos de integração contínua. O Lighthouse e o WebPageTest são exemplos de ferramentas que coletam dados sintéticos.
considerações
Sempre haverá discrepâncias entre os dados do RUM e os dados do laboratório, especialmente se as condições de rede, o tipo de dispositivo ou o local do ambiente do laboratório forem muito diferentes dos dos usuários. No entanto, é importante observar algumas considerações específicas sobre a coleta de dados de laboratório sobre as Métricas da Web:
- Mudança de layout cumulativa (CLS): a Mudança de layout cumulativa medida em ambientes de laboratório pode ser artificialmente menor do que a CLS observada nos dados RUM. A CLS é definida como a "soma total de todas as pontuações de mudanças de layout individuais para cada mudança inesperada de layout que ocorre durante toda a vida útil da página". No entanto, a vida útil de uma página normalmente é muito diferente, dependendo se ela está sendo carregada por um usuário real ou por uma ferramenta sintética de desempenho. Muitas ferramentas do laboratório só carregam a página, e não interagem com ela. Como resultado, eles capturam apenas as mudanças de layout que ocorrem durante o carregamento inicial da página. Por outro lado, a CLS medida pelas ferramentas RUM captura mudanças de layout inesperadas que ocorrem durante toda a vida útil da página.
- Latência na primeira entrada (FID, na sigla em inglês): não é possível medir essa latência na primeira entrada 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, na sigla em inglês) é o proxy de laboratório recomendado para a FID. O TBT mede a "quantidade total de tempo entre a Primeira exibição de conteúdo e o Tempo até a interação durante o qual a página está impedida de responder à entrada do usuário". Embora a FID e o TBT sejam calculados de maneira diferente, ambos 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. A FID mede o atraso, se houver, que ocorre na primeira vez que um usuário tenta interagir com uma página.
Ferramentas
Estas ferramentas podem ser usadas para coletar medições das Métricas da Web em laboratório:
- Extensão das Métricas da Web do Chrome:a extensão das Métricas da Web do Chrome mede e informa as Core Web Vitals (LCP, FID e CLS) de uma determinada página. O objetivo dessa ferramenta é fornecer aos desenvolvedores feedback de desempenho em tempo real à medida que eles fazem alterações no código.
- 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 uma extensão do Chrome e como um pacote npm. O Lighthouse também pode ser incorporado aos fluxos de trabalho de integração contínua pelo Lighthouse CI.
- WebPageTest:o WebPageTest inclui as Métricas da Web como parte do relatório padrão. O WebPageTest é útil para coletar informações sobre as Métricas da Web em condições específicas de dispositivo e rede.