Resumo rápido
  • Core Web Vitals em 2026 são 3 métricas: LCP (carregamento), INP (resposta a interação) e CLS (estabilidade visual)
  • INP substituiu FID em março/2024 e é o mais difícil de passar — exige JavaScript limpo, sem plugins pesados
  • Site com vitals verde tem 12% mais cliques médios e ranqueia 1-3 posições acima em queries competitivas

Em março de 2024, o Google substituiu FID (First Input Delay) por INP (Interaction to Next Paint) como métrica oficial de responsividade. Em 2026, INP é fator de ranqueamento estabelecido e 56% dos sites brasileiros ainda estão na zona vermelha.

Esse guia mostra as 3 métricas atuais, o que mudou, e como otimizar cada uma com técnicas reais.

As 3 Core Web Vitals em 2026

Métrica O que mede Bom Ruim
LCP Carregamento do maior elemento visível < 2.5s > 4.0s
INP Resposta a interação do usuário < 200ms > 500ms
CLS Mudança visual inesperada < 0.1 > 0.25

Pra passar nos Core Web Vitals: as 3 precisam estar no verde em pelo menos 75% das visitas reais (medido via Chrome User Experience Report).

LCP — Largest Contentful Paint

O que é

Tempo até o maior elemento visível (geralmente imagem hero ou H1) aparecer pra o usuário. Não é o tempo total de carregamento — é especificamente o “ah, já vejo o conteúdo principal”.

Causas comuns de LCP ruim

  1. Imagem hero pesada (PNG/JPG > 200KB)
  2. Fonte web carregando síncrona
  3. CSS bloqueante no <head>
  4. Servidor lento (TTFB > 600ms)
  5. Hospedagem compartilhada sobrecarregada

Como otimizar

Imagem hero:
– Converte pra WebP (LiteSpeed Image Optimization no WordPress faz)
– Largura máxima = largura visível no maior breakpoint
– loading="eager" na imagem do above-the-fold (não lazy!)
– fetchpriority="high" (HTML5)

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

Fontes:
– Self-host fonts (não Google Fonts CDN direto)
– font-display: swap no CSS
– Preload da fonte principal:

<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>

CSS:
– Inline o CSS crítico (above-the-fold) no <head>
– Carrega o resto async:

<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">

INP — Interaction to Next Paint

O que é

Mede o atraso entre qualquer interação do usuário (clique, toque, tecla) e a próxima atualização visual da página. Substituiu FID porque mede o pior caso, não só o primeiro.

O que faz INP ruim

  1. JavaScript pesado que trava a thread principal
  2. Event handlers que demoram a executar
  3. Layout thrashing (recálculos de layout custosos)
  4. Plugins WordPress mal otimizados que rodam no front-end
  5. Anúncios e scripts third-party (Google Tag Manager mal configurado)

Como otimizar

Quebra JavaScript pesado:

// Ruim - bloqueia
function processaListaGrande(items) {
  items.forEach(item => operacaoPesada(item));
}

// Bom - libera a thread
async function processaListaGrande(items) {
  for (const item of items) {
    operacaoPesada(item);
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

Debounce em event listeners:

// Em vez de:
input.addEventListener('input', filtraResultados);

// Use:
let timer;
input.addEventListener('input', (e) => {
  clearTimeout(timer);
  timer = setTimeout(() => filtraResultados(e), 100);
});

Remove plugins WordPress desnecessários. Cada plugin ativo é JS extra. Faz auditoria mensal.

Defer ou async em scripts não-críticos:

<script src="analytics.js" defer></script>
<script src="chat.js" async></script>

Quer ajuda pra implementar isso no seu site? A SkylineLab faz auditoria técnica gratuita e te entrega diagnóstico em 24h com plano de ação priorizado — sem compromisso.

CLS — Cumulative Layout Shift

O que é

Mede quanto a página “pula” durante o carregamento. Aquele momento clássico onde você vai clicar num botão e ele se move porque carregou um banner é CLS alto.

Causas comuns

  1. Imagem sem width e height declarados
  2. Anúncios injetados depois do carregamento inicial
  3. Fontes web swap que mudam tamanho de texto
  4. Componentes lazy-loaded sem placeholder
  5. Carrosséis e modais mal implementados

Como otimizar

Sempre declara dimensões:

<img src="foto.webp" width="800" height="450" alt="...">

Reserva espaço pra anúncios:

.ad-banner {
  min-height: 250px; /* mesmo se o anúncio não carregar */
}

Font matching:

@font-face {
  font-family: 'Inter';
  src: url('Inter.woff2');
  size-adjust: 100%; /* CSS moderno reduz CLS de fonte */
}

CSS contain:

.card {
  contain: layout; /* impede que mudanças internas afetem layout externo */
}

Como medir Core Web Vitals do seu site

1. PageSpeed Insights (dado field + lab)

Em pagespeed.web.dev, cola sua URL. Te dá:
– Field data (real, do Chrome UX Report) — esse importa pro Google
– Lab data (Lighthouse simulado) — pra debug

2. Search Console → Experiência → Core Web Vitals

Mostra páginas do seu site agrupadas em verde/amarelo/vermelho com dados reais dos últimos 28 dias.

3. Chrome DevTools — Performance tab

Pra debug profundo de página específica. Filtra “Long Tasks” pra achar JS bloqueante.

4. web.dev/measure

Análise completa Lighthouse com sugestões priorizadas.

Quanto Core Web Vitals impacta ranqueamento em 2026

Em maio de 2026, baseado em estudos de cohort:

Não é o fator mais importante (conteúdo e backlinks pesam mais). Mas em queries competitivas onde tudo está empatado, vitals decidem.

Stack típico pra Core Web Vitals verde em WordPress

Camada Solução Custo
Hospedagem LiteSpeed (Hostinger Premium) R$ 25/mês
Cache LiteSpeed Cache plugin (grátis) R$ 0
Imagens LiteSpeed Image Optimization R$ 0 (limite mensal)
CDN Cloudflare free R$ 0
Tema Tema custom em HTML puro Grátis se faz, ou R$ 2.500+ se contrata
Plugins Mínimo (Rank Math, Wordfence, LiteSpeed) Grátis

Evita: Elementor, WPBakery, Divi, Astra com 50 extensões. Cada um derruba seus vitals.

Perguntas frequentes

Core Web Vitals é fator de ranqueamento principal?
Não. É um dos ~200 fatores. Conteúdo, intenção de busca e autoridade pesam mais. Mas em queries competitivas, ajuda a desempatar.

Vale a pena trocar de hospedagem só pelos vitals?
Se você está em compartilhada lenta (Hostgator, GoDaddy) e seu negócio depende de SEO: sim, vale. Migra pra LiteSpeed (Hostinger, Kinsta).

Mobile e desktop têm vitals diferentes?
Sim. O Google considera mobile como principal desde 2019 (mobile-first indexing). Otimiza pra mobile primeiro.

Como o INP é medido em sites que ninguém visita?
Field data precisa de tráfego real (28 dias). Sites sem visitas suficientes ficam “without enough data” no GSC — Google usa só lab data nesse caso.

Plugin de cache resolve sozinho?
Resolve 30-50%. O resto é trabalho manual: imagens, CSS crítico, plugins pesados removidos.

Checklist final

Conclusão

Em 2026, INP é o vital mais difícil de passar porque exige JS limpo. Sites WordPress lotados de plugin sofrem nessa métrica. Migrar pra tema custom em HTML puro resolve.

A SkylineLab entrega todos os projetos com vitals verdes nos 3 — é parte do escopo, não opcional. Auditoria gratuita do seu site se quiser.

Pronto pra começar?

Auditoria gratuita do seu site em 24h

Diagnóstico técnico, SEO e GEO completo. Plano de ação priorizado. Sem compromisso, sem cláusula de fidelidade.

Falar com Renan no WhatsApp →
Resposta em até 24h · Sem compromisso · 100% remoto
Renan Farinácio
Escrito por
Renan Farinácio

Founder da SkylineLab. Especialista em SEO técnico, GEO (Generative Engine Optimization) e agentes de IA. Content creator com mais de 4 milhões de horas assistidas no YouTube.

LinkedIn Instagram