Core Web Vitals Explicado

Core Web Vitals são as métricas padronizadas do Google para medir a experiência do usuário em páginas web. As três métricas—Largest Contentful Paint (LCP), Interaction to Next Paint (INP) e Cumulative Layout Shift (CLS)—quantificam velocidade de carregamento, interatividade e estabilidade visual, influenciando diretamente o ranqueamento de busca desde 2021.

Última atualização: 2026-06-03

Como Funcionam os Core Web Vitals

Core Web Vitals medem a experiência real do usuário através de dados de campo coletados de carregamentos reais de páginas (Chrome User Experience Report). Diferente de testes sintéticos de laboratório, essas métricas refletem o que os usuários realmente experimentam, tornando-as críticas para SEO e satisfação do usuário.

┌─────────────────────────────────────────────────────────────────┐
│                    Framework Core Web Vitals                     │
│                                                                  │
│   ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐  │
│   │      LCP        │  │      INP        │  │      CLS        │  │
│   │   Carregamento  │  │ Interatividade  │  │   Estabilidade  │  │
│   │                 │  │                 │  │                 │  │
│   │ "Quão rápido    │  │ "Quão rápido    │  │ "Os elementos   │  │
│   │  aparece o      │  │  a página       │  │  pulam pela     │  │
│   │  conteúdo?"     │  │  responde?"     │  │  tela?"         │  │
│   └────────┬────────┘  └────────┬────────┘  └────────┬────────┘  │
│            │                    │                    │           │
│            ▼                    ▼                    ▼           │
│   ┌─────────────────────────────────────────────────────────────┐│
│   │              Fator de Ranqueamento Google                    ││
│   │         (Sinal de Experiência de Página desde Mai 2021)      ││
│   └─────────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────────┘

As Três Métricas Principais

1. Largest Contentful Paint (LCP)

Mede a performance de carregamento rastreando quando o maior elemento de conteúdo visível renderiza no viewport.

Classificação	Limite	Percepção do Usuário
Bom	≤2,5 segundos	Conteúdo parece rápido
Precisa melhorar	2,5-4 segundos	Atraso perceptível
Ruim	>4 segundos	Espera frustrante

O que conta como “maior conteúdo”:

Elementos <img>
Elementos <image> dentro de SVG
Elementos <video> (imagem poster ou primeiro frame)
Elementos com background-image carregado via url()
Elementos block-level contendo nós de texto

Elementos LCP comuns:

<!-- Imagem hero (candidato típico de LCP) -->
<img src="hero.jpg" alt="Vitrine do produto">

<!-- Seção hero com background -->
<div class="hero" style="background-image: url('hero-bg.jpg')">
  <h1>Bem-vindo à Nossa Loja</h1>
</div>

<!-- Poster de vídeo -->
<video poster="video-preview.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

2. Interaction to Next Paint (INP)

Mede a interatividade rastreando a latência de todas as interações de clique, toque e teclado durante todo o ciclo de vida da página. INP substituiu First Input Delay (FID) como Core Web Vital em março de 2024.

Classificação	Limite	Percepção do Usuário
Bom	≤200 milissegundos	Parece responsivo
Precisa melhorar	200-500 milissegundos	Leve atraso
Ruim	>500 milissegundos	Lento, sem resposta

Como INP é calculado:

Sessão de Página:
  Clique #1: 120ms latência
  Clique #2: 80ms latência
  Clique #3: 450ms latência ← Maior interação
  Toque #4: 95ms latência

INP = 450ms (ou percentil 99 para alta contagem de interações)

INP vs FID:

Aspecto	FID (Descontinuado)	INP (Atual)
Escopo	Primeira interação apenas	Todas as interações
Medição	Valor único	Pior caso ou percentil 99
Captura	Primeira impressão	Sessão inteira
Precisão	Limitada	Abrangente

3. Cumulative Layout Shift (CLS)

Mede a estabilidade visual quantificando movimentos inesperados de layout que empurram conteúdo durante o carregamento.

Classificação	Limite	Percepção do Usuário
Bom	≤0,1	Estável, previsível
Precisa melhorar	0,1-0,25	Algum conteúdo pula
Ruim	>0,25	Cliques errados frustrantes

Como CLS é calculado:

Fração de Impacto × Fração de Distância = Pontuação de Layout Shift

Exemplo:
  Elemento move 200px para baixo (altura viewport: 800px)
  Fração de Impacto: 0,25 (área ocupada pelo elemento)
  Fração de Distância: 0,25 (200/800)
  Pontuação do Shift: 0,0625

CLS Total = Soma de todas as pontuações de shift inesperados

Causas comuns de CLS:

<!-- Imagens sem dimensões -->
<img src="produto.jpg" alt="Produto">  <!-- Ruim: causa reflow -->

<!-- Correto: dimensões reservadas -->
<img src="produto.jpg" alt="Produto" width="400" height="300">

<!-- Containers de anúncios sem espaço reservado -->
<div id="ad-slot"></div>  <!-- Ruim: anúncio carrega, empurra conteúdo -->

<!-- Correto: reservar espaço -->
<div id="ad-slot" style="min-height: 250px;"></div>

Resumo dos Limites das Métricas

Métrica	Bom	Precisa Melhorar	Ruim	Unidade
LCP	≤2,5	2,5-4	>4	segundos
INP	≤200	200-500	>500	milissegundos
CLS	≤0,1	0,1-0,25	>0,25	pontuação

Limite de aprovação: Pelo menos 75% dos carregamentos de página devem atingir “Bom” em todas as três métricas para passar na avaliação de Core Web Vitals.

Como Medir Core Web Vitals

Dados de Campo (Monitoramento de Usuários Reais)

Chrome User Experience Report (CrUX):

// PageSpeed Insights API
fetch('https://www.googleapis.com/pagespeedonline/v5/runPagespeed?' +
  'url=https://exemplo.com&category=performance')
  .then(response => response.json())
  .then(data => {
    const lcp = data.lighthouseResult.audits['largest-contentful-paint'];
    const cls = data.lighthouseResult.audits['cumulative-layout-shift'];
    const inp = data.lighthouseResult.audits['interaction-to-next-paint'];
  });

Biblioteca web-vitals JavaScript:

import { onLCP, onINP, onCLS } from 'web-vitals';

onLCP(console.log);  // Registra valor LCP
onINP(console.log);  // Registra valor INP
onCLS(console.log);  // Registra valor CLS

// Enviar para analytics
function enviarParaAnalytics(metrica) {
  navigator.sendBeacon('/analytics', JSON.stringify({
    nome: metrica.name,
    valor: metrica.value,
    classificacao: metrica.rating,
    id: metrica.id
  }));
}

onLCP(enviarParaAnalytics);
onINP(enviarParaAnalytics);
onCLS(enviarParaAnalytics);

Dados de Laboratório (Testes Sintéticos)

Ferramenta	Caso de Uso
Lighthouse	Testes locais, integração CI/CD
PageSpeed Insights	Auditoria rápida de URL com dados de campo
WebPageTest	Testes sintéticos multi-localização
Chrome DevTools	Debug em tempo real

Lighthouse CLI:

# Executar auditoria Lighthouse
npx lighthouse https://exemplo.com \
  --only-categories=performance \
  --output=json \
  --output-path=./relatorio.json

Estratégias de Otimização

Otimização de LCP

1. Pré-carregar recursos críticos:

<head>
  <!-- Pré-carregar imagem LCP -->
  <link rel="preload" as="image" href="hero.webp">

  <!-- Pré-carregar CSS crítico -->
  <link rel="preload" as="style" href="critical.css">

  <!-- Pré-conectar a origens -->
  <link rel="preconnect" href="https://cdn.exemplo.com">
  <link rel="dns-prefetch" href="https://analytics.exemplo.com">
</head>

2. Usar CDN para entrega na borda:

Sem CDN: Usuário ──────────────────> Servidor de Origem (100-300ms RTT)
                                    [distância geográfica]

Com CDN: Usuário ───> Nó Edge (10-50ms) ───> Origem (se necessário)
                   [PoP mais próximo]

Otimização de INP

1. Dividir tarefas longas:

// Ruim: Tarefa longa bloqueante
function processarItens(itens) {
  itens.forEach(item => {
    // Computação pesada
    item.processar();
  });
}

// Bom: Processamento em chunks
async function processarItens(itens) {
  for (let i = 0; i < itens.length; i += 50) {
    const chunk = itens.slice(i, i + 50);
    chunk.forEach(item => item.processar());
    await new Promise(r => setTimeout(r, 0)); // Cedência à thread principal
  }
}

2. Usar web workers para computação pesada:

// Thread principal
const worker = new Worker('computar.js');

botao.addEventListener('click', () => {
  worker.postMessage({ dados: grandeDataset });
  // Thread principal permanece responsiva
});

Otimização de CLS

1. Reservar espaço para imagens:

/* Truque de aspect ratio */
img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Ou usar CSS para reservar espaço */
.container-imagem {
  width: 100%;
  padding-bottom: 56.25%; /* Aspect ratio 16:9 */
  background: #f0f0f0;
}

2. Prevenir pulos de troca de fonte:

@font-face {
  font-family: 'FonteCustom';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: optional; /* Não troca se carregar tarde demais */
}

Core Web Vitals e SEO

Impacto no Ranqueamento

Google usa Core Web Vitals como sinal de ranqueamento para resultados de busca mobile. Páginas que passam nas três métricas recebem um boost, enquanto páginas que falham podem ver visibilidade reduzida.

Composição do Sinal de Experiência de Página:

Core Web Vitals (LCP, INP, CLS)
Teste Mobile Friendly
HTTPS e Navegação Segura
Sem janelas intersticiais intrusivas

Problemas Comuns e Correções

Problemas de LCP

Problema	Correção	Impacto
Resposta lenta do servidor	CDN, caching, otimizar banco	-0,5 a -2s
JS/CSS bloqueando render	Async/defer, CSS crítico inline	-0,3 a -1s
Arquivos de imagem grandes	WebP/AVIF, imagens responsivas	-0,5 a -2s
Renderização client-side	SSR, SSG, streaming	-1 a -3s

Problemas de INP

Problema	Correção	Impacto
Tarefas JavaScript longas	Code splitting, web workers	-100 a -400ms
Handlers de evento pesados	Debounce, throttle, chunking	-50 a -200ms
Scripts de terceiros	Fachadas, lazy loading, remoção	-50 a -300ms

Problemas de CLS

Problema	Correção	Impacto
Imagens sem dimensões	Atributos width/height	-0,1 a -0,5
Inserção de conteúdo dinâmico	Reservar espaço, skeletons	-0,05 a -0,2
Web fonts	font-display: optional, preload	-0,05 a -0,15

FAQ

Qual a diferença entre LCP e tempo de carregamento da página? LCP mede quando o maior elemento de conteúdo renderiza, enquanto tempo de carregamento (onload) mede quando todos os recursos terminam de carregar. LCP reflete melhor a percepção do usuário de quando o conteúdo está utilizável.

Por que INP substituiu FID? FID media apenas a primeira interação, perdendo problemas subsequentes de responsividade. INP captura todas as interações durante toda a sessão, fornecendo um quadro completo da interatividade.

Core Web Vitals afetam rankings desktop? Sim. Originalmente apenas mobile, Core Web Vitals tornou-se fator de ranqueamento para resultados de busca desktop em 2022.

Quanto tráfego é necessário para dados do CrUX? Páginas precisam de aproximadamente 1.000 visitas mensais para aparecer no CrUX com dados de campo estatisticamente significativos. Sites com menos tráfego devem depender de testes de laboratório e RUM.

Posso passar nos Core Web Vitals sem CDN? Sim, mas é mais difícil. CDNs reduzem LCP significativamente ao servir assets estáticos de locais de borda próximos aos usuários, eliminando latência de ida-e-volta para servidores de origem.

Como Implementar na Azion

A rede global de borda da Azion otimiza Core Web Vitals servindo conteúdo de pontos de presença dentro de 50ms dos usuários mundialmente:

Melhoria de LCP: Cache de borda entrega assets estáticos com <50ms de latência vs. 100-300ms de origens centralizadas
Functions: Execute server-side rendering na borda para conteúdo dinâmico sem ida-e-volta à origem
Otimização de Imagens: Conversão automática WebP/AVIF e entrega de imagens responsivas
Suporte HTTP/3: Tempo reduzido de estabelecimento de conexão melhora todas as métricas

Veja: Edge Caching | Functions

Entre em nossa comunidade

Core Web Vitals Explicado

Entenda as três métricas Core Web Vitals do Google — LCP, INP e CLS — como medi-las e como otimizá-las para melhorar a experiência do usuário e o ranqueamento de busca.

Core Web Vitals Explicado

Como Funcionam os Core Web Vitals

As Três Métricas Principais

1. Largest Contentful Paint (LCP)

2. Interaction to Next Paint (INP)

3. Cumulative Layout Shift (CLS)

Resumo dos Limites das Métricas

Como Medir Core Web Vitals

Dados de Campo (Monitoramento de Usuários Reais)

Dados de Laboratório (Testes Sintéticos)

Estratégias de Otimização

Otimização de LCP

Otimização de INP

Otimização de CLS

Core Web Vitals e SEO

Impacto no Ranqueamento

Problemas Comuns e Correções

Problemas de LCP

Problemas de INP

Problemas de CLS

FAQ

Como Implementar na Azion

Inscreva-se na nossa Newsletter