Interaction to Next Paint (INP) es un Core Web Vital de Google que mide la capacidad de respuesta de una pagina web. Registra el mayor retraso entre una interaccion del usuario (clic, toque, pulsacion de tecla) y la siguiente actualizacion visual en pantalla durante toda la visita, y reporta el percentil 75 sobre las sesiones reales. INP se convirtio en Core Web Vital y senal de ranking el 12 de marzo de 2024, sustituyendo a First Input Delay (FID), la metrica original de capacidad de respuesta desde 2020. Un INP bueno son 200 ms o menos. Por encima de 500 ms la experiencia se siente lenta. INP se mide en usuarios reales de Chrome (Chrome User Experience Report, dataset CrUX) y se reporta en Search Console, PageSpeed Insights, Chrome DevTools y la libreria web-vitals.
Como se mide INP?
- Input delay: tiempo desde la interaccion hasta el inicio del handler.
- Processing time: duracion del handler y otros listeners.
- Presentation delay: tiempo hasta el siguiente paint.
Umbrales
| Categoria | Valor | Sensacion |
|---|---|---|
| Bueno | 200 ms o menos | Instantaneo. |
| Mejorable | 200 a 500 ms | Lag perceptible. |
| Malo | Mas de 500 ms | Visiblemente lento. |
En febrero de 2025, alrededor del 65 por ciento de las URLs moviles en CrUX pasan INP, frente al 55 por ciento al lanzamiento en marzo de 2024.
Por que INP sustituyo a FID?
- FID solo medía la primera interaccion.
- FID no incluia procesamiento ni renderizado.
Causas de INP malo
- Long tasks en el main thread.
- Scripts de terceros sincronos.
- Handlers pesados.
- Layout thrashing.
- Rerenders de framework lentos.
- Animaciones JS en lugar de CSS.
- CSS recalcs lentos en DOM gigantes.
Como medir INP
- PageSpeed Insights.
- Search Console Core Web Vitals.
- Chrome DevTools Performance (desde Chrome 121).
- web-vitals library (
npm install web-vitals). - Cloudflare Web Analytics, Vercel Speed Insights, SpeedCurve, DebugBear.
- CrUX en BigQuery.
import { onINP } from 'web-vitals';
onINP(metric => {
fetch('/api/vitals', { method: 'POST', body: JSON.stringify(metric), keepalive: true });
});Como optimizar INP
- Dividir long tasks con
scheduler.yield()(Chrome 129, octubre 2024). - Diferir JavaScript no critico.
- Hidratacion parcial (Astro, React Server Components, Qwik).
- Memoizar componentes React.
- Usar animaciones CSS.
- Debounce de handlers caros.
- Web Workers para parsing pesado.
- Reducir DOM.
content-visibility: auto.- Auditar scripts de terceros.
INP en WordPress
- Desactivar jQuery en frontend.
- Tema rapido (GeneratePress, Astra, Kadence).
- Evitar page builders pesados.
- Cargar GTM y analytics con delay (WP Rocket, FlyingPress, Perfmatters).
- Cachear paginas.
- Optimizar WooCommerce o headless.
- Limitar widgets de chat.
- Medir con Site Kit by Google.
Mitos
- Lighthouse 100 no garantiza buen INP real.
- Menos JS solo ayuda si era bloqueante.
- INP cuenta en mobile y desktop por separado.
- INP no es lo mismo que TBT.
Como ayuda InspectWP?
InspectWP detecta jQuery en frontend, scripts bloqueantes y page builders lentos.