Core Web Vitals: Guia Prático

Por Tiago Romeu Dumont · 5 de maio de 2026 · 9 min de leitura

📌 Resposta rápida

Core Web Vitals são 3 métricas oficiais do Google que medem experiência real de usuário: LCP (carregamento — meta < 2.5s), INP (interatividade — meta < 200ms) e CLS (estabilidade visual — meta < 0.1). Desde 2021 são fator de ranking. Sites com Vitals ruins simplesmente não aparecem em buscas competitivas. Pra melhorar: hospedagem rápida + CDN + imagens AVIF/WebP + critical CSS inline + JavaScript com defer + reservar dimensão de imagens. Mede grátis em pagespeed.web.dev.

⚡ TL;DR

  • LCP < 2.5s: tempo até carregar elemento principal
  • INP < 200ms: tempo de resposta a cliques/toques (substituiu FID em 2024)
  • CLS < 0.1: estabilidade visual (sem pulos de layout)
  • Mede em: pagespeed.web.dev (lab) + Search Console (real users)
  • Top fixes LCP: CDN, AVIF/WebP, preload hero, critical CSS
  • Top fixes INP: defer JS, debounce inputs, code splitting
  • Top fixes CLS: width/height em imagens, reserve espaço pra ads
Veja nossos projetos em ação

Sites profissionais que vendem 24/7

Veja como entregamos design moderno, performance e conversão em cada projeto.

www.seunegocio.com.br
Solicite seu site agora

1. O que são Core Web Vitals

Core Web Vitals são as 3 métricas que o Google considera essenciais pra avaliar a experiência do usuário em um site. Desde junho de 2021 são fator de ranking — sites com Vitals ruins perdem posições em buscas competitivas.

Em 2024, o Google trocou FID (First Input Delay) por INP (Interaction to Next Paint), que mede toda a interação ao longo da sessão (não só a primeira). Em 2026 a mudança está consolidada e INP é a métrica oficial.

2. LCP — Largest Contentful Paint

O que mede: tempo entre o início do carregamento e o momento em que o maior elemento visível (geralmente imagem hero ou bloco de texto principal) é renderizado.

Como melhorar LCP

  1. Hospedagem rápida: server response < 200ms (use TTFB pra medir). Hospedagem barata (R$ 10/mês) responde em 800ms — péssimo.
  2. CDN: Cloudflare grátis já faz milagre. Recomendado mesmo pra sites pequenos.
  3. Imagens otimizadas: AVIF (-80%) ou WebP (-30%) vs JPG/PNG. Use <picture> com fallback.
  4. Preload da imagem hero: <link rel="preload" as="image" href="hero.webp" fetchpriority="high">
  5. Critical CSS inline: CSS acima do fold inline no <head>. Resto async.
  6. HTTP/2 ou HTTP/3: habilite no servidor (vem padrão na maioria das hospedagens em 2026).

3. INP — Interaction to Next Paint

O que mede: tempo de resposta entre uma interação (clique, tap, tecla) e a próxima renderização da tela. Substituiu FID em 2024 — INP cobre toda a sessão, não só a primeira interação.

Como melhorar INP

  1. JavaScript com defer/async: <script src="..." defer> pra não bloquear render
  2. Reduzir long tasks: tarefas > 50ms travam interação. Usa scheduler.yield() ou setTimeout(fn, 0) pra fragmentar.
  3. Debounce em inputs: evita disparar handler em cada tecla
  4. Code splitting: carrega JS por rota (não bundle único de 2MB)
  5. Eliminar handlers pesados: em onclick, onscroll — usa requestAnimationFrame ou throttle.
  6. Web Workers pra cálculos pesados

4. CLS — Cumulative Layout Shift

O que mede: soma de "pulos visuais" durante o carregamento. Aquela cena chata: você vai clicar num botão, daí carrega um banner, e seu clique acerta o anúncio. Isso é CLS ruim.

Como melhorar CLS

  1. Width e height SEMPRE em imagens: <img src="x.jpg" width="800" height="600">. Browser reserva espaço antes de carregar.
  2. Mesma coisa em vídeos e iframes: dimensões fixas
  3. Reserve espaço pra ads: CSS min-height nos slots de anúncio
  4. Web Fonts com font-display: font-display: swap + preload da fonte
  5. Não injete conteúdo acima do que o usuário já viu (banners, cookies — coloque no rodapé, não topo)

5. Como medir (lab vs field)

Existem 2 tipos de medição:

Lab (sintético — controle)

Field (usuários reais — verdade)

Importante: field é o que conta pro ranking. Lab é guia. Sites podem ter score 100 no Lighthouse e CWV ruim em field (porque seus usuários têm 4G ruim ou celular antigo).

6. Como priorizar otimizações

Se você tem 1 hora pra melhorar Vitals:

  1. Roda PageSpeed Insights nas 3-5 páginas mais visitadas (ver Search Console)
  2. Foca na pior métrica primeiro (LCP geralmente)
  3. Aplica top 3 otimizações sugeridas
  4. Re-mede em 7 dias

Se você tem 1 dia:

  1. Imagens AVIF/WebP via <picture>
  2. CDN (Cloudflare grátis)
  3. Critical CSS inline + preload da imagem hero
  4. JS com defer/async
  5. Width/height em todas imagens
"Performance não é marketing. É experiência. Site lento perde cliente — e o Google sabe."

Perguntas frequentes

Por que Core Web Vitals é fator de ranking?

Porque mede experiência real do usuário — exatamente o que Google quer entregar. Site lento, com pulos visuais e travamentos = usuário sai. Google identificou que sites com CWV bons têm bounce rate 24% menor e taxa de conversão maior.

Posso ter um site bonito e CWV ruim?

Sim, é o caso mais comum: site com 50 efeitos JS, animações pesadas, imagens 4K sem compressão = visualmente impressionante mas CWV terrível. Solução: design profissional COM otimização de performance. Não é trade-off — é capacidade.

Quanto custa pra melhorar CWV?

Depende da situação. Site moderno com problemas pontuais: 4-8h de trabalho. Site WordPress com 30 plugins desatualizados: 16-24h. Sistema legado: refator parcial, 40-80h. A Dumont Web entrega CWV verde como parte do pacote padrão.

Lighthouse score 100 garante CWV bom?

Não necessariamente. Lighthouse é lab (ambiente controlado). CWV é field (usuários reais). Pode ter Lighthouse 100 e CWV ruim porque seus usuários estão em 4G fraco. Sempre confira Search Console pra dados reais.

Cloudflare ajuda muito?

Sim. CDN gratuito reduz LCP em 30-50% pra usuários distantes do servidor. Plus: cache automático de imagens, minificação, HTTP/3. Configurar leva 30 min e tem efeito imediato.

Preciso me preocupar com mobile?

Mais que com desktop. Mobile-first indexing (Google indexa primeiro a versão mobile) + 70% do tráfego brasileiro é mobile + redes 4G/5G variáveis = CWV mobile importa MAIS que desktop pro ranking.

Site lento te custa clientes

A Dumont Web entrega Core Web Vitals verde como padrão. Performance otimizada, AVIF/WebP, critical CSS, CDN configurado.

Falar no WhatsApp

Continue lendo