Core Web Vitals em 2026: LCP, INP e CLS na prática

As três métricas que importam

• LCP (Largest Contentful Paint): tempo até o maior elemento visível aparecer. Meta: < 2,5s.
• INP (Interaction to Next Paint): latência da interação mais lenta da sessão. Meta: < 200ms.
• CLS (Cumulative Layout Shift): estabilidade visual durante a carga. Meta: < 0,1.

Essas três métricas formam o pilar dos Core Web Vitals e impactam diretamente o ranqueamento desde 2021. Mais importante: impactam conversão. Estudos do Google mostram que cada 100ms a mais de LCP reduz conversão em e-commerce entre 1% e 7%.

Como melhorar o LCP

• Sirva a imagem hero em formato moderno (AVIF/WebP) com largura correta para o viewport.
• Use fetchpriority="high" no <img> principal.
• Pré-conecte a domínios críticos (<link rel="preconnect">).
• Reduza CSS bloqueante; inline o crítico (até ~14kb).
• Use HTTP/2 ou HTTP/3 e compressão Brotli no servidor.
• Cuidado com fontes web: font-display: swap evita FOIT.

Como melhorar o INP

INP substituiu o antigo FID em 2024 e é mais rigoroso porque mede a interação mais lenta, não a primeira.

• Quebre tarefas longas de JavaScript com scheduler.yield() ou setTimeout(..., 0).
• Use Web Workers para processamento pesado fora da main thread.
• Evite handlers de input que disparam re-renders enormes em React/Vue.
• Lazy-load componentes pesados que não são visíveis na primeira interação.
• Cuidado com listeners de scroll/resize sem debounce — eles travam a thread principal.

Como melhorar o CLS

• Defina width/height em todas as imagens (browsers calculam o aspect ratio automaticamente).
• Reserve espaço para anúncios, embeds e iframes com altura mínima.
• Evite injetar conteúdo acima do já visível (banners de cookie, notificações).
• Cuidado com fontes que mudam de tamanho ao trocar para a fonte real — use size-adjust no @font-face.

Ferramentas para medir

• PageSpeed Insights: dados reais (CrUX) + simulação Lighthouse.
• Search Console > Core Web Vitals: visão agregada por URL pattern.
• web-vitals.js: biblioteca oficial para enviar métricas reais ao seu analytics.
• Chrome DevTools > Performance: profiling detalhado em desenvolvimento.

Priorização realista

Não tente otimizar tudo de uma vez. Comece pelas 10 páginas mais visitadas (geralmente 80% do tráfego). Em e-commerce, priorize PDP e categoria. Em SaaS, home, pricing e signup. Pequenos ganhos em páginas-chave geram mais impacto que grandes ganhos em páginas raramente visitadas.

Diferença entre dados de laboratório e dados de campo

PageSpeed Insights mostra dois conjuntos de números: simulação Lighthouse (laboratório) e CrUX (campo, com usuários reais). Para SEO, o que conta é o campo. Você pode ter laboratório verde e campo vermelho — geralmente porque sua audiência usa dispositivos mais antigos ou conexões mais lentas que as simulações padrão.

Anti-padrões que matam Web Vitals

Carrosséis com auto-rotate degradam INP. Pop-ups de cookie sem reserva de espaço destroem CLS. Bibliotecas de animação carregadas no head bloqueiam a renderização inicial. Antes de buscar otimizações exóticas, audite essas três fontes recorrentes — elas explicam a maioria dos problemas em sites brasileiros.