Interaction to Next Paint (INP)

Qué comprueba esta auditoría

Lee el INP de PageSpeed Insights. INP mide la interacción más lenta del percentil 98 (clic, tap, tecla) durante una sesión de página, en milisegundos. Desde marzo de 2024, INP sustituyó al First Input Delay (FID) como tercer Core Web Vital.

Valor de INP	Veredicto
≤ 200 ms	Bueno
200-500 ms	Mejorable
> 500 ms	Pobre

Por qué importa

INP es la métrica de rendimiento más cercana a “¿esta web se siente rápida?”. A diferencia de LCP (que mide carga) o CLS (que mide estabilidad), INP mide la interactividad durante toda la sesión, no solo al cargar.

Un INP pobre casi siempre es un problema de JavaScript. El hilo principal está ocupado ejecutando tus scripts, así que cuando el usuario pulsa, el manejador del clic queda en cola detrás de lo que se esté ejecutando y la pantalla se queda colgada.

Cómo solucionarlo

1. Encuentra tus peores interacciones. En Chrome DevTools, abre la pestaña Performance y graba una sesión que incluya la interacción lenta. Busca tareas largas (>50 ms) justo después del evento de clic.

2. Trocea las tareas largas. Cualquier JavaScript síncrono que se ejecute más de 50 ms bloquea la entrada del usuario. Divide en trozos con await:

async function processItems(items) {
  for (const item of items) {
    await yieldToMain();
    process(item);
  }
}

function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

Los navegadores modernos también tienen scheduler.yield() (Chromium 129+), que es más limpio.

3. Difiere los scripts no críticos. Mueve analítica, anuncios, snippets de A/B testing y widgets de chat para que se carguen tras la primera interacción (o usa requestIdleCallback).

4. Usa content-visibility: auto en secciones fuera de pantalla. El navegador omite layout y paint para el contenido oculto hasta que entra en el viewport.

5. Aligera los re-renders de React/Vue/Svelte. Un asesino común del INP: un manejador de clic dispara un cambio de estado que vuelve a renderizar 500 componentes. Usa memoización (React.memo, useMemo), virtualización para listas largas y slices de estado granulares.

Preguntas frecuentes

¿PageSpeed Insights muestra INP?

Sí, tanto en lab como en campo. El INP de campo viene del Chrome User Experience Report (CrUX) para sitios con tráfico suficiente; los sitios pequeños solo ven INP simulado en lab.

¿Es INP lo mismo que FID?

No. FID medía solo el retraso de la primera interacción. INP mide el peor caso a lo largo de toda la sesión, incluyendo el tiempo de ejecución del manejador y el siguiente paint. INP es aproximadamente 5 veces más difícil de optimizar de lo que era FID.

Mi sitio es prácticamente estático. ¿Por qué tengo mal INP?

Incluso un sitio estático suele tener scripts de terceros pesados (analítica, chat, banners de consentimiento) acaparando el hilo principal. Audita tus etiquetas <script> y difiere todo lo que no sea crítico para el primer paint.