Guia Completo de Core Web Vitals 2026

"O site estava muito lento, entao sai"

53% dos usuarios abandonam a pagina se o carregamento levar mais de 3 segundos. O Google introduziu o Core Web Vitals para refletir essa experiencia do usuario nos rankings.

Em 2026, Core Web Vitals e um fator de ranking chave para SEO movel.

O que e Core Web Vitals?

Core Web Vitals sao 3 metricas principais que medem a experiencia do usuario.

Metricas 2026

Metrica	Mede	Bom	Precisa Melhorar	Ruim
LCP	Velocidade de carregamento	≤2.5s	≤4s	>4s
INP	Resposta de interacao	≤200ms	≤500ms	>500ms
CLS	Estabilidade visual	≤0.1	≤0.25	>0.25

Mudanca de Metrica (2024)

FID (First Input Delay) → INP (Interaction to Next Paint)

FID: Apenas media a primeira entrada
INP: Mede a responsividade de todas as interacoes (mais abrangente)

LCP (Largest Contentful Paint)

Definicao

O tempo que leva para o maior elemento de conteudo da pagina ser renderizado na tela

Elementos Medidos

Elemento	Exemplo
`<img>`	Imagem hero
poster de `<video>`	Miniatura do video
CSS `background-image`	Imagem de fundo
Blocos de texto	`<h1>`, `<p>`, etc.

Metodos de Otimizacao

1. Otimizacao de Imagens

<!-- ❌ Lento -->
<img src="hero.png" alt="Hero">

<!-- ✅ Otimizado -->
<img
  src="hero.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Hero"
  loading="eager"
  fetchpriority="high"
>

2. Tempo de Resposta do Servidor (TTFB)

Meta: TTFB < 200ms

Metodos de melhoria:
- Usar CDN
- Cache no lado do servidor
- Otimizacao de consultas ao banco de dados
- HTTP/2 ou HTTP/3

3. Remover Recursos que Bloqueiam Renderizacao

<!-- ❌ Bloqueia renderizacao -->
<link rel="stylesheet" href="styles.css">
<script src="app.js"></script>

<!-- ✅ Otimizado -->
<link rel="stylesheet" href="critical.css">
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<script src="app.js" defer></script>

4. CSS Critico Inline

<head>
  <style>
    /* Apenas CSS necessario para primeira tela */
    .hero { ... }
    .header { ... }
  </style>
  <link rel="preload" href="full.css" as="style">
</head>

5. Dicas de Preload

<head>
  <!-- Precarregar imagem LCP -->
  <link rel="preload" href="hero.webp" as="image" fetchpriority="high">

  <!-- Precarregar fontes web -->
  <link rel="preload" href="font.woff2" as="font" crossorigin>
</head>

INP (Interaction to Next Paint)

Definicao

O tempo desde a interacao do usuario (clique, toque, tecla pressionada) ate a proxima atualizacao de tela

Diferenca do FID

FID	INP
Apenas primeira entrada	Todas as interacoes
Apenas atraso de entrada	Tempo total de resposta
Descontinuado 2024	Substituido Marco 2024

O que e Medido

Cliques (mouse, toque)
Teclas pressionadas
Toques (movel)

Metodos de Otimizacao

1. Prevenir Bloqueio da Thread Principal

// ❌ Bloqueia thread principal
function heavyTask() {
  for (let i = 0; i < 1000000; i++) {
    // Calculo pesado
  }
}

// ✅ Dividir em chunks
async function heavyTaskChunked() {
  const chunks = splitIntoChunks(data, 1000);
  for (const chunk of chunks) {
    processChunk(chunk);
    await new Promise(r => setTimeout(r, 0)); // Ceder
  }
}

2. Debounce/Throttle

// ❌ Executa toda vez
input.addEventListener('input', search);

// ✅ Debounce
input.addEventListener('input', debounce(search, 300));

3. Usar Web Workers

// Thread principal
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => updateUI(e.data);

// worker.js
self.onmessage = (e) => {
  const result = heavyComputation(e.data);
  self.postMessage(result);
};

4. Otimizar Manipuladores de Eventos

// ❌ Manipulador pesado
button.onclick = () => {
  computeData();      // Pesado
  updateDOM();        // Manipulacao DOM
  sendAnalytics();    // Rede
};

// ✅ Separacao assincrona
button.onclick = async () => {
  requestAnimationFrame(() => {
    updateDOM();      // Atualizacao rapida de UI primeiro
  });

  await computeDataAsync();
  sendAnalytics();    // Depois
};

5. Reduzir Tamanho de Scripts

// Code splitting
const Modal = React.lazy(() => import('./Modal'));

// Tree shaking
import { specific } from 'library'; // Evitar import completo

CLS (Cumulative Layout Shift)

Definicao

Pontuacao cumulativa de mudancas de layout inesperadas durante o carregamento da pagina

Cenario do Problema

Usuario: Prestes a clicar em um botao
Anuncio carrega: Layout muda
Resultado: Clica no botao errado

Metodos de Otimizacao

1. Especificar Dimensoes de Imagem/Video

<!-- ❌ Sem dimensoes (causa CLS) -->
<img src="photo.jpg" alt="Photo">

<!-- ✅ Especificar dimensoes -->
<img src="photo.jpg" alt="Photo" width="800" height="600">

<!-- ✅ Usar aspect-ratio -->
<img src="photo.jpg" alt="Photo" style="aspect-ratio: 4/3; width: 100%;">

2. Reservar Espaco para Anuncios/Embeds

/* Pre-reservar espaco para anuncios */
.ad-slot {
  min-height: 250px;
  background: #f0f0f0;
}

/* Ou usar aspect-ratio */
.video-embed {
  aspect-ratio: 16/9;
  width: 100%;
}

3. Otimizacao de Fontes Web

/* ❌ Causa FOUT/FOIT */
@font-face {
  font-family: 'Custom';
  src: url('font.woff2');
}

/* ✅ Usar font-display */
@font-face {
  font-family: 'Custom';
  src: url('font.woff2');
  font-display: swap; /* ou optional */
}

<!-- Precarregar fontes -->
<link rel="preload" href="font.woff2" as="font" crossorigin>

4. Lidar com Conteudo Dinamico

// ❌ Insercao repentina
container.innerHTML = newContent;

// ✅ Reservar espaco antes de inserir
container.style.minHeight = '200px';
container.innerHTML = newContent;

/* Ou definir min-height no CSS */
.dynamic-content {
  min-height: 200px;
}

5. Usar Animacoes Transform

/* ❌ Dispara layout */
.element {
  animation: slide 0.3s;
}
@keyframes slide {
  from { top: -100px; }
  to { top: 0; }
}

/* ✅ Usar transform (sem mudanca de layout) */
@keyframes slide {
  from { transform: translateY(-100px); }
  to { transform: translateY(0); }
}

Ferramentas de Medicao

Dados de Campo (Usuarios Reais)

Ferramenta	Fonte de Dados	Caracteristicas
Chrome UX Report	Usuarios do Chrome	Agregacao de 28 dias
Search Console	Baseado em CrUX	Oficial do Google
PageSpeed Insights	CrUX + Lighthouse	Analise em tempo real

Dados de Laboratorio (Simulacao)

Ferramenta	Proposito
Lighthouse	Integrado no Chrome DevTools
WebPageTest	Analise detalhada, testes comparativos
GTmetrix	Relatorios visuais

Chrome DevTools

1. F12 (Ferramentas de Desenvolvedor)
2. Aba Performance
3. Record → Atualizar pagina
4. Verificar secao Web Vitals

Otimizacao por Framework

Next.js

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
  experimental: {
    optimizeCss: true,
  },
};

// Componente
import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1200}
      height={600}
      priority // Imagem LCP
      placeholder="blur"
    />
  );
}

React

// Code splitting
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

// Suspense
<Suspense fallback={<Skeleton />}>
  <HeavyComponent />
</Suspense>

JavaScript Vanilla

<!-- Carregamento de scripts -->
<script src="critical.js"></script>
<script src="app.js" defer></script>
<script src="analytics.js" async></script>

<!-- Carregamento lazy de imagens -->
<img src="below-fold.jpg" loading="lazy" alt="Below fold">

Prioridade de Melhoria

Por Impacto

Posicao	Item de Otimizacao	Efeito
1	Otimizacao de imagem LCP	LCP ↓
2	Remover JS que bloqueia renderizacao	LCP, INP ↓
3	Especificar dimensoes de imagem/embed	CLS ↓
4	Usar CDN	LCP ↓
5	Otimizacao de fontes web	CLS ↓
6	Divisao de bundle JS	INP ↓

Ganhos Rapidos

<!-- 1. Precarregar imagem LCP -->
<link rel="preload" href="hero.webp" as="image">

<!-- 2. Especificar dimensoes de imagem -->
<img width="800" height="600" ...>

<!-- 3. JS defer -->
<script src="app.js" defer></script>

Perguntas Frequentes

Q1: Quanto o Core Web Vitals afeta o ranking?

A: E um fator de ranking direto, mas nao mais importante que a qualidade do conteudo. Desempenha papel decisivo quando a qualidade do conteudo e similar entre paginas concorrentes.

Q2: Por que as pontuacoes movel e desktop sao diferentes?

A: O Google usa principalmente dados moveis. Priorize a otimizacao movel.

Q3: Por que mostra "Sem dados"?

A: Nao ha dados de trafego suficientes no Chrome UX Report. O site pode ter pouco trafego ou ser novo.

Q4: Qual metrica devo melhorar primeiro?

A: Geralmente:

LCP - Melhoria mais perceptivel
CLS - Reduz frustracao do usuario
INP - Importante para sites com muita interacao

Q5: E se scripts de terceiros forem o problema?

Remover scripts desnecessarios
Usar atributos async ou defer
Usar bibliotecas Web Worker como Partytown

Lista de Verificacao

Otimizacao LCP

Precarregar imagem LCP
Otimizacao de imagem (WebP/AVIF)
Remover recursos que bloqueiam renderizacao
TTFB < 200ms
Usar CDN

Otimizacao INP

Dividir chunks JS pesados
Aplicar debounce/throttle
Remover JS desnecessario
Limpar scripts de terceiros

Otimizacao CLS

Especificar dimensoes de imagem/video
Reservar espaco para anuncios
Configurar font-display
Reservar espaco para conteudo dinamico

Conclusao

Essenciais do Core Web Vitals:

LCP ≤ 2.5s: Renderizar maior conteudo rapidamente
INP ≤ 200ms: Responder instantaneamente a interacoes
CLS ≤ 0.1: Sem mudancas de layout

Otimizacao movel e a chave.

Ferramentas Relacionadas

Ferramenta	Proposito
Analisador PageSpeed	Medir Core Web Vitals
Otimizador de Imagens	Conversao WebP
Gerador de Meta Tags	Meta tags SEO

Guia Completo de Core Web Vitals 2026

O que e Core Web Vitals?

Metricas 2026

Mudanca de Metrica (2024)

LCP (Largest Contentful Paint)

Definicao

Elementos Medidos

Metodos de Otimizacao

1. Otimizacao de Imagens

2. Tempo de Resposta do Servidor (TTFB)

3. Remover Recursos que Bloqueiam Renderizacao

4. CSS Critico Inline

5. Dicas de Preload

INP (Interaction to Next Paint)

Definicao

Diferenca do FID

O que e Medido

Metodos de Otimizacao

1. Prevenir Bloqueio da Thread Principal

2. Debounce/Throttle

3. Usar Web Workers

4. Otimizar Manipuladores de Eventos

5. Reduzir Tamanho de Scripts

CLS (Cumulative Layout Shift)

Definicao

Cenario do Problema

Metodos de Otimizacao

1. Especificar Dimensoes de Imagem/Video

2. Reservar Espaco para Anuncios/Embeds

3. Otimizacao de Fontes Web

4. Lidar com Conteudo Dinamico

5. Usar Animacoes Transform

Ferramentas de Medicao

Dados de Campo (Usuarios Reais)

Dados de Laboratorio (Simulacao)

Chrome DevTools

Otimizacao por Framework

Next.js

React

JavaScript Vanilla

Prioridade de Melhoria

Por Impacto

Ganhos Rapidos

Perguntas Frequentes

Q1: Quanto o Core Web Vitals afeta o ranking?

Q2: Por que as pontuacoes movel e desktop sao diferentes?

Q3: Por que mostra "Sem dados"?

Q4: Qual metrica devo melhorar primeiro?

Q5: E se scripts de terceiros forem o problema?

Lista de Verificacao

Otimizacao LCP

Otimizacao INP

Otimizacao CLS

Conclusao

Sobre o Autor

Toolypet Team