O que São Core Web Vitals: LCP, INP e CLS Explicados

Core Web Vitals são as três métricas que o Google definiu como indicadores centrais de experiência de página. São medidas objetivas de como os usuários percebem a performance de uma página na web.

Desde 2021, fazem parte dos fatores de ranking do Google.

Por que o Google criou as Core Web Vitals

Anteriormente, performance era medida de formas inconsistentes - cada ferramenta usava métricas diferentes. O Google criou as Core Web Vitals para padronizar: estas três métricas representam os aspectos de performance que mais afetam a experiência do usuário.

O projeto é mantido pelo time da Chrome sob o nome “Web Vitals”.

LCP - Largest Contentful Paint

O que mede: quanto tempo até o maior elemento visível na janela do usuário ser renderizado.

Por que importa: o maior elemento costuma ser o conteúdo principal da página - a imagem hero, o título em destaque ou o bloco de texto central. Quando esse elemento carrega, o usuário percebe que a página está pronta.

Metas:

• Bom: abaixo de 2,5 segundos
• Precisa melhorar: 2,5s a 4s
• Ruim: acima de 4 segundos

O que costuma ser o “maior elemento”:

• Imagem hero ou banner principal
• Vídeo (thumbnail)
• Bloco de texto grande em fundo colorido
• Imagem destacada em artigo

Causa mais comum de LCP ruim: imagem hero pesada, sem compressão e sem precarregamento.

INP - Interaction to Next Paint

O que mede: o tempo de resposta da página a interações do usuário - cliques, toques, teclado.

Por que importa: uma página pode carregar rápido mas responder lentamente quando o usuário tenta interagir. INP mede essa responsividade ao longo de toda a sessão (não só na primeira interação, como fazia o FID que ele substituiu em março de 2024).

Metas:

• Bom: abaixo de 200ms
• Precisa melhorar: 200ms a 500ms
• Ruim: acima de 500ms

Como INP é calculado: mede todas as interações durante a visita e reporta a pior (ou próxima da pior). Por isso, é mais difícil de otimizar que o FID.

Causa mais comum de INP ruim: JavaScript pesado bloqueando a thread principal do navegador, especialmente scripts de terceiros.

CLS - Cumulative Layout Shift

O que mede: a soma de todos os “pulos” de layout que acontecem durante o carregamento e uso da página.

Por que importa: você já tentou clicar em um botão e um anúncio carregou em cima e você clicou no lugar errado? Isso é CLS alto. É frustrante e gera cliques acidentais.

Metas:

• Bom: abaixo de 0.1
• Precisa melhorar: 0.1 a 0.25
• Ruim: acima de 0.25

O CLS é uma pontuação adimensional (não em segundos). Um shift de 0.1 significa que 10% da área da janela mudou de posição.

Causas mais comuns de CLS:

• Imagens sem atributos width e height definidos
• Anúncios e embeds inseridos dinamicamente sem espaço reservado
• Fontes web causando FOUT (Flash of Unstyled Text)
• Conteúdo inserido por JavaScript após o carregamento inicial

Como verificar as Core Web Vitals do seu site

Google PageSpeed Insights (pagespeed.web.dev): insira a URL, escolha “Mobile” e veja os valores. Mostra dados de laboratório e dados de campo (quando disponíveis).

Google Search Console: seção “Experiência da página” > “Core Web Vitals”. Mostra dados de usuários reais do Chrome, agrupados por URL. Mais confiável para decisões de SEO.

Chrome DevTools: F12 > Lighthouse > rodar auditoria de performance.

Por que as métricas se complementam

LCP mede a chegada do conteúdo principal, INP mede a resposta ao clique e CLS mede a estabilidade do layout. Uma página pode carregar em um segundo e ainda parecer travada se o JavaScript bloqueia o botão. Pode parecer rápida e irritar se os elementos mudam de lugar durante a leitura. O Google avalia as três juntas porque a experiência do usuário não se resume a uma dimensão. O guia completo de performance mostra como transformar os números em um plano de ação.

Como priorizar a otimização

Na prática, comece pelo LCP. É a métrica que o visitante percebe primeiro e costuma ter as correções mais objetivas: comprimir imagens, usar formatos modernos, servir o conteúdo por CDN e evitar fontes bloqueantes. Depois, ataque o INP, quase sempre ligado a scripts de terceiros que travam a thread principal. O CLS fica por último porque costuma ser resolvido com atributos de tamanho e espaço reservado.

Uma regra ajuda a não perder tempo: meça antes, corrija uma coisa, meça de novo. Otimizar no escuro gera retrabalho. Também vale lembrar que o Google usa dados de campo, não apenas o score do PageSpeed. Veja Core Web Vitals e SEO para entender como as métricas entram no ranqueamento.

Core Web Vitals no mobile brasileiro

A maior parte do público de pequenas empresas acessa o site pelo celular, em aparelhos intermediários e conexão 4G. Isso significa que LCP e INP tendem a piorar muito em relação ao desktop. Testar apenas no computador esconde o problema real. Antes de aprovar um site, abra no seu próprio celular, use uma conexão móvel e verifique se a página demora a mostrar o conteúdo principal, se os botões respondem na hora e se nada pula na tela.

O que não resolve

Alguns truques melhoram o score sem melhorar a experiência: esconder conteúdo até o usuário rolar, carregar tudo com lazy loading, transformar texto em imagem ou remover elementos que o cliente usa. Essas práticas podem até enganar a medição de laboratório, mas não enganam o usuário nem os dados de campo. A correção precisa ser real.

Fontes e referências

• web.dev: Web Vitals: visão geral das métricas e metas.
• web.dev: Largest Contentful Paint (LCP): como medir e melhorar o LCP.
• web.dev: Interaction to Next Paint (INP): como medir e melhorar o INP.
• web.dev: Cumulative Layout Shift (CLS): como medir e reduzir o CLS.
• Google Search Essentials: requisitos e diretrizes de indexação.

FAQ

Core Web Vitals são os únicos fatores de performance que o Google usa?

Não. O Google também considera TTFB, FCP (First Contentful Paint) e outros sinais. As Core Web Vitals são as métricas “principais” que o Google declarou usar em seu algoritmo de ranking.

Como o Google coleta os dados de Core Web Vitals?

Através do Chrome UX Report (CrUX), que coleta dados anonimizados de usuários reais do Chrome (com opt-in). Por isso, páginas com pouco tráfego podem não ter dados de campo - o Google usa dados de laboratório nesses casos.

Diferença entre dados de laboratório e dados de campo?

Dados de laboratório são medições em ambiente controlado (simulação no PageSpeed). Dados de campo são de usuários reais. Para SEO, o Google usa dados de campo. Os dois podem divergir - especialmente se seu público usa dispositivos muito diferentes dos usados na simulação.

Se meu site tem score 50 no mobile e 90 no desktop, qual o Google usa?

O Google usa dados de campo mobile para mobile-first indexing, que é o padrão atual. Score baixo no mobile é o problema mais urgente a resolver.