Se o seu site demora para carregar, trava quando o usuário clica, ou os elementos ficam "pulando" na tela, você está perdendo visitantes — e posições no Google.
Core Web Vitals são as métricas que o Google usa para medir exatamente isso: a qualidade da experiência do usuário no seu site. E sim, elas afetam diretamente seu ranking.
Neste guia, vou explicar cada métrica em detalhes, como medi-las corretamente, e — mais importante — como otimizá-las de forma prática.
O Que São Core Web Vitals?
Core Web Vitals são um conjunto de três métricas específicas que o Google considera essenciais para uma boa experiência de página:
- LCP (Largest Contentful Paint) — Velocidade de carregamento
- INP (Interaction to Next Paint) — Responsividade/Interatividade
- CLS (Cumulative Layout Shift) — Estabilidade visual
Essas métricas fazem parte do "Page Experience" do Google, que é um fator de ranking oficial desde junho de 2021.
Atualização 2024: O INP (Interaction to Next Paint) substituiu oficialmente o FID (First Input Delay) em março de 2024. Se você ainda está otimizando para FID, está desatualizado.
Por Que Core Web Vitals Importam para SEO
1. Fator de Ranking Oficial
Core Web Vitals são um dos sinais de ranking do Google. Não é o mais importante (conteúdo e relevância ainda dominam), mas pode ser o desempate entre sites com conteúdo similar.
2. Experiência do Usuário
Sites rápidos e estáveis têm:
- Menor taxa de rejeição
- Maior tempo na página
- Melhor taxa de conversão
- Mais páginas por sessão
3. Mobile-First
O Google indexa e ranqueia principalmente a versão mobile. Core Web Vitals são especialmente críticos em dispositivos móveis, onde conexões são mais lentas e processadores menos potentes.
4. Indicador de Qualidade Técnica
Bons Core Web Vitals geralmente indicam um site bem construído. Problemas nessas métricas frequentemente revelam problemas técnicos mais profundos.
Segundo estudos do Google, sites que atingem os limites recomendados de Core Web Vitals têm 24% menos abandono de página. Para e-commerces, cada segundo de melhora no LCP pode aumentar conversões em até 8%.
LCP: Largest Contentful Paint
Largest Contentful Paint
Mede o tempo de carregamento do maior elemento visível
O Que o LCP Mede
LCP mede quanto tempo leva para o maior elemento de conteúdo aparecer na viewport (área visível da tela). Geralmente é:
- Uma imagem hero grande
- Um bloco de texto principal
- Um vídeo de capa
- Uma imagem de background
Causas Comuns de LCP Ruim
- Servidor lento — tempo de resposta do servidor (TTFB) alto
- CSS/JS bloqueando renderização — recursos que atrasam o carregamento
- Imagens não otimizadas — arquivos muito pesados
- Carregamento de fontes — web fonts atrasando texto
- Renderização client-side — SPAs que dependem de JS para mostrar conteúdo
Como Otimizar o LCP
-
1
Otimize o Tempo de Resposta do Servidor
Use CDN, cache de servidor, otimize queries de banco de dados. Ideal: TTFB < 200ms.
-
2
Otimize e Comprima Imagens
Use formatos modernos (WebP, AVIF), dimensões corretas, compressão adequada. Lazy load para imagens abaixo da dobra.
-
3
Preload de Recursos Críticos
Use <link rel="preload"> para imagens hero, fontes e CSS crítico.
-
4
Elimine CSS/JS que Bloqueiam Renderização
Inline CSS crítico, defer/async para scripts não essenciais.
-
5
Otimize Web Fonts
Use font-display: swap, preload fonts, considere system fonts para body.
<!-- Preload da imagem hero para melhorar LCP -->
<link rel="preload" as="image" href="/images/hero.webp">
<!-- Preload de fonte crítica -->
<link rel="preload" as="font" type="font/woff2"
href="/fonts/main.woff2" crossorigin>
INP: Interaction to Next Paint
Interaction to Next Paint
Mede a responsividade às interações do usuário
O Que o INP Mede
INP mede o tempo entre uma interação do usuário (clique, toque, tecla) e a próxima atualização visual da página. Diferente do antigo FID que media apenas a primeira interação, o INP considera todas as interações durante a visita.
Por Que INP Substituiu o FID
O FID só media a primeira interação — ignorava se o site travava em interações subsequentes. INP é mais abrangente e representa melhor a experiência real do usuário.
Causas Comuns de INP Ruim
- JavaScript pesado — scripts que bloqueiam a main thread
- Long Tasks — tarefas JS que demoram mais de 50ms
- Event handlers lentos — funções de clique/scroll mal otimizadas
- Muitos third-party scripts — analytics, pixels, widgets
- Hydration lenta — em frameworks como React/Vue
Como Otimizar o INP
-
1
Quebre Long Tasks
Use yield to main thread, setTimeout, ou requestIdleCallback para dividir tarefas longas.
-
2
Reduza JavaScript Desnecessário
Code splitting, tree shaking, carregue apenas o JS necessário para cada página.
-
3
Otimize Event Handlers
Use debounce/throttle, evite cálculos pesados em handlers, use passive listeners.
-
4
Minimize Third-Party Scripts
Carregue scripts de terceiros de forma assíncrona ou adie para depois da interação.
-
5
Use Web Workers
Mova processamento pesado para web workers, liberando a main thread.
// Quebrando long task com scheduler.yield()
async function processData(items) {
for (const item of items) {
process(item);
// Libera a main thread periodicamente
if (navigator.scheduling?.isInputPending()) {
await scheduler.yield();
}
}
}
CLS: Cumulative Layout Shift
Cumulative Layout Shift
Mede a estabilidade visual da página
O Que o CLS Mede
CLS mede quanto os elementos da página "pulam" ou mudam de posição inesperadamente durante o carregamento. Sabe quando você vai clicar em um botão e ele move, fazendo você clicar em outro lugar? Isso é um layout shift.
O valor é calculado pela porcentagem da viewport afetada multiplicada pela distância do movimento. Quanto menor, melhor.
Causas Comuns de CLS Alto
- Imagens sem dimensões — sem width/height definidos
- Anúncios e embeds — conteúdo dinâmico que empurra outros elementos
- Web fonts — FOUT (Flash of Unstyled Text) causando reflow
- Conteúdo injetado dinamicamente — banners, modais, notificações
- Iframes sem dimensões — vídeos do YouTube, mapas, etc.
Como Otimizar o CLS
-
1
Sempre Defina Dimensões de Imagens
Use width e height em <img> ou aspect-ratio em CSS. O navegador reserva o espaço antes de carregar.
-
2
Reserve Espaço para Anúncios
Use min-height ou containers com dimensões fixas para slots de anúncio.
-
3
Otimize Web Fonts
Use font-display: optional ou swap, preload fonts, considere font-size-adjust.
-
4
Evite Inserir Conteúdo Acima do Existente
Banners e notificações devem aparecer em posições que não empurrem conteúdo.
-
5
Use transform para Animações
Animações com transform não causam layout shift; top/left causam.
<!-- SEMPRE defina dimensões em imagens -->
<img src="foto.jpg"
width="800"
height="600"
alt="Descrição">
<!-- Ou use aspect-ratio em CSS -->
<style>
.img-container {
aspect-ratio: 16 / 9;
width: 100%;
}
</style>
Como Medir Core Web Vitals Corretamente
Existem dois tipos de dados de Core Web Vitals:
Dados de Campo (Field Data)
Dados reais coletados de usuários reais visitando seu site. São os dados que o Google usa para ranking.
- Coletados via Chrome User Experience Report (CrUX)
- Refletem a experiência real dos usuários
- Incluem variações de dispositivos, conexões, localizações
- Disponíveis no Search Console e PageSpeed Insights
Dados de Laboratório (Lab Data)
Dados gerados em ambiente controlado (simulação). Úteis para debug e testes.
- Gerados por ferramentas como Lighthouse
- Ambiente padronizado (mesmo dispositivo, mesma conexão)
- Reproduzíveis e controláveis
- Não usados diretamente para ranking
Importante: O Google usa dados de campo (CrUX) para ranking, não dados de laboratório. Seu Lighthouse pode estar verde, mas se os dados reais de usuários estiverem ruins, isso afetará seu SEO.
Ferramentas Essenciais
PageSpeed Insights
Ferramenta oficial do Google. Mostra dados CrUX (campo) e Lighthouse (lab) juntos. Ponto de partida essencial.
Google Search Console
Relatório "Core Web Vitals" mostra performance real de todas as URLs do seu site. Dados agregados por padrão de URL.
Lighthouse (Chrome DevTools)
Auditoria detalhada com diagnósticos específicos. Excelente para identificar problemas e testar correções.
Web Vitals Extension
Extensão do Chrome que mostra Core Web Vitals em tempo real enquanto você navega. Ótima para testes rápidos.
Chrome DevTools Performance
Para diagnóstico profundo de problemas de INP e Long Tasks. Mostra exatamente o que está bloqueando a main thread.
CrUX Dashboard
Dashboard gratuito no Data Studio/Looker Studio com histórico de Core Web Vitals do seu domínio.
Workflow Recomendado
- Search Console — identifique páginas com problemas
- PageSpeed Insights — diagnóstico inicial detalhado
- Chrome DevTools — investigação profunda
- Web Vitals Extension — teste correções em tempo real
- Aguarde CrUX — dados de campo atualizam em ~28 dias
Checklist de Otimização
Para LCP (Carregamento)
| Ação | Impacto | Dificuldade |
|---|---|---|
| Usar CDN | 🟢 Alto | Fácil |
| Comprimir imagens (WebP/AVIF) | 🟢 Alto | Fácil |
| Preload recursos críticos | 🟢 Alto | Fácil |
| Inline Critical CSS | 🟡 Médio | Médio |
| Defer JS não crítico | 🟡 Médio | Médio |
| Otimizar servidor/TTFB | 🟢 Alto | Difícil |
Para INP (Interatividade)
| Ação | Impacto | Dificuldade |
|---|---|---|
| Quebrar Long Tasks | 🟢 Alto | Médio |
| Code splitting | 🟢 Alto | Médio |
| Adiar third-party scripts | 🟡 Médio | Fácil |
| Otimizar event handlers | 🟡 Médio | Médio |
| Usar Web Workers | 🟡 Médio | Difícil |
Para CLS (Estabilidade)
| Ação | Impacto | Dificuldade |
|---|---|---|
| Definir width/height em imagens | 🟢 Alto | Fácil |
| Reservar espaço para ads | 🟢 Alto | Fácil |
| Usar font-display: swap | 🟡 Médio | Fácil |
| Definir dimensões de iframes | 🟡 Médio | Fácil |
| Evitar inserção dinâmica no topo | 🟡 Médio | Médio |
Erros Comuns a Evitar
- Otimizar apenas dados de lab: Lighthouse verde não significa dados de campo bons
- Ignorar mobile: Core Web Vitals são avaliados separadamente para mobile e desktop
- Lazy load da imagem LCP: A imagem hero NUNCA deve ter lazy load
- Preload excessivo: Preload de muitos recursos compete por banda
- Esquecer de testar em conexões lentas: Seus usuários reais podem ter 3G
- Não monitorar após mudanças: Dados CrUX levam ~28 dias para refletir mudanças
- Carregar tudo async: Alguns recursos precisam ser síncronos para performance
- Ignorar third-party scripts: Widgets, analytics e pixels frequentemente causam problemas
Perguntas Frequentes
O que são Core Web Vitals?
Core Web Vitals são um conjunto de métricas do Google que medem a experiência do usuário em termos de carregamento (LCP), interatividade (INP) e estabilidade visual (CLS). São fatores de ranking desde 2021.
Quais são as 3 métricas dos Core Web Vitals?
As 3 métricas são: LCP (Largest Contentful Paint) que mede velocidade de carregamento, INP (Interaction to Next Paint) que mede responsividade, e CLS (Cumulative Layout Shift) que mede estabilidade visual.
Core Web Vitals afetam o ranking no Google?
Sim. Core Web Vitals são um fator de ranking oficial do Google desde junho de 2021. Sites com boas métricas têm vantagem, especialmente em buscas mobile e quando competem com sites de conteúdo similar.
Como medir Core Web Vitals?
Use o Google PageSpeed Insights, Google Search Console (relatório Core Web Vitals), Lighthouse, ou a extensão Web Vitals do Chrome. O Search Console mostra dados reais de usuários.
O que substituiu o FID?
O INP (Interaction to Next Paint) substituiu oficialmente o FID (First Input Delay) em março de 2024. O INP é mais abrangente porque mede todas as interações, não apenas a primeira.
Quanto tempo leva para ver melhorias nos dados CrUX?
Os dados do Chrome User Experience Report (CrUX) são atualizados aproximadamente a cada 28 dias. Após fazer otimizações, aguarde esse período para ver os resultados refletidos nos dados de campo.
Em Resumo
Core Web Vitals não são apenas métricas técnicas — são indicadores de qualidade que afetam diretamente a experiência dos seus usuários e seu posicionamento no Google.
A boa notícia é que a maioria dos problemas tem soluções conhecidas. Com as otimizações certas, é possível atingir as metas do Google para todas as três métricas.
Comece pelo básico: otimize imagens, defina dimensões, reduza JavaScript desnecessário. Depois, vá refinando com base nos dados reais do Search Console.
Precisa de Ajuda com Core Web Vitals?
A AUDITSEO oferece auditorias técnicas completas e implementação de otimizações de performance. Vamos analisar seu site.
Solicitar Auditoria