INP e Core Web Vitals no WordPress: Diagnóstico e Correções

Desde março de 2024, o INP (Interaction to Next Paint) substituiu o FID como métrica de responsividade dos Core Web Vitals. Ele mede quanto tempo o site demora para reagir visualmente depois que alguém clica, toca ou digita. Em sites WordPress com tema pesado, construtor visual e vários plugins, o INP costuma ser a métrica mais difícil de passar.

Este guia mostra como diagnosticar o INP e as correções que mais funcionam no WordPress.

O que o INP mede e quais são as metas

O INP observa todas as interações durante a visita e registra uma das mais lentas (aproximadamente a pior, desconsiderando valores extremos em páginas com muitas interações). A meta é medida no percentil 75 dos visitantes reais:

Cada interação tem três partes: o atraso até o navegador começar a processar (input delay), o tempo do código que reage ao clique (processing) e o tempo para desenhar a tela de novo (presentation delay). A correção depende de qual parte está lenta.

Como diagnosticar

1. Dados reais: no Search Console, abra Experiência → Core Web Vitals e veja quais grupos de URLs têm INP ruim. No PageSpeed Insights, a seção de dados de campo mostra o INP do percentil 75.
2. Reproduzir no navegador: no Chrome DevTools, aba Performance, grave enquanto clica nos elementos suspeitos (menu, abas, acordeões, botões de formulário). Interações lentas aparecem destacadas, com as tarefas longas do JavaScript.
3. Extensão Web Vitals do Chrome: mostra o INP de cada interação em tempo real enquanto você navega.
4. Medir com visitantes reais: a biblioteca web-vitals pode enviar o INP ao GA4 como evento, com o elemento que causou a lentidão.

<script type="module">
import { onINP } from 'https://unpkg.com/web-vitals@4?module';
onINP(({ value, attribution }) => {
  gtag('event', 'inp', {
    value: Math.round(value),
    inp_target: attribution.interactionTarget
  });
});
</script>

Causas mais comuns no WordPress

• Construtores visuais que carregam scripts de animação, sliders e widgets em todas as páginas.
• Scripts de terceiros: chat, pixels de anúncio, mapas de calor, widgets de avaliação, vídeos incorporados.
• jQuery e plugins antigos com manipuladores de evento pesados em click e scroll.
• DOM muito grande: páginas com milhares de elementos demoram para redesenhar.
• Banners de cookies e pop-ups mal implementados, que travam a primeira interação.

Correções que mais funcionam

1. Remova o que não usa. Desative plugins sem função clara. Cada plugin pode adicionar CSS e JavaScript em todas as páginas.
2. Carregue scripts só onde precisa. Plugins como Perfmatters ou Asset CleanUp permitem desativar scripts por página (por exemplo, o script do formulário só na página de contato).
3. Atrase scripts de terceiros. Carregue chat, pixels e mapas de calor depois da primeira interação ou com defer. Ferramentas como WP Rocket e Perfmatters oferecem “delay JavaScript”.
4. Mova tags para o servidor. Com GTM server-side, vários pixels saem do navegador e o site fica mais leve.
5. Divida tarefas longas. Em código próprio, quebre processamentos pesados e ceda a vez ao navegador com await scheduler.yield() (com fallback para setTimeout) antes de continuar.
6. Reduza o DOM. Evite seções aninhadas em excesso no construtor visual e listas enormes renderizadas de uma vez.
7. Troque o tema ou o construtor se o problema for estrutural. Temas leves com editor de blocos nativo costumam ter INP muito melhor.

Exemplo: dividir uma tarefa longa

async function aoClicarFiltro(itens) {
  mostrarCarregando();               // feedback visual imediato
  await new Promise(r => setTimeout(r, 0)); // libera o navegador para pintar
  for (const lote of dividirEmLotes(itens, 50)) {
    renderizar(lote);
    await new Promise(r => setTimeout(r, 0));
  }
}

A regra é dar resposta visual rápida ao clique e deixar o trabalho pesado para depois.

Como confirmar a melhora

• Teste no DevTools antes e depois de cada mudança.
• Os dados de campo do Search Console usam uma janela de 28 dias. Espere esse período para ver o efeito completo.
• Acompanhe o evento de INP no GA4 para saber quais elementos ainda causam lentidão.

Velocidade é só uma parte do SEO técnico. Se o site está passando por mudanças grandes, veja também o checklist de migração sem perder SEO.

Perguntas frequentes

O que é INP?

INP (Interaction to Next Paint) é a métrica dos Core Web Vitals que mede quanto tempo o site leva para responder visualmente a cliques, toques e digitação. Substituiu o FID em março de 2024.

Qual é um bom valor de INP?

Até 200 milissegundos no percentil 75 dos visitantes. Entre 200 e 500 ms precisa melhorar; acima de 500 ms é considerado ruim.

Por que o INP do meu WordPress é ruim?

As causas mais comuns são construtores visuais pesados, scripts de terceiros (chat, pixels, mapas de calor), plugins antigos com jQuery e páginas com DOM muito grande.

Quanto tempo o Search Console leva para mostrar a melhora do INP?

Os dados de campo usam uma janela de 28 dias, então a melhora completa aparece cerca de quatro semanas depois da correção.