Voltar ao nosso serviço de SEO Técnico
Desde 2021, o Google usa os Core Web Vitals como fator de ranqueamento oficial. Em 2024, uma das três métricas foi atualizada (FID foi substituído por INP), e o peso desses sinais continua crescendo. Em 2026, sites com Core Web Vitals ruins estão sendo consistentemente desfavorecidos em situações de empate de relevância.
Mais importante que o impacto no ranqueamento: Core Web Vitals afetam diretamente conversão. Cada segundo a mais de carregamento reduz a taxa de conversão em até 7%. Um LCP de 4 segundos pode custar 30-40% dos seus leads potenciais que simplesmente fecham a página antes de interagir.
O que são Core Web Vitals
Core Web Vitals são três métricas padronizadas que medem aspectos específicos da experiência do usuário. O diferencial delas em relação a métricas tradicionais de velocidade é que são calculadas a partir de dados reais de usuários reais (Field Data), não de simulações em laboratório.
LCP — Largest Contentful Paint
Mede o tempo até o maior elemento visível da página terminar de renderizar. Na prática, quase sempre é a imagem principal do hero, a foto de destaque de um artigo ou um bloco grande de texto.
Metas: abaixo de 2,5s = Bom | 2,5s a 4s = Precisa melhorar | acima de 4s = Ruim
Diagnóstico: por que o LCP está alto
O PageSpeed Insights aponta especificamente o elemento que está sendo medido como LCP e as oportunidades de otimização. Os problemas mais comuns, em ordem de impacto:
- Imagem principal sem otimização: uma foto de 3MB no hero é o caminho mais rápido para um LCP alto. Converta para WebP (40-80% menor que JPEG), comprima e use srcset para servir tamanhos diferentes por dispositivo
- Sem preload da imagem LCP: o navegador só descobre a imagem principal quando processa o HTML. Adicione <link rel="preload" as="image" href="imagem-hero.webp"> no head para que o download comece imediatamente
- TTFB alto (servidor lento): se o servidor demora mais de 800ms para responder, o LCP já começa prejudicado. Use CDN, habilite cache e verifique a hospedagem
- CSS crítico não inline: se o CSS externo bloqueia a renderização, adicione o CSS crítico (above the fold) inline no HTML e carregue o restante de forma assíncrona
- Fontes externas bloqueando render: fonts do Google Fonts ou outras CDNs podem atrasar a renderização. Use font-display: swap e considere hospedar as fontes localmente
INP — Interaction to Next Paint
Substituiu o FID (First Input Delay) em março de 2024 como métrica oficial de interatividade. A diferença crítica: enquanto o FID mediu apenas o delay antes da primeira interação ser processada, o INP mede o tempo total de resposta a TODAS as interações durante a visita — o tempo entre o usuário clicar/tocar e a página visualmente responder.
Metas: abaixo de 200ms = Bom | 200ms a 500ms = Precisa melhorar | acima de 500ms = Ruim
Causas de INP alto e como resolver
- Tarefas longas no main thread: o JavaScript executa em um único thread. Se uma função demorar mais de 50ms, ela bloqueia todas as interações do usuário. Use o Chrome DevTools Performance tab para identificar "long tasks"
- Handlers de eventos pesados: funções executadas em response a cliques e toques que fazem muito trabalho. Divida em operações menores ou mova para Web Workers
- Re-renders excessivos em React/Vue/Angular: componentes que re-renderizam desnecessariamente custam INP. Use React.memo, useMemo e useCallback corretamente
- Scripts de terceiros: pixels de publicidade, chat ao vivo, heatmaps. Carregue-os de forma lazy e com baixa prioridade usando async ou defer
- Animações em JavaScript: animações implementadas com setInterval/setTimeout ao invés de CSS ou Web Animations API interferem no main thread
CLS — Cumulative Layout Shift
Mede instabilidade visual — a soma de todos os deslocamentos de layout inesperados que acontecem enquanto a página carrega e o usuário interage. Um CLS alto é o que faz você tentar clicar num botão e errar porque o layout se moveu no último momento.
Metas: abaixo de 0,1 = Bom | 0,1 a 0,25 = Precisa melhorar | acima de 0,25 = Ruim
Principais causas e soluções
- Imagens sem dimensões declaradas: sem width e height no HTML, o navegador não reserva o espaço antes de baixar a imagem. O layout se ajusta quando a imagem carrega. Solução: sempre declare width e height, ou use aspect-ratio no CSS
- Anúncios sem placeholder: banners de publicidade que aparecem depois do carregamento empurram o conteúdo. Defina um container com tamanho mínimo reservado para o espaço de anúncio
- Fontes causando FOUT/FOIT: Flash of Unstyled Text acontece quando a fonte web carrega depois do texto, com métricas diferentes da fonte fallback. Use font-display: optional (elimina o fallback) ou ajuste as métricas das fontes fallback
- Injeção de conteúdo acima do fold: banners de cookies, notificações push, barras de promoção que aparecem depois do carregamento inicial. Reserve o espaço no layout antes de injetar esses elementos
- Iframes sem dimensões: vídeos do YouTube, Google Maps e outros embeds sem height declarada causam CLS quando carregam
Como medir seus Core Web Vitals corretamente
Existem dois tipos de dados: Field Data (dados reais de usuários) e Lab Data (simulação). O Google usa Field Data para ranqueamento — não Lab Data. Priorize sempre as métricas de campo.
Google Search Console — a fonte mais importante
O relatório de Experiência na Página no Search Console mostra dados de campo agregados das últimas 28 dias para todas as páginas do site. É o dado mais próximo do que o Google usa para ranquear. Monitore semanalmente e investigue qualquer degradação.
PageSpeed Insights
Combina Field Data (do CrUX — Chrome User Experience Report) e Lab Data para uma URL específica. Use para análise detalhada de páginas individuais. Atenção: URLs com pouco tráfego podem não ter Field Data suficiente e mostrar apenas Lab Data.
Chrome DevTools
Para debugging em tempo real durante o desenvolvimento. A aba Performance permite gravar e analisar sessões completas, identificando exatamente quais scripts causam long tasks e quais elementos causam layout shifts.
Web Vitals Extension
Extensão do Chrome que mostra as métricas Core Web Vitals em tempo real enquanto você navega. Útil para monitoramento rápido do dia a dia.
Core Web Vitals e conversão: os números que justificam o investimento
Para quem precisa justificar internamente o investimento em performance:
- Google reporta que melhoras de 100ms no LCP aumentam conversões em 1-2% em média
- Sites com LCP abaixo de 2,5s têm taxa de rejeição 24% menor que sites com LCP acima de 4s
- Um CLS de 0 vs. CLS de 0,25 pode fazer diferença de até 15% na taxa de conversão em checkout
- Para e-commerces com milhares de visitas diárias, cada 100ms de melhora no LCP pode representar dezenas de conversões adicionais por dia
A performance não é um detalhe técnico — é diretamente faturamento. Precisa de ajuda para otimizar os Core Web Vitals do seu site? Faço uma análise e entrego um plano de correção priorizado.