Core Web Vitals 2026: LCP, INP e CLS

Seu site demora para carregar? Botoes que nao respondem ao clique? Conteudo que "pula" na tela enquanto carrega?

Esses problemas nao apenas irritam seus visitantes - eles prejudicam seu ranking no Google.

Core Web Vitals sao as metricas que o Google usa para medir a experiencia do usuario no seu site. Em 2026, entende-las e otimiza-las e essencial para qualquer estrategia de SEO.

O Que Sao Core Web Vitals?

Core Web Vitals sao tres metricas especificas que o Google usa para avaliar a experiencia real do usuario:

LCP (Largest Contentful Paint): Velocidade de carregamento
INP (Interaction to Next Paint): Capacidade de resposta
CLS (Cumulative Layout Shift): Estabilidade visual

Novidade 2024: O INP substituiu o antigo FID (First Input Delay) em marco de 2024. Se voce ainda ve referencias ao FID, estao desatualizadas.

Os Limites: O Que e "Bom" para o Google?

Cada metrica tem tres faixas de desempenho:

Metrica	Bom	Precisa Melhorar	Ruim
LCP	< 2.5 segundos	2.5s - 4.0s	> 4.0s
INP	< 200ms	200ms - 500ms	> 500ms
CLS	< 0.1	0.1 - 0.25	> 0.25

Importante: Para obter beneficio de ranking, 75% dos seus visitantes devem ter uma experiencia "Boa" em TODAS as tres metricas. E um sistema passa/nao passa - nao ha credito parcial.

Quanto Core Web Vitals Impactam o SEO?

Vamos ser diretos: Core Web Vitals sao um fator de ranking confirmado pelo Google, mas nao sao o mais importante.

O Que Sabemos

Representam aproximadamente 10-15% dos sinais de ranking
Funcionam como "desempate" entre paginas com conteudo similar
John Mueller (Google): "Core Web Vitals nao sao fatores gigantes no ranking"
Conteudo relevante ainda e primordial para SEO

Por Que Ainda Importam (Muito)

Mesmo nao sendo o fator #1, Core Web Vitals impactam diretamente suas conversoes:

Amazon: Cada 100ms de latencia custa 1% em vendas
Deloitte/Google: Melhoria de 0.1s aumenta conversoes em 8.4%
Taxa de rejeicao: Sites com 2s de carregamento tem 9% de rejeicao; com 5s, salta para 38%

Ou seja: mesmo que o impacto no ranking seja moderado, o impacto no seu faturamento pode ser enorme.

LCP: Largest Contentful Paint

O LCP mede quanto tempo leva para o maior elemento visivel carregar. Geralmente e a imagem hero, um video ou um bloco de texto grande.

Meta: Menos de 2.5 Segundos

Principais Causas de LCP Ruim

Imagens grandes e nao otimizadas
Servidor lento
CSS e JavaScript bloqueando renderizacao
Recursos de terceiros lentos

Como Otimizar o LCP

1. Otimize a imagem principal (LCP element)

Use formatos modernos: WebP ou AVIF
NAO use lazy loading na imagem LCP (acima da dobra)
Use loading="eager" (padrao)
Adicione fetchpriority="high" na imagem hero
Use <link rel="preload"> para a imagem principal

Exemplo de codigo otimizado:

<!-- No <head> -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

<!-- No <body> -->
<img src="hero.webp"
     width="1200"
     height="600"
     alt="Descricao"
     fetchpriority="high">

2. Use lazy loading apenas abaixo da dobra

Lazy loading nas imagens que NAO sao o elemento LCP libera banda para carregar a principal mais rapido:

<img src="imagem-abaixo.webp" loading="lazy" alt="...">

3. Otimize servidor e entrega

Use uma CDN (Cloudflare, CloudFront, etc.)
Ative compressao (gzip ou brotli)
Configure cache adequado
Use HTTP/2 ou HTTP/3

4. Otimize CSS e JavaScript

Minifique CSS e JS
CSS critico inline no <head>
Use defer ou async em scripts nao criticos
Remova codigo nao utilizado

INP: Interaction to Next Paint

O INP mede quanto tempo o site demora para responder as interacoes do usuario - cliques, toques, digitacao.

Diferenca do antigo FID: O FID media apenas a PRIMEIRA interacao. O INP mede TODAS as interacoes durante a visita, dando uma visao muito mais completa.

Meta: Menos de 200 Milissegundos

Principais Causas de INP Ruim

JavaScript pesado bloqueando a thread principal
Event handlers lentos
DOM muito grande
Tarefas longas (Long Tasks)

Como Otimizar o INP

1. Divida tarefas longas

JavaScript que executa por mais de 50ms bloqueia interacoes. Quebre em partes menores:

// Ruim: tarefa longa
function processarTudo() {
  // 500ms de processamento
}

// Bom: dividido com yield
async function processarEmPartes() {
  for (const item of items) {
    processarItem(item);
    await scheduler.yield(); // Permite outras interacoes
  }
}

2. Use Web Workers para processamento pesado

Mova calculos complexos para um Worker, liberando a thread principal:

const worker = new Worker('processamento.js');
worker.postMessage(dados);
worker.onmessage = (e) => atualizarUI(e.data);

3. Otimize event handlers

Use debounce/throttle em eventos frequentes (scroll, resize)
Evite trabalho pesado em callbacks de clique
Adie operacoes nao criticas com requestIdleCallback

4. Reduza o tamanho do DOM

Menos elementos = renderizacao mais rapida
Virtualize listas longas (mostre apenas itens visiveis)
Evite divs desnecessarios

CLS: Cumulative Layout Shift

O CLS mede a estabilidade visual - quanto o conteudo "pula" na tela durante o carregamento.

Voce ja tentou clicar em um botao e, no ultimo segundo, um banner apareceu e voce clicou em outra coisa? Isso e layout shift.

Meta: Menos de 0.1

Principais Causas de CLS Ruim

Imagens e videos sem dimensoes definidas
Anuncios que carregam depois
Fontes que trocam (FOUT)
Conteudo injetado dinamicamente

Como Otimizar o CLS

1. SEMPRE defina dimensoes em imagens e videos

<!-- Bom: dimensoes definidas -->
<img src="foto.jpg" width="800" height="600" alt="...">

<!-- Ou com CSS aspect-ratio -->
<style>
.img-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}
</style>

2. Reserve espaco para anuncios

<div class="ad-container" style="min-height: 250px;">
  <!-- Anuncio carrega aqui -->
</div>

3. Otimize carregamento de fontes

@font-face {
  font-family: 'MinhaFonte';
  src: url('fonte.woff2') format('woff2');
  font-display: swap; /* ou optional */
}

E faca preload das fontes criticas:

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

4. Evite inserir conteudo acima do existente

Banners devem ter espaco reservado
Use skeleton screens enquanto carrega
Conteudo dinamico deve ir no final ou em espaco pre-reservado

Caso real: Um site de noticias reduziu CLS de 0.38 para 0.08 apenas reservando espacos para anuncios e artigos relacionados.

Ferramentas para Medir Core Web Vitals

Dados de Campo (Usuarios Reais)

Sao os dados que o Google usa para ranking:

Google Search Console: Relatorio de Core Web Vitals
PageSpeed Insights: Secao "Dados de campo"
Chrome UX Report (CrUX): Dados agregados de usuarios Chrome

Dados de Laboratorio (Testes)

Para diagnostico e testes antes de publicar:

PageSpeed Insights: Analise completa com sugestoes
Lighthouse: Integrado ao Chrome DevTools (F12 > Lighthouse)
WebPageTest: Testes avancados com multiplas localizacoes
GTmetrix: Analise detalhada com historico

Monitoramento Continuo

Web Vitals Extension (Chrome): Medicao em tempo real
DebugBear, SpeedCurve: Monitoramento profissional

WordPress: O Problema dos 46%

Segundo dados do HTTPArchive (Novembro 2025), apenas 46,28% dos sites WordPress passam nos Core Web Vitals. Compare:

Plataforma	% Sites Passando
Duda	84,87%
Wix	74,86%
Squarespace	70,39%
Drupal	63,27%
WordPress	46,28%

Por que WordPress tem problemas:

Excesso de plugins
Temas pesados e mal otimizados
Hosting compartilhado lento
Falta de otimizacao de imagens

Solucoes para WordPress:

Use plugins de cache (WP Rocket, LiteSpeed Cache)
Otimize imagens (ShortPixel, Imagify)
Escolha tema leve (GeneratePress, Astra)
Use hosting de qualidade (Cloudways, Kinsta)
Reduza numero de plugins

Checklist de Core Web Vitals

LCP (Velocidade)

[ ] Imagem LCP em formato WebP/AVIF
[ ] Preload na imagem principal
[ ] fetchpriority="high" na imagem hero
[ ] Lazy loading apenas abaixo da dobra
[ ] CDN configurada
[ ] CSS e JS minificados
[ ] CSS critico inline

INP (Interatividade)

[ ] Sem tarefas longas (>50ms)
[ ] JavaScript otimizado
[ ] Event handlers com debounce
[ ] DOM enxuto
[ ] Scripts nao criticos com defer

CLS (Estabilidade)

[ ] Todas imagens com width/height
[ ] Espaco reservado para anuncios
[ ] font-display: swap nas fontes
[ ] Preload de fontes criticas
[ ] Sem conteudo inserido acima do viewport

Proximo Passo: Auditoria Gratuita

Nao sabe como esta a velocidade do seu site? A Siena Digital oferece uma auditoria gratuita de Core Web Vitals que inclui:

Analise das tres metricas (LCP, INP, CLS)
Identificacao dos problemas especificos
Recomendacoes priorizadas de otimizacao
Estimativa de impacto nas conversoes

Solicite sua auditoria gratuita e descubra como acelerar seu site.

Fontes

Google Search Central - Core Web Vitals
web.dev - Web Vitals
web.dev - Optimize LCP
web.dev - Optimize CLS
White Label Coders - Core Web Vitals 2026
DebugBear - CWV Ranking Factor
Search Engine Journal - CWV por Plataforma
HTTPArchive - Novembro 2025

Core Web Vitals 2026: Guia Completo para Sites Rapidos