Core Web Vitals 2026: Como Medir e Melhorar LCP, INP e CLS no Seu Site

Guia prático com ferramentas, scripts e ajustes reais para passar nos Core Web Vitals do Google e ganhar posições no ranking de busca.

Categoria: SEO Técnico · Por Equipe Domain Hunter · Publicado em 22/05/2026 · 13 min de leitura

O Google é direto: páginas lentas perdem posições. Desde 2021, os Core Web Vitals são fator oficial de ranqueamento, e em 2024 o FID foi substituído pelo INP (Interaction to Next Paint) — uma métrica muito mais rigorosa. Se o seu site ainda não passou nesses indicadores, este tutorial vai te mostrar, na prática, como diagnosticar e corrigir cada um deles.

O que são os Core Web Vitals

São três métricas que medem a experiência real do usuário:

A documentação oficial está em web.dev/vitals — vale guardar nos favoritos.

Passo 1 — Diagnóstico inicial

Ferramenta 1: PageSpeed Insights

Acesse pagespeed.web.dev, cole sua URL e aguarde. Você vai receber duas pontuações: Dados de campo (CrUX — usuários reais) e Dados de laboratório (Lighthouse — simulado). Os Core Web Vitals oficiais são os de campo.

Ferramenta 2: Search Console

No Search Console, vá em Experiência → Core Web Vitals. Aqui você vê quais URLs do seu site estão "Boa", "Precisa melhorar" ou "Ruim", agrupadas por padrão de problema.

Ferramenta 3: Chrome DevTools

Abra o DevTools (F12), vá em Performance Insights e grave um carregamento. A aba já destaca LCP e CLS com marcadores visuais.

Passo 2 — Corrigindo o LCP

O LCP geralmente é a imagem hero ou um bloco de texto grande acima da dobra. As correções mais impactantes:

2.1 — Pré-carregue o LCP

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

2.2 — Use formatos modernos

Converta JPG/PNG para WebP ou AVIF. Você pode usar o Squoosh do Google ou automatizar com sharp no Node.js.

2.3 — Dimensione corretamente

Sempre defina width e height explícitos. Use srcset para servir tamanhos diferentes por dispositivo:

<img src="hero-800.webp"
     srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
     sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
     width="1600" height="900" alt="..." fetchpriority="high" />

Quer um aprofundamento? Veja nosso artigo sobre como otimizar imagens para SEO e velocidade.

Passo 3 — Corrigindo o INP

O INP mede a latência da resposta a interações do usuário. As causas mais comuns:

• JavaScript pesado bloqueando a main thread. Use code splitting (dynamic imports) e web workers para processamento pesado.
• Event handlers sincronizados longos. Quebre tarefas com requestIdleCallback ou scheduler.yield().
• Re-renderizações em cascata no React. Use React.memo, useMemo e useCallback em pontos críticos.

Exemplo prático para evitar travamento ao processar lista grande:

async function processarItens(itens) {
  for (let i = 0; i < itens.length; i++) {
    processar(itens[i]);
    if (i % 50 === 0) {
      await new Promise(r => setTimeout(r, 0)); // libera a main thread
    }
  }
}

Passo 4 — Corrigindo o CLS

O CLS é o mais simples de corrigir, e o que mais frustra usuários: aquele banner que aparece atrasado e empurra todo o conteúdo. Soluções:

1. Defina dimensões em imagens, iframes e vídeos. Nunca deixe sem width e height.
2. Reserve espaço para anúncios. Use min-height nos containers de AdSense.
3. Carregue fontes com font-display: optional ou swap e pré-carregue arquivos críticos: <link rel="preload" as="font" href="/font.woff2" type="font/woff2" crossorigin>
4. Evite inserir conteúdo acima de elementos existentes a menos que seja resposta a uma ação do usuário.

Tutorial em vídeo do Google Chrome Developers

Passo 5 — Monitoramento contínuo

Performance não é "configurou e esqueceu". Configure monitoramento real (RUM) com a biblioteca oficial:

import { onCLS, onINP, onLCP } from 'web-vitals';

onCLS(metric => sendToAnalytics(metric));
onINP(metric => sendToAnalytics(metric));
onLCP(metric => sendToAnalytics(metric));

Envie essas métricas para o seu GA4 como eventos personalizados — explico como em nosso tutorial completo do GA4.

Checklist final

• ✅ Imagens em WebP/AVIF com largura e altura definidas
• ✅ LCP com fetchpriority="high" e preload
• ✅ Fontes pré-carregadas com font-display ajustado
• ✅ JavaScript dividido em chunks via dynamic imports
• ✅ Containers de anúncios com min-height
• ✅ Cache HTTP com TTL longo para assets estáticos
• ✅ Compressão Brotli ou Gzip ativada no servidor

Ao aplicar este checklist, vimos sites passarem de pontuação 38 para 92 no PageSpeed em menos de uma semana. O ganho aparece tanto em SEO quanto em conversão — usuários toleram menos do que nunca páginas lentas. Não trate Core Web Vitals como detalhe técnico: trate como vantagem competitiva.

Perguntas frequentes

Qual a diferença entre os dados de campo e os dados de laboratório no PageSpeed Insights?
Dados de campo (CrUX) vêm de usuários reais navegando no seu site e são os que oficialmente contam para o ranqueamento; dados de laboratório (Lighthouse) são uma simulação útil para testar antes de publicar, mas não refletem necessariamente a experiência real.

O que substituiu o FID nos Core Web Vitals?
O INP (Interaction to Next Paint), desde 2024 — uma métrica mais rigorosa que mede a latência de resposta a interações durante toda a visita, não só a primeira.

Dá para ter um bom LCP e ainda assim ranquear mal?
Sim. Core Web Vitals é apenas um dos muitos fatores de ranqueamento — ajuda, mas não substitui conteúdo relevante, autoridade e boa correspondência com a intenção de busca.

Tags: Core Web Vitals, Performance, SEO Técnico, LCP, INP

Ver todos os artigos · DomainHunter Pro