← Volver al blog
steply / blog · core-web-vitals-performance-google-2026.md
$ steply blog open core-web-vitals-performance-google-2026
▸ loading article…
✓ ready

Core Web Vitals em 2026: Como Otimizar LCP, INP e CLS para Rankear no Google

porSteply3 min de lectura

Os Core Web Vitals são o conjunto de métricas que o Google usa para medir a experiência real do usuário em um site. Em 2026, três indicadores definem o jogo: LCP (Largest Contentful Paint), INP (Interaction to Next Paint) e CLS (Cumulative Layout Shift). Sites que falham nessas métricas perdem posição, mesmo com conteúdo excelente e backlinks fortes.

Este guia mostra o que cada métrica mede, quais são os limites aceitáveis, como diagnosticar problemas e quais ações de engenharia entregam ganho real, não placebo.

O que cada Core Web Vital realmente mede

LCP (Largest Contentful Paint) mede o tempo até o maior elemento visível do viewport ser renderizado. É o "quando o usuário percebe que a página carregou". Bom: até 2.5s. Precisa melhorar: 2.5s a 4s. Ruim: acima de 4s.

INP (Interaction to Next Paint) substituiu o FID em 2024 e mede o atraso entre a interação do usuário (clique, toque, teclado) e a próxima renderização visual. É a métrica mais difícil de otimizar porque depende do thread principal estar livre. Bom: até 200ms. Precisa melhorar: 200ms a 500ms. Ruim: acima de 500ms.

CLS (Cumulative Layout Shift) mede a soma de deslocamentos inesperados de elementos durante o carregamento. Aquele banner que desloca o botão e faz você clicar errado é CLS alto. Bom: até 0.1. Precisa melhorar: 0.1 a 0.25. Ruim: acima de 0.25.

Como o Google realmente usa essas métricas

O Google avalia Core Web Vitals com base no CrUX (Chrome User Experience Report), ou seja, dados de campo coletados de usuários reais do Chrome, não dados de laboratório do Lighthouse. Isso significa que a métrica que importa é a do 75º percentil dos usuários reais nos últimos 28 dias, segmentada por dispositivo.

Para ser elegível ao boost de Page Experience, todas as três métricas precisam estar em "bom" no percentil 75. Apenas uma ruim já desqualifica a URL. Por isso é comum sites com Lighthouse score 95+ ainda terem problemas de ranqueamento: o Lighthouse roda em condição controlada, o CrUX roda no mundo real, com 3G, hardware fraco e abas pesadas.

Otimizando LCP: as 5 ações de maior impacto

1. Identifique o elemento LCP com a aba Performance do Chrome. Geralmente é uma imagem hero, vídeo ou bloco de texto grande. 2. Sirva o asset crítico cedo: preload na tag link, fetchpriority="high" na imagem LCP, e remova render-blocking CSS/JS. 3. Use formatos modernos: WebP ou AVIF para imagens, com srcset responsivo. 4. CDN agressivo: edge caching com TTL alto para assets estáticos. 5. Server response rápido: TTFB abaixo de 600ms; cache de HTML quando possível, com SSR otimizado.

INP: a métrica que mais derruba sites em 2026

INP é onde a maioria das otimizações superficiais falha. O culpado quase sempre é JavaScript pesado bloqueando o thread principal. Estratégias eficazes: code splitting agressivo, carregando só o necessário por rota; defer e async em scripts não críticos; web workers para processamento pesado fora do main thread; debounce e throttle em handlers frequentes (scroll, input); remoção de bibliotecas pesadas usadas para tarefas triviais (substituir Moment.js por date-fns ou Intl nativo, por exemplo).

Frameworks modernos como Next.js, Remix, SvelteKit e Astro nascem com práticas de minimização de JS no cliente. Migrações de stacks antigos para esses frameworks costumam entregar ganho de INP de 40-70% em poucas semanas.

CLS: causas comuns e soluções definitivas

CLS alto quase sempre vem de cinco fontes: imagens sem width/height declarados (resolvido reservando espaço no CSS ou no atributo HTML); fontes web sem font-display adequado (use swap ou optional); banners de cookies, anúncios e ofertas que aparecem após o carregamento e empurram conteúdo (reserve espaço fixo); conteúdo dinâmico injetado por A/B testing sem placeholder; animações que mudam layout em vez de usar transform e opacity (que não causam reflow).

Ferramentas que você deve usar

O kit essencial é PageSpeed Insights (combina CrUX e Lighthouse), Search Console > Core Web Vitals (visão por URL, agrupada por padrão), WebPageTest (testes reproduzíveis com waterfall detalhado), Chrome DevTools Performance (profiling em desenvolvimento) e ferramentas RUM como Vercel Analytics, Speedcurve ou Sentry Performance para monitoramento contínuo em produção.

Impacto real no negócio

Otimizar Core Web Vitals tem impacto direto em três frentes: SEO (boost no ranqueamento quando todas as métricas estão em verde), conversão (cada 100ms a menos no LCP costuma elevar conversão em 1-3% no e-commerce) e retenção (sites lentos têm bounce rate até 90% maior em mobile). Performance virou métrica de produto, não de TI.