Core Web Vitals: LCP, INP, CLS Explicados

Core Web Vitals: O Que o Google Mede

O Google usa três métricas para julgar a experiência do usuário na sua página. Elas afetam rankings de busca e, mais importante, afetam se os usuários ficam na página ou saem.

As Três Métricas

LCP — Largest Contentful Paint

Quanto tempo até o maior elemento visível (imagem hero, título, vídeo) ser completamente renderizado.

Como melhorar LCP:

<!-- Preload da imagem LCP -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

<!-- Use formatos modernos -->
<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero" width="1200" height="630" fetchpriority="high" />
</picture>

• Sirva imagens em formato WebP/AVIF (40-60% menores)
• Use fetchpriority="high" no elemento LCP
• Não faça lazy-load de imagens above-the-fold
• Use CDN para assets estáticos
• Minimize CSS e JS que bloqueiam renderização

INP — Interaction to Next Paint

Mede quão rápido a página responde a interações do usuário (cliques, toques, teclas). INP substituiu FID em março 2024.

Como melhorar INP:

// Quebre tarefas longas
// RUIM: bloqueia main thread por 200ms
function processData(items) {
  items.forEach(item => heavyComputation(item));
}

// BOM: ceda ao browser entre chunks
async function processData(items) {
  for (let i = 0; i < items.length; i++) {
    heavyComputation(items[i]);
    if (i % 100 === 0) {
      await new Promise(r => setTimeout(r, 0)); // yield
    }
  }
}

• Mantenha tarefas JavaScript abaixo de 50ms
• Use requestAnimationFrame para atualizações visuais
• Debounce interações rápidas (scroll, resize)
• Mova computação pesada para Web Workers

CLS — Cumulative Layout Shift

Mede mudanças inesperadas de layout — quando elementos se movem conforme a página carrega. Os piores ofensores:

• Imagens sem dimensões
• Ads/embeds injetados dinamicamente
• Web fonts causando FOUT
• Conteúdo dinâmico inserido acima do conteúdo existente

Como melhorar CLS:

<!-- Sempre defina width e height nas imagens -->
<img src="foto.jpg" width="800" height="600" alt="Foto" />

<!-- Reserve espaço para anúncios -->
<div style="min-height: 250px;"><!-- slot de ad --></div>

<!-- Preload fonts para prevenir layout shift -->
<link rel="preload" as="font" href="/fonts/inter.woff2"
      type="font/woff2" crossorigin />

Ferramentas de Medição

Otimize suas imagens: Conversor de Imagem — converta para WebP/AVIF para arquivos menores e melhor LCP.