Renan MesquitaConsultor SEO
SEO Técnico

Core Web Vitals: guia completo para otimizar e ranquear

Por Renan Mesquita··13 min de leitura

Core Web Vitals são as três métricas que o Google usa oficialmente para avaliar a experiência do usuário em um site — e uma delas entrou em 2024 no lugar da antiga FID. Sites que passam nas três Core Web Vitals têm vantagem real em rankings, principalmente em buscas competitivas.

Este guia explica o que são, como medir, como diagnosticar problemas e quais otimizações geram o maior impacto.

O que são Core Web Vitals?

Core Web Vitals são três métricas específicas de performance web que o Google considera essenciais para experiência do usuário:

  1. LCP (Largest Contentful Paint) — quanto tempo leva para o maior elemento visível carregar.
  2. INP (Interaction to Next Paint) — quanto tempo leva para a página responder a uma interação do usuário. Substituiu o FID em março/2024.
  3. CLS (Cumulative Layout Shift) — o quanto os elementos da página "pulam" enquanto a página carrega.

Cada uma tem três faixas:

  • Boa ✅ — você passou.
  • Precisa de melhoria ⚠️ — atenção.
  • Ruim ❌ — você está perdendo rankings.

Thresholds oficiais (2026)

| Métrica | Boa | Precisa melhorar | Ruim | |---------|-----|------------------|------| | LCP | ≤ 2.5s | 2.5s - 4.0s | > 4.0s | | INP | ≤ 200ms | 200ms - 500ms | > 500ms | | CLS | ≤ 0.1 | 0.1 - 0.25 | > 0.25 |

Por que Core Web Vitals importam?

Ranking factor confirmado. O Google afirmou oficialmente em 2021 que CWV é fator de ranking. Em 2024, a confirmação veio com a inclusão do INP.

Mobile-first indexing. Como o Google usa a versão mobile do site para indexação, uma performance ruim em celular prejudica rankings em todos os dispositivos.

UX direto em conversão. Pesquisa do Google em 2023 mostrou que sites que passam em CWV têm taxa de conversão até 24% maior que concorrentes que não passam.

AI Overview e fontes. Páginas lentas são menos citadas pelo AI Overview — o Google prefere fontes com boa experiência técnica.

Como medir Core Web Vitals

Existem dois tipos de dados:

1. Dados de laboratório (Lab data)

Simulados por ferramentas. Úteis para debug mas não refletem perfeitamente o usuário real.

Ferramentas:

  • PageSpeed Insights — página por página, grátis, essencial.
  • Lighthouse (DevTools do Chrome) — para debug detalhado.
  • WebPageTest — análise profunda com waterfalls e filmstrips.

2. Dados reais (Field data / RUM)

Coletados de usuários reais visitando seu site. É esse dado que o Google usa para ranqueamento.

Ferramentas:

  • Chrome User Experience Report (CrUX) — dados reais agregados do Chrome, consultáveis via API ou BigQuery.
  • PageSpeed Insights — mostra CrUX na seção "Discover what your real users are experiencing".
  • Google Search Console — seção "Core Web Vitals" com dados agregados por URL.

Regra prática: otimize para o dado REAL (CrUX), não só para o laboratório. É comum ter 100 no Lighthouse e ainda falhar no CrUX.

LCP: otimizando o Largest Contentful Paint

LCP mede o tempo até o maior elemento acima da dobra ser pintado. Geralmente é a imagem hero ou um bloco de texto grande.

Causas mais comuns de LCP ruim

  1. Imagens grandes e não otimizadas — 70% dos casos.
  2. CSS e JS render-blocking — scripts que impedem o navegador de renderizar.
  3. Fontes web carregando lentamente — Google Fonts sem preload.
  4. Server lento — TTFB (Time to First Byte) alto.
  5. Cache ausente ou mal configurado.

Otimizações de maior impacto

Otimize imagens:

  • Use formatos modernos (WebP, AVIF). AVIF pode reduzir tamanho em até 50% vs JPEG.
  • Dimensione na resolução correta (não sirva imagem 3000px para container 800px).
  • Use <img loading="lazy"> para imagens abaixo da dobra.
  • Para a imagem hero (acima da dobra), use fetchpriority="high".

Preload de recursos críticos:

<link rel="preload" href="/images/hero.webp" as="image" fetchpriority="high">
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

Elimine render-blocking:

  • Inline o CSS crítico (above the fold) no <head>.
  • Defira o resto do CSS com media="print" onload="this.media='all'".
  • Use <script defer> ou <script async> para scripts não-críticos.

Otimize server:

  • Use CDN (Cloudflare, Fastly, BunnyCDN).
  • Cache HTTP agressivo (Cache-Control: max-age=31536000 para assets).
  • HTTP/2 ou HTTP/3 habilitado.

Objetivo realista: LCP abaixo de 2.5s no 75º percentil do CrUX.

INP: otimizando Interaction to Next Paint

INP mede o atraso entre o usuário clicar/tocar em algo e a página responder visualmente. Substituiu o FID porque mede todas as interações, não só a primeira.

Causas mais comuns de INP ruim

  1. JavaScript pesado bloqueando a main thread — 85% dos casos.
  2. Event handlers lentos — onClick que demora para processar.
  3. Re-renders caros em frameworks SPA (React, Vue).
  4. Third-party scripts pesados (chat widgets, analytics).

Otimizações de maior impacto

Reduza JavaScript:

  • Code splitting e lazy loading de rotas.
  • Remova bibliotecas pesadas não usadas (inspect bundle size com webpack-bundle-analyzer).
  • Prefira CSS nativo para animações em vez de JS.

Otimize event handlers:

  • Debounce/throttle em handlers de scroll, resize, input.
  • Use requestIdleCallback para trabalho não-urgente.
  • Divida tarefas longas em chunks com setTimeout(fn, 0) ou scheduler.yield().

Carregue third-party async:

  • Chat widgets, analytics, pixels — <script async> + onload delay.
  • Considere Partytown para rodar third-party em Web Worker.

Objetivo: INP abaixo de 200ms no 75º percentil.

CLS: otimizando Cumulative Layout Shift

CLS mede o quanto os elementos da página se movem enquanto carrega. Irritante para o usuário e prejudicial ao SEO.

Causas mais comuns de CLS ruim

  1. Imagens sem dimensões declaradas — browser não reserva espaço.
  2. Banners e ads injetados dinamicamente acima da dobra.
  3. Fontes web que causam FOUT/FOIT (texto redimensiona quando a fonte custom carrega).
  4. Conteúdo adicionado dinamicamente sem placeholder.

Otimizações

Sempre declare dimensões:

<img src="foto.jpg" width="800" height="600" alt="...">

Reserve espaço para ads/embeds:

.ad-slot { min-height: 250px; }

Use font-display: swap com fallback similar:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
  size-adjust: 100%;
}

Anime transformações, não dimensões:

  • transform: translate() não causa layout shift.
  • top, left, margin-top causam.

Objetivo: CLS abaixo de 0.1 no 75º percentil.

Diagnóstico prático: por onde começar

  1. Rode PageSpeed Insights na página mais visitada do seu site (home + 3 páginas internas principais).
  2. Anote o CrUX de cada uma das 3 métricas.
  3. Identifique qual métrica está pior.
  4. Aplique as otimizações desta seção em ordem de impacto.
  5. Meça novamente após 28 dias (período do CrUX).

Monitoramento contínuo

Depois de otimizar, monitore:

  • Google Search Console → Core Web Vitals: mostra URLs com problema.
  • PageSpeed Insights API: automatize checks semanais.
  • Web Vitals JS library: integre no GA4 para coletar seus próprios dados RUM.
  • SpeedCurve / Calibre / DebugBear: SaaS pagas para monitoramento 24/7.

Core Web Vitals + SEO: qual o peso real?

CWV é um fator de ranking mas não é o principal. Conteúdo relevante + autoridade continuam pesando mais. Mas em buscas competitivas, onde vários sites têm conteúdo bom e autoridade parecida, quem passa em CWV leva vantagem.

A regra: faça SEO técnico completo (CWV + estrutura + schema), produza conteúdo excelente e construa autoridade. CWV sozinho não salva um site com conteúdo ruim, mas pode ser o diferencial que faz subir da posição 5 para 2 em queries competitivas.

Quer otimizar seu site?

Posso fazer uma auditoria completa de Core Web Vitals e executar as correções. Fale comigo para análise gratuita.

Quer resultado como esses no seu site?

Agende uma análise gratuita e descubra o que está impedindo seu site de crescer no Google.

Quero minha análise gratuita
Análise gratuita

Pronto para aparecer no Google e atrair mais clientes?

Agende uma análise gratuita do seu site. Sem compromisso. Em até 48h você recebe um diagnóstico completo.

Falar no WhatsAppEnviar mensagem

Respondo em até 2 horas em horário comercial · Atendimento remoto para todo o Brasil