¿Qué es Interaction to Next Paint (INP)?

Interaction to Next Paint es la métrica de capacidad de respuesta que sustituyó a First Input Delay dentro de los Core Web Vitals. Mide cuánto tarda una página en reaccionar visiblemente tras una interacción del usuario, a lo largo de toda la sesión, no solo en el primer toque. En tiendas online cargadas de filtros, selectores de variante y botones de añadir al carrito, el INP expone el coste real del JavaScript ejecutado en el cliente.

Definición

El INP muestrea cada interacción discreta, como clic, toque o pulsación de tecla, y registra el tiempo transcurrido desde la interacción hasta el siguiente repintado. La puntuación reportada corresponde aproximadamente a la peor interacción de la sesión, o al percentil 98 en páginas largas, expresada en milisegundos. Google considera bueno un valor de hasta 200 ms y deficiente uno superior a 500 ms. El INP está dominado por tareas largas en el hilo principal, manejadores de eventos costosos, layout thrashing y el trabajo de hidratación que realizan React, Vue o Svelte después del renderizado en el servidor. Los scripts de terceros pesados cargados mediante una etiqueta de un sistema de gestión de contenido (CMS) son un factor frecuente.

Por qué es importante

El INP capta lo que los compradores realmente sienten: filtros lentos en una PLP, un selector de cantidad con retraso o un mega-menú lento. Un INP deficiente repercute en la tasa de rebote y en los carritos abandonados, y es más difícil de corregir que el LCP porque depende de la arquitectura de la aplicación y no de la entrega de recursos. En los stacks de comercio composable, el INP es el mejor indicador único del coste de hidratación y de la calidad del bundle. Como Vital, también alimenta el SEO a través de la señal de experiencia de página.

Casos de uso

Los ingenieros que trabajan con Next.js, Remix o Nuxt mitigan el INP dividiendo los bundles de React por ruta mediante code-splitting, diferiendo el JS propio no crítico y moviendo el trabajo pesado fuera del hilo principal con Web Workers. Adoptar React Server Components o la Islands Architecture en Astro elimina la hidratación de amplias partes de la página, lo que a menudo reduce a la mitad el INP en las páginas de categoría. El Edge Rendering en Vercel Edge, Cloudflare Workers o Netlify Edge mantiene la capa de caché cerca de los usuarios, pero las verdaderas mejoras vienen de reducir el JS interactivo en el cliente. Los equipos monitorizan el INP por ruta mediante la librería web-vitals y condicionan los releases a presupuestos de INP.

Relacionado

Explora Performance and Core Web Vitals · Composable Headless Frontend.