Core Web Vitals e Velocidade de Página: O Guia Completo 2026

O Que São Core Web Vitals?

Core Web Vitals são as três métricas principais que o Google usa para medir a experiência real do usuário em páginas web.

Tornaram-se fator de ranqueamento em 2021. Em 2026, elas importam mais do que nunca — o Google continua dando cada vez mais peso à experiência do usuário a cada atualização.

Essas métricas não são só uma questão de "SEO técnico". Elas afetam diretamente as taxas de conversão. Uma página lenta manda os clientes em potencial direto para a concorrência.

As Três Métricas Principais

LCP — Largest Contentful Paint

Quanto tempo leva para o conteúdo principal da página se tornar visível.

Quando um usuário chega na sua página, com qual rapidez o maior elemento de conteúdo — normalmente a imagem hero, um bloco de texto grande ou um vídeo — realmente aparece na tela?

Fatores que prejudicam o LCP:

• Tempo de resposta lento do servidor (TTFB)
• CSS e JavaScript bloqueando a renderização
• Imagens e vídeos com carregamento lento
• Atrasos causados por renderização no lado do cliente

INP — Interaction to Next Paint

Mede a velocidade com que a página responde às interações do usuário.

O INP substituiu o FID (First Input Delay) em 2024. Enquanto o FID capturava apenas a primeira interação, o INP cobre todas as interações — cliques, toques e entradas de teclado.

Fatores que prejudicam o INP:

• Tarefas longas de JavaScript em execução
• Scripts pesados de terceiros
• Operações que bloqueiam a thread principal
• DOM excessivamente grande

CLS — Cumulative Layout Shift

Mede os deslocamentos inesperados de layout enquanto a página carrega.

Você já viu isso acontecer: você está prestes a clicar em um botão e a página salta, levando o clique para outro lugar. Esse é um problema de CLS.

Fatores que prejudicam o CLS:

• Imagens e vídeos sem dimensões explícitas
• Conteúdo injetado dinamicamente (anúncios, banners)
• Fontes web carregadas tarde
• Iframes sem tamanho definido

Como Medir os Core Web Vitals

Dados de Lab (Simulados)

• Google PageSpeed Insights: Fornece dados de lab e de campo
• Lighthouse: Integrado ao Chrome DevTools
• WebPageTest: Análise detalhada em cascata (waterfall)

Os dados de lab são medidos em ambiente controlado. Podem não refletir perfeitamente a experiência real dos usuários, mas são ideais para identificar problemas com precisão.

Dados de Campo (Usuários Reais)

• Google Search Console: O relatório de CWV é baseado em dados reais de usuários
• Chrome UX Report (CrUX): Dados anônimos coletados de usuários do Chrome
• PageSpeed Insights: A seção "Dados de campo para esta URL"

O Google usa dados de campo para os rankings. Mesmo que suas pontuações de lab estejam ótimas, dados de campo ruins ainda vão prejudicar seu posicionamento.

Otimização do LCP

Reduza o Tempo de Resposta do Servidor (TTFB)

O tempo de resposta do servidor é a base do LCP.

• Use um CDN: Sirva conteúdo a partir do servidor mais próximo do usuário
• Cache no lado do servidor: Faça cache de consultas ao banco de dados e do output das páginas
• Use HTTP/2 ou HTTP/3: Permite o carregamento paralelo de recursos
• Meta para o TTFB: Abaixo de 800 ms

Otimize as Imagens

As imagens são o elemento LCP na maioria das páginas.

• Use WebP ou AVIF — 25 a 50% menores que JPEG
• Imagens responsivas: Use os atributos srcset e sizes para servir o tamanho certo para cada dispositivo
• Lazy loading: Adicione loading="lazy" em imagens abaixo da dobra
• Pré-carregue sua imagem LCP: <link rel="preload" as="image" href="hero.webp">
• Sirva via CDN: Imgix, Cloudinary ou Cloudflare Images

Elimine Recursos que Bloqueiam a Renderização

Arquivos CSS e JavaScript podem impedir que a página seja renderizada.

• Inline o CSS crítico: Coloque os estilos above-the-fold diretamente em uma tag <style>
• Carregue CSS de forma assíncrona: media="print" onload="this.media='all'"
• Adie ou assincronize o JavaScript: <script defer>
• Remova CSS não utilizado: Use PurgeCSS ou ferramenta similar

Otimização de Fontes

Fontes web podem comprometer seriamente o LCP.

• Use font-display: swap — a fonte do sistema aparece até que a fonte web carregue
• Pré-carregue arquivos de fonte: <link rel="preload" as="font" type="font/woff2">
• Carregue apenas os subconjuntos de caracteres que você realmente usa
• Considere fontes do sistema quando possível

Otimização do INP

Divida Tarefas Longas de JavaScript

Se a thread principal do navegador estiver ocupada com tarefas maiores que 50 ms, ela não consegue responder às interações do usuário.

• Faça code-split dos bundles JavaScript grandes
• Divida tarefas longas usando requestIdleCallback ou scheduler.yield()
• Mova trabalho para Web Workers: Processamento em segundo plano, independente da thread principal

Audite Scripts de Terceiros

Analytics, anúncios, widgets de chat ao vivo, embeds de redes sociais — cada um compete pelo tempo da thread principal.

• Meça o impacto de cada script
• Remova tudo que não for essencial
• Carregue os scripts restantes com defer ou imports dinâmicos
• Use o padrão de facade — por exemplo, mostre um thumbnail como placeholder em vez de carregar um embed do YouTube imediatamente

Reduza o Tamanho do DOM

Um DOM muito grande torna cada interação mais lenta.

• Evite mais de 1.500 elementos no DOM
• Mantenha a profundidade de aninhamento abaixo de 32 níveis
• Remova divs desnecessários como wrappers
• Use scroll virtual para listas longas — renderize apenas os elementos visíveis na viewport

Otimização do CLS

Defina Dimensões Explícitas em Imagens e Vídeos

Adicione os atributos width e height a todos os elementos <img> e <video>.

<img src="foto.webp" width="800" height="600" alt="Descrição">

O navegador reserva o espaço antes de a imagem carregar, então o layout nunca muda de posição.

Para uma abordagem moderna, você também pode usar a propriedade CSS aspect-ratio.

Anúncios e Conteúdo Dinâmico

Anúncios são os maiores inimigos do CLS.

• Reserve espaço fixo para slots de anúncio usando min-height
• Evite que o contêiner colapse quando não houver anúncio
• Prefira posições de anúncio fixas (sticky)

Evite Deslocamento por Fontes

Quando uma fonte web carrega, as dimensões do texto podem mudar e causar deslocamento no layout.

• Use font-display: swap ou optional
• Combine as métricas da fonte com a fonte de sistema usando size-adjust
• Pré-carregue as fontes no <head>

Otimização Geral de Velocidade de Página

Estratégia de Cache

Uma configuração de cache bem feita acelera drasticamente as visitas recorrentes.

• Cache do navegador: Configure os headers Cache-Control corretamente
• Service Worker: Permite acesso offline e controle granular de cache
• Cache do CDN: Armazene arquivos estáticos nos servidores de borda

Use cache de longa duração (1 ano) para recursos estáticos como CSS, JS e imagens. Use cache de curta duração ou sem cache para HTML.

Reduza Requisições HTTP

Cada requisição HTTP adiciona latência.

• Agrupe arquivos CSS e JavaScript
• Use conjuntos de ícones SVG em vez de imagens individuais
• Remova requisições desnecessárias de terceiros
• Use dns-prefetch e preconnect para reduzir o tempo de resolução de DNS

Compressão

• Use compressão Gzip ou Brotli — reduz o tamanho do arquivo em 60 a 80%
• O Brotli comprime 15 a 20% melhor que o Gzip
• Ative a compressão na configuração do seu servidor

Formatos de Imagem Modernos

Construa uma estratégia de fallback para cada formato de imagem.

Orçamento de Performance

A maneira mais confiável de proteger a velocidade da sua página é definir um orçamento de performance desde o início.

Exemplo de orçamento de performance:

• Tamanho total da página: < 1,5 MB
• JavaScript: < 300 KB (comprimido)
• Imagens: < 500 KB
• LCP: < 2 segundos
• INP: < 150 ms
• Requisições HTTP: < 50

Integre esse orçamento ao seu pipeline de CI/CD e bloqueie deployments que ultrapassem o limite.

Performance no Mobile

Dispositivos móveis têm processadores mais lentos e conexões mais lentas que desktops.

O Google usa indexação mobile-first. Se a sua performance mobile for ruim, seus rankings no desktop também sofrem.

• Teste em conexão 3G
• Teste em dispositivos de baixo desempenho usando o throttling do Chrome DevTools
• Considere AMP ou frameworks focados em performance

Core Web Vitals e SEO

O Google usa os CWV como sinal de ranqueamento — mas o que isso significa na prática?

Os CWV por si só não vão te levar à primeira posição. Mas quando duas páginas estão empatadas em qualidade de conteúdo e perfil de backlinks, os CWV podem ser o desempate.

Os efeitos indiretos importam tanto quanto os diretos:

• Página rápida → menor taxa de rejeição
• Ótima UX → maior engajamento
• Maior engajamento → sinais de usuário mais fortes
• Sinais mais fortes → melhores rankings

Esse efeito dominó torna os CWV ainda mais valiosos do que um simples fator de ranqueamento.

E-Commerce e Velocidade de Página

Em sites de e-commerce, a velocidade da página se traduz diretamente em receita.

• 1% de melhoria na velocidade → ~2% de aumento nas conversões (em média)
• Páginas mais lentas que 3 segundos → 53% dos visitantes abandonam
• As taxas de conversão mobile já são a metade das de desktop — melhorar a velocidade fecha essa diferença

Monitoramento Contínuo dos CWV

Otimizar uma vez não é suficiente. Novos conteúdos, plugins e atualizações podem degradar a performance.

Ferramentas para monitoramento contínuo:

• Google Search Console — relatório de CWV
• PageSpeed Insights — análise por página
• Extensão Chrome Web Vitals — medição em tempo real
• Lighthouse CI — testes automatizados no seu pipeline

Rastrear manualmente problemas de SEO técnico é lento e propenso a erros. O DexterGPT rastreia seu site automaticamente, identifica problemas de CWV e velocidade de página, e entrega recomendações práticas.

Conclusão

Core Web Vitals e velocidade de página formam a base técnica do SEO.

Otimizar LCP, INP e CLS melhora tanto a experiência do usuário quanto os rankings — e tem um impacto direto e mensurável nas conversões.

Performance não é uma tarefa pontual. É um processo contínuo. Meça, otimize, meça de novo. Nunca quebre esse ciclo.

Nosso checklist de SEO Técnico cobre tudo o que vai além da velocidade de página em detalhe.