A otimização da qualidade da experiência do usuário é fundamental para o sucesso a longo prazo de qualquer site na Web. Não importa se você é proprietário de uma empresa, profissional de marketing ou desenvolvedor, as Métricas da Web podem ajudar a quantificar a experiência no seu site e identificar oportunidades de melhoria.
Visão geral
As Métricas da Web são uma iniciativa do Google para fornecer orientações unificadas quanto aos indicadores de qualidade essenciais para proporcionar uma ótima experiência do usuário na Web.
Ao longo dos anos, o Google forneceu várias ferramentas para medir e gerar relatórios sobre o desempenho. Alguns desenvolvedores são especialistas em usar essas ferramentas, enquanto outros acharam difícil acompanhar a abundância de ferramentas e métricas.
Os proprietários de sites não precisam ser especialistas em desempenho para entender a qualidade da experiência que oferecem aos usuários. O objetivo da iniciativa Web Vitals é simplificar o cenário e ajudar os sites a se concentrarem nas métricas mais importantes, as Core Web Vitals.
Core Web Vitals
As Core Web Vitals são o subconjunto de métricas que se aplicam a todas as páginas da Web. Elas precisam ser avaliadas por todos os proprietários dos sites e serão exibidas em todas as ferramentas do Google. Cada Core Web Vitals representa uma faceta distinta da experiência do usuário, é mensurável no campo e reflete a experiência real de um resultado crítico centrado no usuário.
As métricas que compõem as Core Web Vitals evoluem com o tempo. O conjunto atual para 2020 se concentra em três aspectos da experiência do usuário (carregamento, interatividade e estabilidade visual) e inclui estas métricas (e os respectivos limites):
- Maior exibição de conteúdo (LCP, na sigla em inglês): mede o desempenho do carregamento. Para oferecer uma boa experiência ao usuário, a LCP precisa ocorrer em até 2,5 segundos após o início do carregamento da página.
- Interaction to Next Paint (INP): mede a interatividade. Para oferecer uma boa experiência ao usuário, as páginas precisam ter um INP de 200 milissegundos ou menos.
- Cumulative Layout Shift (CLS, na sigla em inglês): avalia a estabilidade visual. Para oferecer uma boa experiência ao usuário, as páginas precisam manter uma CLS de 0.1. ou menos.
Para garantir que você esteja atingindo a meta recomendada para essas métricas para a maioria dos usuários, um bom limite de medição é o 75o percentil de carregamentos de página, segmentado em dispositivos móveis e computadores.
As ferramentas que avaliam a conformidade com as Core Web Vitals devem considerar a passagem de página se ela atender às metas recomendadas no 75o percentil para as três métricas.
Ciclo de vida
As métricas na faixa Core Web Vitals passam por um ciclo de vida composto de três fases: experimental, pendente e estável.
Cada fase é projetada para sinalizar aos desenvolvedores como eles devem pensar em cada métrica:
- As métricas experimentais são as Core Web Vitals em potencial que ainda podem passar por mudanças significativas dependendo dos testes e do feedback da comunidade.
- As métricas pendentes são as Core Web Vitals futuras que passaram na etapa de teste e feedback e têm um cronograma bem definido para se tornarem estáveis.
- As métricas estáveis são o conjunto atual de Core Web Vitals que o Chrome considera essenciais para ótimas experiências do usuário.
As Core Web Vitals estão nos estágios do ciclo de vida a seguir:
Experimental
Quando uma métrica é desenvolvida inicialmente e entra no ecossistema, ela é considerada uma métrica experimental.
O objetivo da fase experimental é avaliar o condicionamento da métrica, primeiro explorando o problema a ser resolvido e possivelmente iterar sobre o que as métricas anteriores não conseguiram resolver. Por exemplo, Interaction to Next Paint (INP) foi desenvolvido inicialmente como uma métrica experimental para resolver os problemas de desempenho no tempo de execução presentes na Web de maneira mais abrangente do que o First Input Delay (FID).
A fase experimental do ciclo de vida de Core Web Vitals também oferece flexibilidade no desenvolvimento de uma métrica, identificando bugs e explorando até mesmo alterações na definição inicial dela. Também é a fase em que o feedback da comunidade é mais importante.
Pendente
Quando a equipe do Chrome determina que uma métrica experimental recebeu feedback suficiente e comprovou a eficácia dela, ela se torna uma métrica pendente. Por exemplo, o INP foi promovido em 2023 do status experimental para o pendente com a intenção de desativar a FID.
As métricas pendentes são mantidas nessa fase por, no mínimo, seis meses para que o ecossistema tenha tempo para se adaptar. O feedback da comunidade continua sendo um aspecto importante dessa fase, à medida que mais desenvolvedores começam a usar a métrica.
Estável
Quando uma métrica candidata Core Web Vitals é finalizada, ela se torna uma métrica estável. Nesse momento, a métrica pode se tornar uma das Core Web Vitals.
As métricas estáveis têm suporte ativo e podem estar sujeitas a correções de bugs e mudanças de definição. As métricas estáveis das Core Web Vitals não mudam mais de uma vez por ano. Qualquer alteração em uma Core Web Vitals será claramente comunicada na documentação oficial da métrica, bem como no log de alterações da métrica. As Core Web Vitals também estão incluídas em todas as avaliações.
Ferramentas para avaliar e relatar as Core Web Vitals
O Google acredita que as Core Web Vitals são essenciais para todas as experiências na Web. Por isso, temos o compromisso de mostrar essas métricas em todas as ferramentas mais usadas. As seções a seguir detalham quais ferramentas são compatíveis com as Core Web Vitals.
Ferramentas de campo para medir as Core Web Vitals
O Chrome User Experience Report coleta dados anônimos e reais de medição de usuários para cada Core Web Vitals. Com esses dados, os proprietários de sites podem avaliar a performance rapidamente sem precisar instrumentar as análises manualmente nas páginas, além de usar ferramentas como o PageSpeed Insights e o relatório de Core Web Vitals do Search Console.
| LCP | INP | CLS | |
| Chrome User Experience Report | |||
| PageSpeed Insights | |||
| Search Console (relatório de Core Web Vitals) |
Os dados fornecidos pelo Chrome User Experience Report oferecem uma maneira rápida de avaliar o desempenho dos sites, mas não fornecem a telemetria detalhada por visualização de página, que muitas vezes é necessária para diagnosticar, monitorar e reagir rapidamente a regressões. Por isso, é altamente recomendável que os sites configurem o próprio monitoramento de usuários reais.
Medir as Core Web Vitals em JavaScript
Todas as Core Web Vitals podem ser medidas em JavaScript usando APIs da Web padrão.
A maneira mais fácil de medir todas as Core Web Vitals é usar a biblioteca JavaScript web-vitals, um pequeno wrapper pronto para produção em torno das APIs da Web que mede cada métrica de uma maneira que corresponda com precisão à forma como elas são informadas por todas as ferramentas do Google listadas anteriormente.
Com a biblioteca web-vitals, é possível medir cada métrica chamando uma única função. Consulte a documentação para conferir todos os detalhes do uso e da API:
import {onCLS, onINP, onLCP} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
fetch('/analytics', {body, method: 'POST', keepalive: true});
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);
Depois de configurar seu site para usar a biblioteca web-vitals com o objetivo de medir e enviar os dados das Core Web Vitals a um endpoint de análise, a próxima etapa é agregar e gerar relatórios sobre esses dados para ver se as páginas atendem aos limites recomendados para pelo menos 75% das visitas à página.
Embora alguns provedores de análise tenham suporte integrado às Core Web Vitals, mesmo aqueles que não precisam incluir recursos básicos de métricas personalizadas que permitem medir essas métricas na ferramenta deles.
Um exemplo disso é o Relatório de Core Web Vitals, que permite que os proprietários de sites meçam as Core Web Vitals usando o Google Analytics. Para saber como medir as Core Web Vitals usando outras ferramentas de análise, consulte o artigo Práticas recomendadas para avaliar as Core Web Vitals no campo.
Também é possível gerar relatórios sobre cada uma das Core Web Vitals sem escrever nenhum código usando a extensão do Chrome das Core Web Vitals. Essa extensão usa a biblioteca web-vitals para medir cada uma dessas métricas e exibi-las aos usuários enquanto eles navegam na Web.
Essa extensão pode ser útil para entender o desempenho dos seus próprios sites, dos sites da concorrência e da Web como um todo.
| LCP | INP | CLS | |
|---|---|---|---|
| web-vitals (link em inglês) | |||
| Extensão de Métricas da Web |
Os desenvolvedores que preferem medir essas métricas diretamente usando as APIs da Web subjacentes podem usar estes guias de métricas para ver detalhes da implementação:
Para mais orientações sobre como avaliar essas métricas usando serviços de análise conhecidos ou suas próprias ferramentas de análise internas, consulte Práticas recomendadas para avaliar as Métricas da Web no campo.
Ferramentas de laboratório para avaliar as Core Web Vitals
Embora todas as Core Web Vitals sejam, em primeiro lugar, métricas de campo, muitas delas também podem ser medidas no laboratório.
A medição do laboratório é a melhor maneira de testar o desempenho dos recursos durante o desenvolvimento, antes de serem lançados para os usuários. Essa também é a melhor maneira de detectar regressões de desempenho antes que elas aconteçam.
As ferramentas a seguir podem ser usadas para medir as Core Web Vitals em um ambiente de laboratório:
| LCP | INP | CLS | |
|---|---|---|---|
| Chrome DevTools | (use o TBT) | ||
| Lighthouse (em inglês) | (use o TBT) |
Embora a medição em laboratório seja uma parte essencial para proporcionar ótimas experiências, ela não substitui a medição de campo.
O desempenho de um site pode variar substancialmente com base nos recursos do dispositivo de um usuário, suas condições de rede, que outros processos podem estar sendo executados no dispositivo e como eles estão interagindo com a página. Na verdade, a pontuação de cada uma das Core Web Vitals pode ser afetada pela interação do usuário. Somente a medição de campo pode capturar a imagem completa com precisão.
Recomendações para melhorar suas pontuações
Os guias a seguir oferecem recomendações específicas sobre como otimizar suas páginas para cada uma das Core Web Vitals:
Outras Métricas da Web
Embora as Core Web Vitals sejam essenciais para entender e oferecer uma ótima experiência do usuário, há outras métricas de apoio.
Essas outras métricas podem servir como um substituto ou como métricas complementares para as três Core Web Vitals, para ajudar a capturar uma parte maior da experiência ou auxiliar no diagnóstico de um problema específico.
Por exemplo, as métricas Tempo até o primeiro byte (TTFB) e First Contentful Paint (FCP) são aspectos vitais da experiência de carregamento e são úteis para diagnosticar problemas com a LCP (tempos de resposta do servidor lentos ou recursos de bloqueio de renderização, respectivamente).
Da mesma forma, uma métrica como o Tempo total de bloqueio (TBT, na sigla em inglês) é uma métrica de laboratório essencial para detectar e diagnosticar possíveis problemas de interatividade que podem afetar o INP. No entanto, elas não fazem parte do conjunto de Core Web Vitals porque não são mensuráveis de campo nem refletem um resultado centrado no usuário.
Mudanças nas Métricas da Web
As Métricas da Web e as Core Web Vitals representam os melhores indicadores disponíveis que os desenvolvedores têm hoje para medir a qualidade da experiência na Web, mas esses indicadores não são perfeitos, e é esperado que essas melhorias ou melhorias sejam esperadas.
As Core Web Vitals são relevantes para todas as páginas da Web e exibidas nas ferramentas relevantes do Google. Alterações nessas métricas terão um impacto de amplo alcance; Por isso, os desenvolvedores precisam esperar que as definições e os limites das Core Web Vitals sejam estáveis, e as atualizações tenham aviso prévio e um ritmo anual previsível.
As outras Core Web Vitals geralmente são específicas para o contexto ou a ferramenta e podem ser mais experimentais do que as Core Web Vitals. Sendo assim, as definições e limites delas podem mudar com maior frequência.
Em todas as Métricas da Web, as mudanças serão documentadas claramente neste CHANGELOG público.