Os Core Web Vitals são um conjunto de métricas específicas que o Google utiliza para avaliar a experiência do usuário em páginas web. Desde 2021, eles são um fator de ranqueamento direto no Google Search. Entender e melhorá-los é essencial tanto para desempenho quanto para SEO.

Os Três Core Web Vitals

Largest Contentful Paint (LCP)

O LCP mede o desempenho de carregamento — especificamente, quando o maior elemento de conteúdo visível na viewport termina de renderizar. O Google considera o LCP bom quando ele ocorre em até 2,5 segundos a partir do carregamento da página.

Elementos comuns de LCP:

Imagens hero
Blocos de texto grandes (H1s sem imagem acima)
Imagens de fundo com conteúdo por cima

Como melhorar o LCP:

Otimize e comprima imagens hero (use o formato WebP/AVIF)
Use uma Rede de Distribuição de Conteúdo (CDN)
Pré-carregue recursos críticos com <link rel="preload">
Remova JavaScript e CSS que bloqueiam a renderização
Implemente server-side rendering ou geração estática

Cumulative Layout Shift (CLS)

O CLS mede a estabilidade visual — o quanto o layout da página se desloca inesperadamente durante o carregamento. Uma boa pontuação de CLS é 0,1 ou menos.

Causas comuns de deslocamento de layout:

Imagens sem atributos explícitos de largura e altura
Anúncios, embeds ou iframes sem espaço reservado
Conteúdo injetado dinamicamente acima do conteúdo existente
Fontes web causando FOIT (Flash of Invisible Text) ou FOUT

Como melhorar o CLS:

Sempre defina width e height em imagens e elementos de vídeo
Reserve espaço para anúncios e conteúdo dinâmico
Use font-display: optional para fontes web
Evite inserir conteúdo acima do conteúdo existente, a menos que seja acionado por interação do usuário

Interaction to Next Paint (INP)

O INP substituiu o First Input Delay (FID) como Core Web Vital em março de 2024. Ele mede a interatividade — a latência de todas as interações do usuário (cliques, toques, entrada de teclado) ao longo do ciclo de vida da página. Um bom INP é 200ms ou menos.

Como melhorar o INP:

Divida tarefas longas (tarefas que levam mais de 50ms na thread principal)
Adie JavaScript não essencial
Use web workers para computação pesada
Otimize manipuladores de eventos para que sejam concluídos rapidamente
Minimize o impacto de scripts de terceiros

Como Medir os Core Web Vitals

Dados de Campo vs. Dados de Laboratório

Os dados de campo (Monitoramento de Usuário Real) vêm de usuários reais por meio do Chrome User Experience Report (CrUX). É o que o Google usa para ranqueamento. Use o Google Search Console → relatório Core Web Vitals.

Os dados de laboratório vêm de testes controlados como Lighthouse, PageSpeed Insights ou Krokanti Audit. Os dados de laboratório são úteis para depuração, mas podem diferir dos dados de campo.

Ferramentas

Krokanti Audit: Execute uma auditoria completa para ver os três CWVs com avaliações de aprovado/reprovado e recomendações específicas
Google PageSpeed Insights: Exibe dados de laboratório e de campo
Chrome DevTools: Aba Performance para análise detalhada
Extensão Web Vitals para Chrome: Sobreposição em tempo real durante a navegação

O Impacto nos Negócios

Pesquisas mostram consistentemente que melhorar os Core Web Vitals leva a resultados mensuráveis:

Cada melhoria de 100ms no LCP se correlaciona com um aumento de ~1% na taxa de conversão (Google/Deloitte)
Sites com bom CLS tiveram 24% menos abandonos de sessão (Google)
Melhorar o INP pode reduzir as taxas de rejeição em 8 a 20% dependendo do setor

Uma Lista de Verificação Prática

Antes do seu próximo deploy, verifique:

Todas as imagens têm atributos explícitos de width e height
As imagens hero estão pré-carregadas e servidas em formatos modernos
Nenhum script bloqueando a renderização em <head> sem defer ou async
As fontes web usam font-display: swap ou optional
Nenhum deslocamento de layout inesperado ao rolar ou interagir
Todos os manipuladores de clique/toque respondem em menos de 200ms

Execute uma auditoria gratuita do seu site com o Krokanti Audit para ver suas pontuações exatas dos Core Web Vitals e obter recomendações específicas personalizadas para o seu site.