O que são Core Web Vitals e por que importam

Os Core Web Vitals (CWV) são um conjunto de métricas de experiência do utilizador definidas pelo Google que medem a performance real de um website. Desde 2021, são um fator de ranking no Google, e em 2026 o seu peso continua a aumentar, especialmente em pesquisas mobile.

As três métricas atuais são:

Métrica

O que mede

Bom

Necessita melhorar

Fraco

LCP (Largest Contentful Paint)	Velocidade de carregamento do conteúdo principal	≤ 2,5s	2,5s — 4s	> 4s
INP (Interaction to Next Paint)	Responsividade a interações do utilizador	≤ 200ms	200ms — 500ms	> 500ms
CLS (Cumulative Layout Shift)	Estabilidade visual (saltos de layout)	≤ 0,1	0,1 — 0,25	> 0,25

Nota: O FID (First Input Delay) foi substituído pelo INP (Interaction to Next Paint) em março de 2024. O INP mede a latência de todas as interações, não apenas a primeira, sendo uma métrica mais representativa.

Como medir Core Web Vitals

Ferramentas de campo (dados reais)

Medem a experiência de utilizadores reais no seu site:

Google Search Console: Relatório Core Web Vitals com dados reais por página
PageSpeed Insights: Dados do CrUX (Chrome User Experience Report) + dados de laboratório
Chrome UX Report: Dataset público com dados de performance de milhões de sites
web-vitals (biblioteca JS): Integre medição no seu site e envie para analytics

Ferramentas de laboratório (dados sintéticos)

Medem em condições controladas:

Lighthouse (DevTools do Chrome): Análise completa com sugestões
WebPageTest: Teste de performance detalhado com waterfall
GTmetrix: Relatório visual de performance

Importante: Os dados de laboratório podem diferir dos dados de campo. Um site pode ter bom LCP no Lighthouse (máquina rápida, boa conexão) mas mau LCP no campo (utilizadores com móveis antigos, 4G lento).

LCP: como melhorar a velocidade de carregamento

O LCP mede o tempo até o maior elemento visível (imagem, vídeo, bloco de texto) ser renderizado. É a métrica com maior impacto percecionado pelo utilizador.

Causas comuns de LCP fraco

Imagens grandes não otimizadas

Servidor lento (TTFB elevado)

CSS e JavaScript bloqueantes

Fontes web com flash (FOIT/FOUT)

Client-side rendering (SPA sem SSR)

Otimizações de imagem

As imagens são responsáveis por ~70% dos problemas de LCP:

Formatos modernos:

Use WebP ou AVIF em vez de JPEG/PNG
WebP: 25-35% menor que JPEG com qualidade equivalente
AVIF: 50% menor que JPEG (suporte crescente em 2026)

Dimensionamento:

Nunca sirva imagens maiores do que o necessário
Use srcset e sizes para imagens responsivas
Defina width e height explícitos para evitar CLS

Carregamento:

loading="lazy" em imagens abaixo do fold
fetchpriority="high" na imagem LCP (hero image)
Preload da imagem LCP:

Otimizações em Next.js

Se usa Next.js (como muitos projetos Zavo), aproveite as otimizações integradas:

next/image:

Otimização automática de imagens (WebP, redimensionamento, lazy loading)
priority prop na imagem hero para preload automático
placeholder="blur" para melhor experiência percebida

Exemplo: `jsx

src="/hero-image.jpg"

alt="Descrição"

width={1200}

height={600}

priority

placeholder="blur"

` Server-Side Rendering (SSR) / Static Generation:

Use getStaticProps ou Server Components para gerar HTML no servidor
Páginas estáticas (SSG) têm LCP excelente
ISR (Incremental Static Regeneration) combina performance com conteúdo dinâmico

Otimizações de servidor

CDN: Distribua conteúdo estático via CDN (Cloudflare, Vercel Edge)
Compressão: Ative Brotli (melhor que Gzip) no servidor
HTTP/2 ou HTTP/3: Multiplexação de requests
Cache headers: Cache-Control agressivo para assets estáticos

INP: como melhorar a responsividade

O INP mede quanto tempo demora entre o utilizador interagir (clique, toque, tecla) e a próxima atualização visual.

Causas comuns de INP fraco

JavaScript pesado no thread principal

Event handlers lentos

Layouts complexos que demoram a recalcular

Third-party scripts (analytics, chat, anúncios)

Otimizações práticas

Reduzir JavaScript:

Code splitting: carregar apenas o JS necessário para cada página
Dynamic imports: next/dynamic para componentes pesados
Tree shaking: eliminar código não utilizado

Delegar ao browser:

Use CSS para animações (em vez de JS)
Prefira requestAnimationFrame para atualizações visuais
Use Web Workers para processamento pesado

Third-party scripts:

Carregue scripts de terceiros com async ou defer
Use next/script com strategy="lazyOnload" para scripts não críticos
Considere usar Partytown para mover analytics para um Web Worker

CLS: como melhorar a estabilidade visual

O CLS mede os saltos inesperados de layout — quando elementos se movem na página enquanto o utilizador está a ler ou interagir.

Causas comuns de CLS elevado

Imagens sem dimensões definidas

Anúncios e banners que empurram conteúdo

Fontes web que causam flash de texto

Conteúdo inserido dinamicamente acima do conteúdo existente

Iframes sem dimensões (mapas, vídeos embed)

Correções específicas

Imagens e vídeos:

Defina sempre width e height (ou use aspect-ratio em CSS)
Use o componente next/image que faz isto automaticamente
Reserve espaço para imagens com placeholder

Fontes web:

Use font-display: swap para evitar texto invisível
Preload das fontes críticas:
Considere font-display: optional para fontes menos importantes
Em Next.js, use next/font para otimização automática

Conteúdo dinâmico:

Reserve espaço para banners e anúncios com min-height
Insira conteúdo dinâmico abaixo do viewport ou com transições suaves
Evite inserir barras de cookies/RGPD que empurrem o conteúdo

Iframes:

Defina width e height no iframe
Use lazy loading para iframes abaixo do fold

Monitorização contínua

A performance não é algo que se otimiza uma vez e se esquece. Mudanças no conteúdo, novos features e atualizações de dependências podem introduzir regressões.

Estratégia de monitorização

Semanal: Verificar relatório CWV no Search Console

Por deploy: Integrar Lighthouse CI no pipeline de deployment

Mensal: Análise competitiva de performance com PageSpeed Insights

Contínuo: web-vitals library a enviar dados para analytics

Para uma análise competitiva abrangente que combine performance, SEO e posicionamento de mercado, o BenchSpy monitoriza não só os seus Core Web Vitals mas também os dos seus concorrentes, identificando oportunidades de diferenciação.

Para uma checklist de SEO técnico mais abrangente, consulte o nosso artigo sobre SEO técnico.

Quer saber como se compara com a concorrência em performance e SEO? O BenchSpy analisa tudo — Core Web Vitals, rankings e oportunidades de melhoria.

Core Web Vitals: Como Melhorar LCP, FID e CLS em 2026