Core Web Vitals: O Guia Completo para Melhorar seu Site em 2026

Desde 2021, os Core Web Vitals são fatores de ranqueamento oficiais do Google. Em março de 2024, a métrica FID (First Input Delay) foi aposentada e substituída pelo INP (Interaction to Next Paint), tornando a avaliação de interatividade muito mais exigente. Sites que ignoram essa mudança estão pagando o preço em posições perdidas para concorrentes mais rápidos.

Neste guia completo, você vai entender o que são cada uma das três métricas, quais são as metas que o Google considera "Bom", como medir tudo corretamente — e, mais importante, como corrigir os problemas mais comuns no WordPress e em qualquer outra plataforma.

O que são Core Web Vitals?

Core Web Vitals é um conjunto de métricas criado pelo Google para medir a experiência real do usuário ao carregar uma página. Diferente de métricas técnicas puras (como tamanho de página ou número de requisições), os Core Web Vitals focam em como o usuário percebe a velocidade, a interatividade e a estabilidade visual de um site.

As três métricas que compõem os Core Web Vitals em 2026 são:

• LCP — Largest Contentful Paint: mede quanto tempo leva para o maior elemento visível da página (imagem principal ou bloco de texto) ser renderizado.
• INP — Interaction to Next Paint: mede a responsividade do site a interações do usuário (cliques, toques, teclas). Substituiu o FID em março de 2024.
• CLS — Cumulative Layout Shift: mede quanto o layout da página "pula" inesperadamente durante o carregamento, causando cliques acidentais e frustração.

Além dos Core Web Vitals, o Google também coleta métricas complementares como TTFB (Time to First Byte) e FCP (First Contentful Paint), mas elas não são fatores de ranqueamento diretos — embora influenciem o LCP indiretamente.

Metas de Performance: O Que o Google Considera "Bom"

O Google divide cada métrica em três faixas: Bom, Precisa de Melhorias e Ruim. Para que um site seja considerado aprovado, ele precisa estar na faixa "Bom" em pelo menos 75% das visitas reais (percentil 75 do CrUX — Chrome User Experience Report).

Como Medir os Core Web Vitals

1. PageSpeed Insights

O PageSpeed Insights (pagespeed.web.dev) é a ferramenta oficial do Google. Ele combina dados reais do CrUX (campo) com testes de laboratório (Lighthouse). Para cada URL analisada, você verá dois painéis: "Dados de campo" (últimos 28 dias de usuários reais) e "Dados de laboratório" (simulação controlada).

Dica prática: analise tanto a versão mobile quanto a desktop. O Google utiliza a indexação mobile-first, então a versão mobile tem peso maior no ranqueamento. Sites que passam no desktop mas falham no mobile ainda prejudicam o SEO.

2. Google Search Console

No Google Search Console, acesse o menu "Experiência" > "Core Web Vitals". Lá você verá um relatório agregado de todas as URLs do seu site, dividido por dispositivo (mobile/desktop) e classificadas como Boas, Precisam de Melhorias ou Ruins. O grande diferencial do Search Console é que ele usa exclusivamente dados reais — e você pode clicar em cada grupo para ver quais páginas específicas estão com problema.

3. Chrome DevTools

Abra o Chrome DevTools (F12), vá para a aba "Performance" e grave uma sessão de carregamento. No painel "Timings", você verá marcadores de LCP e outras métricas. Para o CLS, ative a aba "Performance Insights" que mostra cada layout shift individual com o elemento responsável e o impacto em pontos.

4. GTmetrix

O GTmetrix (gtmetrix.com) oferece testes de laboratório detalhados com filmagem do carregamento frame a frame. Muito útil para identificar visualmente quando o LCP acontece e quais elementos causam CLS. Plano gratuito permite testes de servidores no Canadá; o plano Pro (a partir de USD 5/mês) adiciona servidores no Brasil.

5. WebPageTest

O WebPageTest (webpagetest.org) é a ferramenta mais avançada disponível gratuitamente. Permite testar a partir de localizações específicas (incluindo São Paulo), emular conexões 3G/4G, e gerar filmagens comparativas entre antes e depois de otimizações. Indispensável para diagnósticos profundos.

Otimização do LCP (Largest Contentful Paint)

O LCP é frequentemente o problema mais crítico em sites brasileiros, especialmente aqueles hospedados em servidores internacionais ou com imagens não otimizadas. As principais causas de LCP lento são:

1. Imagens Hero não otimizadas

A imagem hero (banner principal) costuma ser o elemento LCP da maioria dos sites. Otimizações essenciais:

• Converta para WebP ou AVIF — formatos que reduzem o tamanho em 30-50% sem perda de qualidade visível. O AVIF é ainda mais eficiente, mas tem suporte um pouco menor em browsers mais antigos.
• Adicione o atributo fetchpriority="high" à tag img da imagem hero: <img src="hero.webp" fetchpriority="high" />. Isso instrui o browser a baixar essa imagem com prioridade máxima.
• Nunca aplique loading="lazy" na imagem hero — lazy loading atrasa imagens que deveriam carregar imediatamente.
• Use <link rel="preload"> no <head> para imagens hero carregadas via CSS background-image.
• Dimensione a imagem corretamente: não sirva uma imagem de 2000px para um espaço de 800px.

2. Tempo de Resposta do Servidor (TTFB)

Um servidor lento atrasa tudo — incluindo o LCP. O Google recomenda TTFB abaixo de 800ms. Para reduzir:

• Implemente cache de página completa — WP Rocket, W3 Total Cache, ou o cache nativo do servidor (Nginx FastCGI cache).
• Use uma CDN com ponto de presença no Brasil (Cloudflare tem PoPs em São Paulo, Rio de Janeiro e Fortaleza gratuitamente).
• Considere migrar para uma hospedagem com servidor no Brasil — a Hostinger tem datacenter em São Paulo, o que reduz a latência de usuários brasileiros em 60-80ms.
• Implemente cache de banco de dados com Redis ou Memcached se usar WordPress com muito conteúdo dinâmico.

3. Recursos que Bloqueiam a Renderização

CSS e JavaScript críticos no <head> atrasam a renderização da página. Soluções:

• Extraia o CSS crítico (above-the-fold) e insira-o inline no <head>. Plugins como WP Rocket e perfmatters fazem isso automaticamente.
• Adie o carregamento de JavaScript não-crítico com defer ou async.
• Remova CSS e JS de plugins desativados — muitos themes e plugins carregam recursos em todas as páginas, mesmo quando desnecessários.

Otimização do INP (Interaction to Next Paint)

O INP é a métrica mais nova e muitas vezes a mais difícil de otimizar, especialmente em sites com muito JavaScript. Ele mede o tempo entre uma interação do usuário (clique, toque ou pressionamento de tecla) e o próximo visual feedback da página.

Principais causas de INP ruim

• JavaScript pesado bloqueando a thread principal: scripts grandes que monopolizam o thread principal por mais de 50ms são chamados de "Long Tasks". O Chrome DevTools mostra esses bloqueios na aba Performance.
• Event handlers lentos: código JavaScript que roda dentro de handlers de eventos (click, keydown) e executa operações pesadas antes de atualizar a UI.
• Hidratação de frameworks JavaScript: sites React, Vue ou Angular que precisam "hidratar" o HTML do lado servidor antes de se tornarem interativos causam períodos de INP alto logo após o carregamento.
• Plugins de terceiros: chat widgets, sistemas de comentários, scripts de ads — todos disputam a thread principal.

Como corrigir o INP

• Use a técnica de code splitting para quebrar bundles JavaScript grandes em pedaços carregados sob demanda.
• Delegue trabalho pesado para Web Workers — threads secundárias que não bloqueiam a UI.
• Utilize scheduler.yield() ou setTimeout(0) para ceder o controle da thread principal entre tarefas longas.
• Carregue scripts de terceiros (live chat, analytics, ads) de forma assíncrona e com atraso — use setTimeout ou ative-os apenas após a primeira interação do usuário.
• No WordPress, o plugin Perfmatters (USD 24,95/ano) permite desativar scripts desnecessários página por página.

Otimização do CLS (Cumulative Layout Shift)

O CLS mede a instabilidade visual da página durante o carregamento. Um CLS de 0,3 significa que elementos da página se movem o suficiente para causar cliques acidentais e frustração — algo que usuários percebem mesmo sem saber o nome técnico do problema.

Causas mais comuns de CLS alto

• Imagens sem dimensões definidas: quando o browser não sabe o tamanho de uma imagem antes de baixá-la, ele não reserva espaço. Quando a imagem carrega, empurra o conteúdo abaixo. Solução: sempre defina width e height nas tags img, ou use a propriedade CSS aspect-ratio.
• Fontes web causando FOUT/FOIT: quando uma fonte customizada carrega, ela pode substituir a fonte fallback e mudar o tamanho do texto, deslocando o layout. Use font-display: optional ou font-display: swap com uma fonte fallback de métricas similares.
• Anúncios sem dimensões reservadas: banners de AdSense inseridos dinamicamente empurram o conteúdo. Reserve o espaço com um container de tamanho fixo antes de o anúncio carregar.
• Iframes de terceiros: vídeos do YouTube, posts do Instagram, mapas — todos podem causar CLS se não tiverem dimensões definidas.
• Elementos injetados por JavaScript: banners de cookies, popups de newsletter, notificações — se aparecerem no topo da página após o carregamento, causam CLS severo.

Como corrigir o CLS

• Adicione width e height a todas as imagens e use CSS height: auto para manter a proporção responsiva.
• Para iframes de vídeo responsivos, use o truque do padding-top: position: relative; padding-top: 56.25%; com o iframe em position: absolute; top: 0; left: 0; width: 100%; height: 100%;.
• Reserve espaço para anúncios AdSense com min-height no container antes do carregamento.
• Faça banners de cookies aparecerem como overlay fixo no rodapé, não como elemento que empurra o conteúdo.
• Pré-carregue fontes críticas com <link rel="preload" as="font"> no <head>.

Ferramentas de Performance: Comparativo

Otimizações Específicas para WordPress

O WordPress alimenta mais de 43% da web, e muitos sites WordPress enfrentam desafios específicos com Core Web Vitals. O ecossistema de plugins é poderoso, mas também é uma das principais causas de performance ruim.

Plugins de Cache e Performance Recomendados

• WP Rocket (USD 59/ano): o plugin de performance mais completo para WordPress. Oferece cache de página, minificação de CSS/JS, lazy loading, preload de links, geração de CSS crítico e integração com CDN. Cobre a maioria das otimizações de LCP e CLS sem configuração avançada. Nossa primeira recomendação.
• LiteSpeed Cache (grátis): indispensável para sites em servidores LiteSpeed (como Hostinger). Integra com o servidor para cache de nível LSAPI, muito mais eficiente que cache de arquivo PHP.
• W3 Total Cache (grátis/premium): alternativa robusta ao WP Rocket, mais complexo de configurar mas altamente customizável.
• Autoptimize (grátis): foca em minificação e concatenação de CSS/JS. Bom complemento para outros plugins de cache.

CDN para Usuários Brasileiros

Para sites com público brasileiro, o ideal é uma CDN com pontos de presença (PoPs) no Brasil:

• Cloudflare (grátis): PoPs em São Paulo, Rio de Janeiro, Fortaleza, Porto Alegre e Curitiba. O plano gratuito é suficiente para a maioria dos sites. O Cloudflare também oferece otimizações automáticas de imagem (Polish) e protocolo HTTP/3 no plano Pro (USD 20/mês).
• BunnyCDN (pago por uso): USD 0,01 por GB na América do Sul, com PoPs em São Paulo. Ótima relação custo-benefício para sites com muito tráfego.
• KeyCDN: PoP em São Paulo, planos a partir de USD 0,04/GB.

Otimização de Imagens no WordPress

• Imagify: converte automaticamente para WebP e AVIF ao fazer upload. Plano gratuito: 20 MB de imagens por mês. Plano Starter: USD 4,99/mês.
• ShortPixel: 100 imagens grátis por mês, depois USD 3,99/mês. Qualidade de compressão excellent.
• Smush: opção gratuita popular, com versão Pro (USD 7,50/mês) que inclui WebP e CDN própria.

Exemplos de Otimização: O Que é Possível Alcançar

Para contextualizar o impacto das otimizações de Core Web Vitals, estes exemplos ilustram resultados típicos reportados por profissionais de SEO e desenvolvedores ao implementar as técnicas descritas neste guia:

• E-commerce com imagens não otimizadas: sites que migram imagens para WebP e implementam lazy loading correto costumam reduzir o LCP significativamente — de valores acima de 6s para abaixo de 2,5s. Melhorias de conversão mobile são frequentemente relatadas após otimizações de velocidade.
• Blog com CLS alto causado por imagens sem dimensões: ao adicionar atributos width e height às imagens e reservar espaço para anúncios, é possível reduzir o CLS de 0,3+ para abaixo de 0,1 — impactando positivamente o tempo de permanência na página.
• Site com plugins de terceiros excessivos: desativar scripts desnecessários (chat ao vivo, widgets, mapas) em páginas onde não são usados é uma das intervenções mais eficazes para reduzir o INP. Melhorias de ranking são frequentemente relatadas após correções de INP elevado.
• Site com fontes sem font-display: implementar font-display: swap e preload de fontes principais é uma correção de baixo esforço com impacto direto no CLS causado por FOUT (Flash of Unstyled Text).

Metas Realistas por Tipo de Site

Nem todo site consegue atingir pontuação 100 no PageSpeed Insights — e tudo bem. O que importa é passar pelo limiar de "Bom" para cada métrica. Veja metas realistas por tipo de site:

Monitoramento Contínuo

Otimizar uma vez não basta — plugins desatualizados, novos anúncios ou mudanças no tema podem degradar a performance em dias. Configure um sistema de monitoramento:

• Google Search Console: verifique o relatório de Core Web Vitals semanalmente. Configure alertas por e-mail para novas falhas detectadas.
• Uptime Robot + PageSpeed API: crie um script que rode o PageSpeed Insights automaticamente e alerte quando a pontuação cair abaixo de um threshold definido.
• Lighthouse CI: integre testes de performance ao seu pipeline de deploy para detectar regressões antes de publicar mudanças.
• RUM (Real User Monitoring): ferramentas como Vercel Speed Insights, SpeedCurve ou New Relic Browser coletam dados reais de seus usuários continuamente, não apenas snapshots.

Veredicto Final

Os Core Web Vitals deixaram de ser "diferencial" e se tornaram requisito básico para competir no Google em 2026. A boa notícia é que a maioria dos sites pode atingir a faixa "Bom" nas três métricas com um investimento moderado de tempo e dinheiro — especialmente em WordPress, onde o ecossistema de plugins cobre grande parte das otimizações necessárias.

O plano de ação prioritário é:

1. Meça primeiro: use PageSpeed Insights e Search Console para entender onde seu site está agora e quais páginas têm os maiores problemas.
2. Corrija o LCP: otimize a imagem hero (WebP, fetchpriority, dimensões corretas), melhore o TTFB com cache e CDN.
3. Elimine CLS: adicione dimensões a todas as imagens, reserve espaço para anúncios, corrija fontes.
4. Reduza o INP: identifique e adie scripts de terceiros desnecessários, especialmente em dispositivos mobile.
5. Monitore continuamente: configure alertas para detectar regressões antes que elas afetem seu ranqueamento.

Para sites WordPress, o WP Rocket combinado com Cloudflare gratuito resolve mais de 70% dos problemas de Core Web Vitals sem exigir conhecimento técnico avançado. Para sites fora do WordPress, o Google Lighthouse (Chrome DevTools) é o ponto de partida gratuito mais poderoso disponível.

Performance não é projeto com data de conclusão — é processo contínuo. Sites que tratam isso como rotina constroem uma vantagem competitiva sustentável no Google que vai muito além do curto prazo.