?>

Core Web Vitals explicados: LCP, INP, CLS – Um guia completo para iniciantes (2026)

Core Web Vitals são o conjunto de métricas centradas no usuário do Google que medem a experiência real da página. Eles são fatores de rankeamento desde 2021, e em 2026 são mais importantes do que nunca – passá-los pode melhorar diretamente seus rankings de busca e taxas de conversão. Este guia explica cada métrica, como medi-los e exatamente como corrigir problemas comuns.

Por que Core Web Vitals são importantes (O argumento comercial)

• Páginas que passam nos Core Web Vitals têm 24% menos probabilidade de serem abandonadas.
• Uma melhoria de 0,5s no LCP pode aumentar as conversões em 12–15% (estudo de caso do Google).
• Core Web Vitals ruins são um critério de desempate – se duas páginas têm relevância semelhante, a página mais rápida e estável rankeia melhor.

Se o seu site falhar em qualquer uma das três métricas, você está deixando dinheiro e rankeamentos na mesa.

Os três Core Web Vitals – Análise detalhada

1. LCP (Largest Contentful Paint) – Velocidade de carregamento

O que mede: O tempo que leva para o maior elemento visível (imagem principal, título, vídeo) ser renderizado. Bom: abaixo de 2,5 segundos. Ruim: acima de 4 segundos.

Por que é importante: Os usuários percebem a velocidade com base em quando o conteúdo principal aparece. Um LCP lento parece um site quebrado.

Causas comuns de LCP ruim:

• Imagens principais grandes (> 200KB).
• Tempo de resposta lento do servidor (TTFB > 600ms).
• CSS ou JavaScript que bloqueiam a renderização.
• Renderização no lado do cliente (React/Vue) que atrasa a pintura.

2. INP (Interaction to Next Paint) – Capacidade de resposta

O que mede: O tempo entre uma interação do usuário (clique, toque, pressionamento de tecla) e a próxima atualização visual. Bom: abaixo de 200 milissegundos. Substituiu o FID em 2024.

Por que é importante: Um INP lento faz seu site parecer lento. O usuário clica em um botão e nada acontece – ele presume que está quebrado.

Causas comuns de INP ruim:

• Tarefas JavaScript longas bloqueando a thread principal (> 50ms).
• Manipuladores de eventos pesados em cada interação.
• Scripts de terceiros (analytics, widgets de chat) sendo executados na interação.

3. CLS (Cumulative Layout Shift) – Estabilidade visual

O que mede: A quantidade de mudança inesperada de layout (movimento) dos elementos visíveis. Bom: abaixo de 0,1. Ruim: acima de 0,25.

Por que é importante: Conteúdo que se move faz os usuários perderem o lugar, clicarem acidentalmente em anúncios ou ficarem frustrados. É uma falha direta da experiência do usuário.

Causas comuns de CLS ruim:

• Imagens ou vídeos sem `width` e `height` explícitas.
• Fontes que carregam tarde e trocam ou deslocam o texto.
• Conteúdo injetado dinamicamente (anúncios, banners) que empurra o conteúdo existente para baixo.

Como medir os Core Web Vitals do seu site

• Dados de campo (usuários reais, determinam o rankeamento): Google Search Console → relatório Core Web Vitals. Também CrUX (Chrome User Experience Report).
• Dados de laboratório (simulados, para depuração): PageSpeed Insights, Lighthouse no DevTools, WebPageTest.

Concentre-se nos dados de campo para o impacto no rankeamento, mas use os dados de laboratório para encontrar e corrigir problemas.

Corrigindo LCP ruim – Passo a passo

1. Otimize as imagens principais

Converta para WebP, comprima com ferramentas como Squoosh ou ImageOptim. Use `srcset` para servir imagens de tamanho apropriado por dispositivo.

<code>&lt;img src="hero-800.webp" srcset="hero-400.webp 400w, hero-800.webp 800w" sizes="(max-width: 600px) 400px, 800px" width="800" height="500" fetchpriority="high" alt="Hero"&gt;</code>

2. Pré-carregue o elemento LCP

<code>&lt;link rel="preload" as="image" href="hero.webp" fetchpriority="high"&gt;</code>

3. Melhore o TTFB (Time to First Byte)

• Use um VPS em vez de hospedagem compartilhada.
• Ative PHP‑FPM com OPcache.
• Implemente indexação de banco de dados e cache (Redis ou Memcached).
• Considere uma CDN (Cloudflare, Bunny.net) para distribuição global.

4. Elimine recursos que bloqueiam a renderização

Incorpore CSS crítico inline, adie CSS não crítico e adicione `defer` ou `async` aos arquivos JavaScript.

<code>&lt;style&gt; /* CSS crítico */ &lt;/style&gt;<br>&lt;link rel="preload" href="full.css" as="style" onload="this.rel='stylesheet'"&gt;<br>&lt;script defer src="analytics.js"&gt;&lt;/script&gt;</code>

Corrigindo INP ruim – Análise aprofundada da capacidade de resposta

1. Divida tarefas JavaScript longas

<code>function heavyTask() {<br>  let i = 0;<br>  function chunk() {<br>    const start = performance.now();<br>    while (i < items.length && performance.now() - start < 5) {<br>      process(items[i]);<br>      i++;<br>    }<br>    if (i < items.length) setTimeout(chunk, 0);<br>  }<br>  chunk();<br>}</code>

2. Otimize os manipuladores de eventos

<code>addEventListener('scroll', () => { ... }, { passive: true });</code>

3. Remova ou adie scripts de terceiros

<code>document.getElementById('chat-trigger').addEventListener('click', () => {<br>  const script = document.createElement('script');<br>  script.src = 'https://chatwidget.com/script.js';<br>  document.head.appendChild(script);<br>});</code>

Corrigindo CLS ruim – Elimine mudanças de layout

1. Adicione largura/altura explícita a todas as mídias

<code>&lt;img src="image.webp" width="800" height="500"&gt;</code>

2. Reserve espaço para fontes

<code>@font-face {<br>  font-family: 'Inter';<br>  font-display: swap;<br>  /* ... */<br>}</code>

3. Evite inserir conteúdo acima do conteúdo existente

Se você precisar mostrar um banner ou notificação, reserve espaço usando um div placeholder com altura fixa.

WordPress vs PHP personalizado para Core Web Vitals

Sites PHP personalizados consistentemente obtêm pontuações mais altas porque não há inchaço de plugins, nenhuma sobrecarga de temas e nenhum JavaScript forçado. Uma instalação padrão do WordPress frequentemente falha no CLS devido à barra de administração deslocando o conteúdo para usuários logados (mesmo que os visitantes não a vejam). Com PHP personalizado, você controla cada byte. Você pode incorporar CSS crítico inline, pré-carregar exatamente o que é necessário e evitar completamente mudanças de layout.

Caso de estudo real: De reprovado a aprovado em 7 dias

Uma empresa de serviços domésticos tinha um site WordPress com Core Web Vitals ruins: LCP 4,2s, INP 540ms, CLS 0,29. Migramos o front‑end para um site estático PHP personalizado (mantendo o backend existente para reservas).

Ações tomadas:

• Imagem principal convertida para WebP e pré-carregada.
• CSS crítico incorporado inline para a seção principal e navegação.
• Todo JavaScript movido para `defer` ou carregado após a interação do usuário.
• Dimensões explícitas definidas em todas as imagens e iframes.

Resultados após 1 semana (dados de campo do GSC):

• LCP: 4,2s → 1,1s (aprovado).
• INP: 540ms → 98ms (aprovado).
• CLS: 0,29 → 0,02 (aprovado).
• Tráfego orgânico: +34% após 60 dias (devido a melhorias no rankeamento).

O cliente agora não paga taxas contínuas por plugins e possui o código leve e rápido.

Plano de ação passo a passo para corrigir seus Core Web Vitals

1. Meça o estado atual – Execute o PageSpeed Insights. Anote LCP, INP, CLS para celular.
2. Corrija problemas fáceis – Comprima imagens, ative o cache, use uma CDN.
3. Se LCP > 2,5s: Pré-carregue a imagem principal, incorpore CSS crítico inline, melhore a resposta do servidor.
4. Se INP > 200ms: Divida tarefas JS longas, adie scripts de terceiros, otimize manipuladores de eventos.
5. Se CLS > 0,1: Adicione dimensões a todas as mídias, use `font-display: swap`, evite inserir conteúdo dinâmico acima da dobra.
6. Teste novamente e monitore – Use o relatório Core Web Vitals do Google Search Console para acompanhar dados reais de usuários ao longo do tempo.

Se você está no WordPress, considere mudar para um tema leve (GeneratePress, Kadence), remover plugins desnecessários e usar um plugin como Perfmatters ou FlyingPress. Mas a solução definitiva é um site PHP personalizado construído para desempenho.

Pronto para passar nos Core Web Vitals e melhorar seus rankeamentos?

Construo sites PHP personalizados que obtêm 100 no Lighthouse e passam em todos os Core Web Vitals imediatamente. Você paga uma tarifa única – sem assinaturas, sem custos ocultos. Também corrigirei os Core Web Vitals do seu site existente se você não estiver pronto para migrar.

Vamos conversar sobre seu site – fornecerei uma auditoria gratuita dos Core Web Vitals.

Dados provenientes de projetos reais de clientes e estudos de caso publicados pelo Google. Os resultados individuais podem variar.