Interaction to Next Paint (INP) e um Core Web Vital do Google que mede a capacidade de resposta de uma pagina web. Registra o maior atraso entre uma interacao do usuario (clique, toque, tecla) e a proxima atualizacao visual durante toda a visita, reportando o percentil 75 das sessoes reais. INP tornou se Core Web Vital oficial e sinal de ranking em 12 de marco de 2024, substituindo o First Input Delay (FID). Bom INP: 200 ms ou menos. Medido em usuarios reais do Chrome via CrUX e disponivel no Search Console, PageSpeed Insights, Chrome DevTools e biblioteca web-vitals.
Como o INP e medido
- Input delay.
- Processing time.
- Presentation delay.
Limiares
| Categoria | Valor | Sensacao |
|---|---|---|
| Bom | 200 ms ou menos | Instantaneo. |
| A melhorar | 200 a 500 ms | Latencia perceptivel. |
| Ruim | Acima de 500 ms | Visivelmente lento. |
Em fevereiro de 2025 cerca de 65 por cento das URLs mobile do CrUX passam, contra 55 por cento no lancamento de marco de 2024.
Por que substituiu o FID
- FID so media a primeira interacao.
- FID nao incluia processamento nem render.
Causas de INP ruim
- Long tasks no main thread.
- Scripts de terceiros sincronos.
- Handlers pesados.
- Layout thrashing.
- Rerenders de framework lentos.
- Animacoes JS em vez de CSS.
- Recalculo CSS em DOMs gigantes.
Como medir
- PageSpeed Insights.
- Search Console Core Web Vitals.
- Chrome DevTools (desde Chrome 121).
- web-vitals (
npm install web-vitals). - Cloudflare Web Analytics, Vercel Speed Insights, SpeedCurve, DebugBear.
- CrUX no BigQuery.
import { onINP } from 'web-vitals';
onINP(metric => {
fetch('/api/vitals', { method: 'POST', body: JSON.stringify(metric), keepalive: true });
});Como otimizar
- Quebrar long tasks com
scheduler.yield()(Chrome 129, outubro 2024). - Adiar JS nao critico.
- Hidratacao parcial (Astro, RSC, Qwik).
- Memoizar componentes React.
- Animacoes CSS.
- Debounce em handlers.
- Web Workers para parsing pesado.
- Reduzir DOM.
content-visibility: auto.- Auditar scripts de terceiros.
INP no WordPress
- Desligar jQuery no frontend.
- Tema rapido (GeneratePress, Astra, Kadence).
- Evitar page builders pesados.
- Adiar GTM e analytics (WP Rocket, FlyingPress, Perfmatters).
- Cache.
- WooCommerce ou headless.
- Limitar widgets de chat.
- Medir com Site Kit by Google.
Mitos
- Lighthouse 100 nao garante bom INP real.
- Menos JS so ajuda se era bloqueante.
- INP medido mobile e desktop separadamente.
- INP nao e TBT.
Como o InspectWP ajuda?
InspectWP detecta jQuery no frontend, scripts bloqueantes e page builders lentos.