Core Web Vitals: LCP, INP e CLS na Prática

Os Core Web Vitals são três métricas definidas pelo Google para medir a qualidade real da experiência do usuário. Fazem parte do Page Experience signal e influenciam o ranking no Search desde 2021.

Não confunda "boas métricas no Lighthouse" com "bons Core Web Vitals". O Lighthouse roda em condições de laboratório controladas. Os CWV que o Google usa para ranking vêm do Chrome User Experience Report (CrUX) — dados reais de usuários reais, em dispositivos e conexões reais.

As três métricas medem dimensões diferentes da experiência:

LCP — Largest Contentful Paint

LCP mede quando o maior elemento de conteúdo visível na viewport terminou de renderizar.

• ≤ 2.5s — Bom

  75% dos usuários precisam estar nessa faixa para o site ter CWV verde no Search Console.

• 2.5s – 4.0s — Precisa melhorar

  Experiência degradada. Usuários mobile em conexões lentas provavelmente estão nessa faixa.

• > 4.0s — Ruim

  Impacto negativo em ranking, bounce rate e conversão. Ação urgente necessária.

O que move o LCP

<!-- ✅ Descoberta imediata — está no HTML -->
<img src="/hero.jpg" fetchpriority="high" alt="Hero" />
 
<!-- ❌ Descoberta tardia — só aparece após JS executar -->
<div id="hero"></div>
<script>document.getElementById('hero').innerHTML = '<img src="/hero.jpg">'</script>

<img
  src="/hero.webp"
  fetchpriority="high"
  loading="eager"
  width="1200"
  height="600"
  alt="Hero"
/>

<img
  src="/hero-800.webp"
  srcset="/hero-400.webp 400w, /hero-800.webp 800w, /hero-1200.webp 1200w"
  sizes="(max-width: 768px) 100vw, 800px"
  fetchpriority="high"
  alt="Hero"
/>

INP — Interaction to Next Paint

INP mede a responsividade da página — quanto tempo entre uma interação do usuário e o próximo frame pintado refletindo essa interação. Em março de 2024 substituiu o FID como Core Web Vital. A diferença fundamental: o FID media apenas o delay do primeiro input. O INP mede todas as interações e reporta o percentil 98.

• ≤ 200ms — Bom

  Interação percebida como imediata. O usuário não sente latência.

• 200ms – 500ms — Precisa melhorar

  Latência perceptível. Usuários em dispositivos lentos ou com muitas interações simultâneas sentem a demora.

• > 500ms — Ruim

  Página percebida como travada. Alta correlação com abandono de formulários e cliques duplos acidentais.

Como o INP é calculado

Cada interação tem três fases que somadas formam o INP:

O que causa INP alto

// ❌ Long task — bloqueia o main thread
function processLargeList(items) {
  return items.map(item => heavyComputation(item));
}
 
// ✅ Yield para o browser entre chunks
async function processLargeList(items) {
  const results = [];
  for (const item of items) {
    results.push(heavyComputation(item));
    await scheduler.yield(); // deixa o browser respirar
  }
  return results;
}

// ❌ Recalcula tudo a cada keyup
input.addEventListener('keyup', () => {
  const results = filterLargeList(input.value);
  renderResults(results); // pode ser 100ms+
});
 
// ✅ useTransition para updates não-urgentes
const [isPending, startTransition] = useTransition();
setQuery(e.target.value); // urgente — atualiza o input imediatamente
startTransition(() => {
  setResults(filterLargeList(e.target.value)); // pode ser interrompido
});

CLS — Cumulative Layout Shift

CLS mede a estabilidade visual — quanto o conteúdo "pula" enquanto carrega. Um botão que se move quando o usuário está prestes a clicar, texto que se desloca quando uma imagem carrega sem dimensão definida.

• ≤ 0.1 — Bom

  Layout estável. Usuário não percebe movimento inesperado de conteúdo.

• 0.1 – 0.25 — Precisa melhorar

  Shifts perceptíveis. Botões e links se movem o suficiente para causar cliques errados.

• > 0.25 — Ruim

  Layout instável. Alta probabilidade de cliques acidentais e experiência frustrante.

Causas mais comuns

• Imagens sem dimensão definida

  O browser não sabe o tamanho antes de baixar. Quando a imagem carrega, empurra todo o conteúdo abaixo. Fix: sempre defina width e height — o browser calcula o aspect-ratio automaticamente e reserva o espaço.

• Anúncios e embeds sem espaço reservado

  Slots de anúncios que aparecem do nada são os maiores contribuintes de CLS em produção. Reserve o espaço com min-height antes do anúncio carregar.

• Fontes web causando FOUT

  Quando a fonte web substitui o fallback, o tamanho do texto pode mudar e causar shift. Use size-adjust no font-face do fallback para aproximar as métricas tipográficas.

• Conteúdo dinâmico acima de conteúdo existente

  Banners de cookies, toasts e notificações que aparecem no topo empurram conteúdo para baixo. Use posição fixa ou reserve o espaço antecipadamente.

• Animações nas propriedades erradas

  Animar top, left, margin ou height causa reflow e pode gerar CLS. Use transform: translate() — não afeta o layout, roda só no compositor.

Teste seus valores

Agora que você conhece as três métricas e seus thresholds, simule os valores reais do seu site. Arraste cada slider e veja instantaneamente o diagnóstico — com os mesmos critérios que o Google usa para Page Experience.

Como debugar Core Web Vitals

Identificou um problema no checker acima? Use essas ferramentas para encontrar a causa raiz:

import { onLCP, onINP, onCLS } from 'web-vitals/attribution';
 
onLCP(({ value, attribution }) => {
  // attribution.element: qual elemento é o LCP
  // attribution.url: URL do recurso (imagem)
  console.log('LCP:', value, attribution.element);
});
 
onINP(({ value, attribution }) => {
  // attribution.eventTarget: o que o usuário clicou
  // attribution.processingDuration: tempo do handler
  console.log('INP:', value, attribution.eventTarget);
});
 
onCLS(({ value, attribution }) => {
  // attribution.largestShiftTarget: o elemento que causou o shift
  console.log('CLS:', value, attribution.largestShiftTarget);
});

No próximo artigo, exploramos Entrega & Rendering — CDN, estratégias de render (SSR, SSG, ISR, Streaming), lazy loading, resource hints e compressão.