Core Web Vitals em 2026: Guia Prático para Otimizar LCP, INP e CLS
Tutorial completo e atualizado para entender e melhorar as métricas Core Web Vitals do Google em 2026, com exemplos reais de código e ferramentas gratuitas.
Categoria: SEO Técnico · Por Equipe Domain Hunter · Publicado em 09/05/2026 · 14 min de leitura
# Core Web Vitals em 2026: Guia Prático para Otimizar LCP, INP e CLS Se você já abriu o **PageSpeed Insights** e viu aquele relatório vermelho cheio de siglas, sabe a sensação de não saber por onde começar. Eu já passei por isso. Em 2026, com a substituição do FID pelo **INP (Interaction to Next Paint)**, o cenário ficou ainda mais exigente — mas também mais justo, porque agora medimos a experiência real do usuário, não apenas o primeiro clique. Neste guia, vou te mostrar **passo a passo** como diagnosticar e corrigir cada uma das três métricas principais: LCP, INP e CLS. Sem teoria vazia. Vamos direto ao código e às ferramentas. > 💡 **Para quem é este artigo?** Donos de sites, devs front-end e profissionais de SEO que querem ranquear melhor sem depender de adivinhação. ## O que mudou em 2026 O Google consolidou o INP como métrica oficial em março de 2024, e desde então o impacto no ranking é mensurável. Sites com INP acima de 500ms estão perdendo posições para concorrentes mais leves — especialmente em mobile. | Métrica | Bom | Precisa melhorar | Ruim | |---------|-----|------------------|------| | **LCP** (Largest Contentful Paint) | ≤ 2,5s | 2,5s – 4s | > 4s | | **INP** (Interaction to Next Paint) | ≤ 200ms | 200ms – 500ms | > 500ms | | **CLS** (Cumulative Layout Shift) | ≤ 0,1 | 0,1 – 0,25 | > 0,25 | Fonte: [web.dev/vitals](https://web.dev/articles/vitals). ## Parte 1 — Otimizando o LCP O LCP mede quanto tempo o **maior elemento visível** demora para aparecer. Geralmente é uma imagem hero, um vídeo ou um bloco de texto grande. ### Passo 1: Identifique o elemento LCP Abra o Chrome DevTools → aba **Performance** → grave um carregamento. O elemento LCP aparece marcado em amarelo na timeline. ### Passo 2: Pré-carregue recursos críticos ```html ``` O atributo `fetchpriority="high"` é suportado em todos os navegadores modernos desde 2023 e pode reduzir o LCP em até 30% sozinho. ### Passo 3: Use formatos modernos de imagem Se você ainda serve JPEG, está perdendo dinheiro. Migre para **AVIF** (com fallback WebP). Veja nosso tutorial de [otimização de imagens com AVIF e WebP](/blog/otimizacao-imagens-avif-webp-srcset-lazy-loading) para a configuração completa. ### Passo 4: Servidor rápido = LCP rápido Hospedagens compartilhadas baratas costumam entregar **TTFB (Time to First Byte)** acima de 800ms. Isso destrói qualquer otimização de front-end. Considere CDNs como **Cloudflare** ou **Bunny.net**. 📺 Recomendo este vídeo da Google Chrome Developers: [Optimize LCP](https://www.youtube.com/watch?v=tvJ0uKKzUDo). ## Parte 2 — Domando o INP O INP é a métrica mais difícil de otimizar porque depende do **JavaScript que roda na thread principal**. Cada clique, cada digitação, cada toque é medido. ### Diagnóstico rápido Use a extensão [Web Vitals do Chrome](https://chromewebstore.google.com/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma). Ela mostra o INP em tempo real enquanto você navega. ### Estratégias de otimização 1. **Quebre tarefas longas** com `scheduler.yield()` ou `setTimeout(fn, 0)`. 2. **Adie scripts de terceiros** (analytics, chats, pixels) com `defer` ou carregue após interação. 3. **Use Web Workers** para cálculos pesados. 4. **Evite `document.write`** e bibliotecas que bloqueiam a renderização. Exemplo prático com `scheduler.yield()`: ```javascript async function processarLista(itens) { for (const item of itens) { processar(item); if (navigator.scheduling?.isInputPending()) { await scheduler.yield(); } } } ``` Esse padrão permite que o navegador interrompa a execução para responder a cliques, mantendo o INP baixo. ## Parte 3 — Eliminando o CLS CLS é layout que "pula" durante o carregamento. Causas mais comuns: - Imagens sem `width` e `height`. - Fontes web que carregam depois e mudam o tamanho do texto. - Banners, ads ou cookies que aparecem empurrando conteúdo. ### Solução para imagens ```html
```
O navegador reserva o espaço antes mesmo da imagem carregar.
### Solução para fontes
```css
@font-face {
font-family: 'Inter';
src: url('/fonts/inter.woff2') format('woff2');
font-display: swap;
size-adjust: 100%;
}
```
Combine com `` para fontes críticas.
### Solução para anúncios
Reserve o espaço com `min-height` no container do anúncio. Nunca deixe o slot colapsar.
## Ferramentas que uso no dia a dia
- **[PageSpeed Insights](https://pagespeed.web.dev/)** — dados de campo (CrUX) + lab.
- **[WebPageTest](https://www.webpagetest.org/)** — análise de waterfall detalhada.
- **Search Console** → relatório de Core Web Vitals (dados reais de usuários).
- **Chrome DevTools** → Performance e Lighthouse.
## Checklist de auditoria (use em qualquer site)
- [ ] LCP em mobile abaixo de 2,5s
- [ ] Imagem hero pré-carregada com `fetchpriority="high"`
- [ ] Imagens em AVIF/WebP com `width` e `height`
- [ ] Fontes com `font-display: swap` e preload
- [ ] Scripts de terceiros com `defer` ou lazy
- [ ] Sem `document.write` no código
- [ ] Containers de ads/banners com altura reservada
- [ ] CDN ativo com cache-control configurado
## Conexão com domínios expirados
Por que falar de Core Web Vitals num blog sobre domínios expirados? Simples: comprar um domínio com autoridade não adianta se o seu site novo carrega em 8 segundos. O Google **rebaixa** sites lentos mesmo com bons backlinks.
Se você está montando um projeto novo em cima de um domínio resgatado, leia também:
- [Como construir autoridade tópica](/blog/topical-authority-como-construir-autoridade-tematica)
- [SEO técnico: estrutura silo](/blog/seo-tecnico-estrutura-silo-organizar-arquitetura-site)
- [Otimização de crawl budget](/blog/crawl-budget-como-otimizar-rastreamento-googlebot)
## Conclusão
Performance não é luxo, é fundação. Em 2026, com IA gerando conteúdo em massa, **a experiência técnica** se tornou o grande diferencial competitivo. Sites rápidos convertem mais, ranqueiam melhor e mantêm usuários por mais tempo.
Comece pela métrica que está pior no seu Search Console. Aplique uma correção por semana. Em 90 dias, você verá a diferença no tráfego orgânico.
E se você está à caça do próximo domínio premium, [comece um scan agora no Domain Hunter](/dashboard) — encontramos domínios expirados de canais reais do YouTube, prontos para receber seu projeto otimizado.
## Perguntas frequentes
**O que substituiu o FID nas métricas de Core Web Vitals?**
O INP (Interaction to Next Paint), consolidado como métrica oficial pelo Google em março de 2024. Ele mede a responsividade real durante toda a visita, não só a primeira interação.
**Comprar um domínio com boa autoridade compensa se o site for lento?**
Não totalmente. O Google rebaixa sites lentos mesmo quando eles têm bons backlinks, então performance técnica continua sendo fundamental independente do histórico do domínio.
**Qual das três métricas (LCP, INP, CLS) costuma ser mais difícil de otimizar?**
O INP, porque depende diretamente do JavaScript rodando na thread principal. Exige técnicas mais avançadas, como quebrar tarefas longas e usar Web Workers, ao contrário do CLS, que se resolve principalmente com atributos HTML.
**fetchpriority="high" funciona em todos os navegadores?**
Sim, é suportado nos navegadores modernos desde 2023, e pode reduzir o LCP em até 30% quando aplicado corretamente na imagem hero.
Tags: core web vitals, performance, seo técnico, lcp, inp