As Métricas da Web são uma iniciativa do Google para fornecer orientações unificadas para indicadores de qualidade da página da Web que são essenciais para oferecer uma ótima experiência do usuário na Web. O objetivo é simplificar a ampla variedade de ferramentas de medição de desempenho disponíveis e ajudar os proprietários de sites a se concentrar 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, precisam ser medidas por todos os proprietários do site e aparecem em todas as ferramentas do Google. Cada uma das 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 se concentra em três aspectos da experiência do usuário: carregamento, interatividade e estabilidade visual. Ele inclui as seguintes métricas:
- Maior exibição de conteúdo (LCP): mede a performance 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.
- Latência na primeira entrada (FID, na sigla em inglês): mede a interatividade. Para oferecer uma boa experiência ao usuário, as páginas precisam ter um FID de 100 milissegundos ou menos.
- Mudança de layout cumulativa (CLS): mede a estabilidade visual. Para oferecer uma boa experiência do usuário, é necessário manter um CLS de 0.1. ou menos.
Para cada uma dessas métricas, para garantir que você atinja a meta recomendada para a maioria dos usuários, um bom limite a ser medido é 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 precisam considerar uma página em conformidade se ela atender aos destinos recomendados no 75o percentil para cada uma dessas três métricas.
Lifecycle
As métricas nessa faixa passam por um ciclo de vida com três fases: experimental, pendente e estável.
Cada fase é projetada para sinalizar aos desenvolvedores como eles devem pensar sobre cada métrica:
- As métricas experimentais são potenciais Core Web Vitals que ainda podem estar passando 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 no estágio 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 oferecer ótimas experiências do usuário.
As Core Web Vitals estão nos seguintes estágios do ciclo de vida:
- LCP: estável
- FID: estável
- CLS: estável
- Interação com a próxima exibição (INP, na sigla em inglês): pendente
Para saber mais sobre o desenvolvimento do INP, consulte Avanço da interação para a próxima exibição.
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 físico de uma métrica, primeiro explorando o problema a ser resolvido e possivelmente iterando quais métricas anteriores não foram abordadas. Por exemplo, a INP foi desenvolvida inicialmente como uma métrica experimental para resolver os problemas de desempenho do ambiente de execução da Web de maneira mais abrangente do que a latência na primeira entrada (FID, na sigla em inglês).
A fase experimental do ciclo de vida das Core Web Vitals também tem como objetivo dar flexibilidade ao desenvolvimento de uma métrica, identificando bugs e até mesmo explorando mudanças na definição inicial. É 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 tem eficácia comprovada, ela se torna uma métrica pendente. As métricas pendentes são mantidas nessa fase por pelo menos seis meses para que o ecossistema tenha tempo de 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 a Core Web Vitals é finalizada, ela se torna uma métrica estável. Nesse momento, a métrica pode se tornar uma 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 Core Web Vitals estáveis não mudam mais de uma vez por ano. Qualquer alteração em uma Core Web Vitals é comunicada claramente na documentação oficial da métrica e no registro de alterações da métrica. As Core Web Vitals também estão incluídas em todas as avaliações.
Ponto-chave: métricas estáveis não são necessariamente permanentes. Uma métrica estável pode ser desativada e substituída por outra que resolva a área do problema com mais eficiência.
Medir e gerar relatórios sobre as Core Web Vitals
O Google acredita que as Core Web Vitals são fundamentais para todas as experiências na Web. Por isso, ela está comprometida em exibir essas métricas em todas as suas ferramentas conhecidas. As seções abaixo detalham quais ferramentas oferecem suporte às Core Web Vitals.
Ferramentas de campo para medir as Core Web Vitals
O Chrome User Experience Report coleta dados de medição anonimizados e reais para cada Core Web Vitals. Esses dados permitem que os proprietários de sites avaliem rapidamente a performance sem a necessidade de configurar manualmente a análise das páginas, além de usar ferramentas como o PageSpeed Insights e o relatório Core Web Vitals do Search Console.
| LCP | FID | CLS | |
| Chrome User Experience Report | |||
| PageSpeed Insights | |||
| Search Console (relatório de Core Web Vitals) |
Os dados do Chrome User Experience Report oferecem uma maneira rápida de avaliar o desempenho do site, mas não a telemetria detalhada por visualização de página, que muitas vezes é necessária para diagnosticar, monitorar e reagir rapidamente às regressões. Como resultado, recomendamos que os sites configurem o próprio monitoramento de usuários reais.
Medir as Core Web Vitals no JavaScript
Cada uma das Core Web Vitals pode ser medida 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
wrapper de API pequeno e pronto para produção que mede cada métrica de uma maneira que
corresponde com precisão a como as ferramentas do Google as relatam.
Com a biblioteca web-vitals, medir cada métrica é tão simples quanto chamar uma única função. Consulte a documentação para conferir detalhes completos do uso e da API:
import {onCLS, onFID, 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);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);
Depois de configurar seu site para usar a biblioteca web-vitals a fim de medir e enviar os dados das Core Web Vitals para um endpoint de análise, a próxima etapa é agregar e gerar relatórios sobre esses dados para conferir se as páginas estão atendendo aos limites recomendados para pelo menos 75% das visitas.
Embora alguns provedores de análise tenham suporte integrado para as Core Web Vitals, mesmo os que não o incluem precisam incluir recursos básicos de métricas personalizadas que permitem medir as Core Web Vitals na ferramenta.
Um exemplo é o Relatório de Métricas da Web, que permite que os proprietários de sites avaliem as Core Web Vitals usando o Google Analytics. Para orientações sobre como avaliar as Core Web Vitals usando outras ferramentas de análise, consulte Práticas recomendadas para avaliar as Core Web Vitals em campo.
Também é possível gerar relatórios sobre cada uma das Core Web Vitals sem gravar códigos
usando a Extensão do Chrome
Métricas da Web. Essa extensão
usa a biblioteca web-vitals para
avaliar cada uma dessas métricas e mostrá-las aos usuários enquanto eles navegam na Web.
Essa extensão pode ser útil para entender o desempenho de seus próprios sites, dos sites de seus concorrentes e da Web em geral.
| LCP | FID | CLS | |
|---|---|---|---|
| web-vitals (em inglês) | |||
| Extensão de Web Vitals |
Os desenvolvedores que preferem medir essas métricas diretamente usando as APIs da Web de base podem usar estes guias de métricas para ver detalhes de implementação:
Para mais orientações sobre como medir essas métricas usando serviços de análise conhecidos ou suas próprias ferramentas internas, consulte Práticas recomendadas para avaliar as Métricas da Web em campo.
Ferramentas do laboratório para medir 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 de laboratório é a melhor maneira de testar o desempenho dos recursos durante o desenvolvimento. Essa também é a melhor maneira de capturar regressões de desempenho antes que elas aconteçam.
As ferramentas abaixo podem ser usadas para medir as Core Web Vitals em um ambiente de laboratório:
| LCP | FID | CLS | |
|---|---|---|---|
| Chrome DevTools | (usar TBT) | ||
| Lighthouse | (usar TBT) |
Ferramentas como o Lighthouse, que carregam páginas em um ambiente simulado sem um usuário, não podem medir a FID porque não têm entrada do usuário. No entanto, a métrica Tempo de bloqueio total (TBT, na sigla em inglês) é mensurável por laboratório e é um excelente substituto de FID. As otimizações de desempenho que melhoram o TBT no laboratório devem melhorar a FID no campo. Para mais orientações, consulte Recomendações para melhorar suas pontuações.
Embora a medição de 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 dramáticamente com base nos recursos do dispositivo do usuário, nas condições de rede, nos outros processos que podem estar em execução no dispositivo e em como ele interage 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 o quadro completo com precisão.
Recomendações para melhorar sua pontuação
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
As Core Web Vitals são as principais métricas para entender e oferecer uma ótima experiência do usuário, mas também há outras métricas vitais.
Essas outras Métricas da Web geralmente servem como métricas complementares ou de proxy para as Core Web Vitals, ajudando a capturar uma parte maior da experiência ou diagnosticar um problema específico.
Por exemplo, Tempo até o primeiro byte (TTFB, na sigla em inglês) e Primeira exibição de conteúdo (FCP, na sigla em inglês) são aspectos vitais da experiência de carregamento e são úteis para diagnosticar problemas com LCP (tempos de resposta lentos do servidor ou recursos de bloqueio de renderização, respectivamente).
Da mesma forma, uma métrica como Tempo total de bloqueio (TBT, na sigla em inglês) é uma métrica de laboratório vital para detectar e diagnosticar possíveis problemas de interatividade que podem afetar a FID e a INP. No entanto, ele não faz parte do conjunto de Core Web Vitals, porque não é mensurável de campo e não reflete 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 as melhorias ou adições futuras sejam esperadas.
As Core Web Vitals são relevantes para todas as páginas da Web e aparecem em destaque nas ferramentas relevantes do Google. Como as mudanças nessas métricas têm um impacto amplo, os desenvolvedores precisam esperar que as definições e os limites das Core Web Vitals sejam estáveis, além do aviso prévio e de um cronograma previsível de atualizações.
As outras Métricas da Web geralmente são específicas do contexto ou da ferramenta e podem ser mais experimentais do que as Core Web Vitals. Assim, as definições e os limites podem mudar com maior frequência.
Para todas as Métricas da Web, as mudanças são documentadas neste registro de alterações público.