O que são Core Web Vitals? Medindo a experiência real do usuário
Os Core Web Vitals são um conjunto de métricas do Google que medem a velocidade de carregamento, a interatividade e a estabilidade visual conforme experimentadas por usuários reais.
A qualidade de uma página é difícil de capturar em um único número, então o Google definiu um conjunto focado de métricas centradas no usuário chamado Core Web Vitals. Elas medem a rapidez com que o conteúdo principal carrega, a rapidez com que a página responde à entrada e o quão estável é o layout. Elas influenciam o ranking de busca e orientam o trabalho de frontend, e o CI pode acompanhá-las por build.
As três métricas
- Largest Contentful Paint (LCP): quando o conteúdo principal aparece.
- Interaction to Next Paint (INP): quão responsiva a página parece à entrada.
- Cumulative Layout Shift (CLS): quanto o layout se desloca inesperadamente.
Por que essas três
Elas mapeiam três experiências percebidas: está carregando, consigo interagir e está estável. Juntas, capturam os momentos que os usuários mais notam, e por isso o Google as escolheu como o conjunto central.
Laboratório versus campo
Os dados de campo refletem usuários reais e são o que afeta o ranking de busca. As medições de laboratório, como as que o Lighthouse produz, são reproduzíveis e boas para detectar regressões antes do lançamento, mas são uma aproximação.
Causas comuns de vitals ruins
Imagens grandes e não otimizadas prejudicam o LCP, JavaScript pesado prejudica o INP, e imagens ou anúncios sem espaço reservado prejudicam o CLS. Muitas correções são feitas no build: otimizar assets, dividir código e reservar espaço de layout.
Core Web Vitals no CI/CD
O CI pode medir os vitals de laboratório contra um preview compilado em cada pull request e falhar o build quando uma métrica regride além de um orçamento. Detectar uma regressão de vitals no pipeline é muito mais barato do que descobri-la nos dados de campo depois que ela já afetou usuários e o ranking.
Principais conclusões
- Os Core Web Vitals medem carregamento (LCP), interatividade (INP) e estabilidade (CLS).
- Os dados de campo afetam o ranking; os dados de laboratório detectam regressões antes do lançamento.
- O CI pode usar orçamentos de vitals de laboratório como portão para detectar regressões por pull request.