Entenda Core Web Vitals (LCP, INP, CLS) em 2026 e como otimizá-los no Next.js para melhorar seu ranking no Google.

O que são Core Web Vitals

Core Web Vitals são métricas de experiência do usuário que o Google usa como fator de ranqueamento desde 2021. Em 2024, o FID foi substituído pelo INP, tornando a avaliação de interatividade mais precisa.

LCP — Largest Contentful Paint (meta: < 2.5s)

Mede quanto tempo leva para o maior elemento visível da página carregar. Para a maioria dos sites, é a imagem hero ou o H1. Use next/image com priority, imagens WebP/AVIF e CDN para otimizar.

INP — Interaction to Next Paint (meta: < 200ms)

Substitui o FID e mede o tempo de resposta a interações do usuário (cliques, teclado). Componentes React pesados com muita lógica no thread principal prejudicam o INP. Use useTransition e componentes leves.

CLS — Cumulative Layout Shift (meta: < 0.1)

Mede instabilidade visual — elementos que se movem enquanto a página carrega. As causas mais comuns são imagens sem dimensões definidas, fontes sem fallback e iframes. next/image e next/font resolvem as causas principais.

Como medir Core Web Vitals

Use Google Search Console (dados reais de usuários), PageSpeed Insights (lab e field data) e Lighthouse no Chrome DevTools. Dados de campo sempre prevalecem sobre dados de laboratório para ranqueamento.

Otimizando LCP no Next.js

1. Use next/image com priority na imagem hero. 2. Pré-conecte a domínios de imagens (CDN). 3. Remova JavaScript que bloqueia renderização. 4. Use Server Components para evitar waterfall de dados.

Otimizando INP no Next.js

1. Divida componentes pesados com lazy loading. 2. Use useTransition para updates não-urgentes. 3. Evite re-renders desnecessários com useMemo e useCallback. 4. Meça com React DevTools Profiler.

Otimizando CLS no Next.js

1. Sempre defina width e height em next/image. 2. Use next/font para evitar font swap. 3. Reserve espaço para banners e anúncios com aspect-ratio CSS. 4. Evite inserir conteúdo acima do fold após carregamento.

O impacto no ranqueamento

Sites com bom desempenho nos Core Web Vitals recebem um "boost" de ranqueamento. Mais importante: melhor experiência = menor bounce rate = sinal positivo para Google.

Conclusão

Core Web Vitals não são checklist técnico — são proxy de qualidade para o Google. Next.js com boas práticas entrega scores excelentes nativamente.

Core Web Vitals em 2026: O Que É e Por Que Impacta Seu Ranqueamento no Google