Guías

INP, abreviatura de Interaction to Next Paint, es una de las Core Web Vitals de Google, las métricas que Google usa para puntuar lo bien que se siente usar una página. INP mide la capacidad de respuesta: cuando haces clic, tocas o pulsas una tecla, ¿cuánto tarda la página en responder de forma visible? Se convirtió en una Core Web Vital oficial el 12 March 2024, reemplazando al antiguo First Input Delay (FID).

El nombre describe exactamente lo que mide. Desde el momento en que interactúas, INP cronometra cuánto tarda hasta que se pinta el siguiente fotograma, es decir, hasta que realmente ves cambiar algo en la pantalla. Un INP bajo significa que la página reacciona casi al instante; un INP alto significa que pulsas un botón y parece bloqueado un momento antes de que ocurra algo.

Los umbrales de Google, medidos en el 75th percentile de las interacciones reales de los usuarios, son sencillos. Un INP de 200 milliseconds o menos es Good. Entre 200 y 500 milliseconds es Needs improvement. Por encima de 500 milliseconds es Poor. La parte del 75th percentile importa: tu página tiene que ser receptiva en la mayoría de las interacciones, no solo de media.

FID, la métrica que INP reemplazó, solo medía el retardo antes de que el navegador pudiera empezar a procesar tu primera interacción, el retardo de entrada, y solo para esa primera. Eso hacía fácil aprobarla mientras una página seguía sintiéndose lenta. INP es más estricta porque analiza las interacciones a lo largo de toda la visita, y mide la duración completa: el retardo de entrada, el tiempo que se ejecutan tus controladores de eventos y el tiempo hasta presentar el siguiente fotograma.

En otras palabras, FID preguntaba con qué rapidez podía la página empezar a responder, una vez. INP pregunta con qué rapidez responde realmente la página, cada vez. Eso se ajusta mucho más a cómo percibe realmente la capacidad de respuesta un usuario.

Casi todos los problemas de INP provienen de que el main thread está ocupado. JavaScript se ejecuta en un único main thread, y mientras se ejecuta una tarea larga, el navegador no puede responder a un clic ni pintar un nuevo fotograma. Los culpables habituales son las tareas de JavaScript de larga duración, los controladores de eventos pesados que hacen demasiado trabajo de golpe, las actualizaciones del DOM grandes o complejas, y los frameworks que vuelven a renderizar más de lo necesario.

Corregir INP consiste sobre todo en no bloquear el main thread. Divide las tareas largas en partes más pequeñas y devuelve el control al navegador entre ellas para que pueda atender la entrada. Saca el trabajo pesado y no urgente fuera de la interacción, por ejemplo con requestIdleCallback o un web worker. Mantén los controladores de eventos ligeros, aplica debounce a eventos ruidosos como input y scroll, y evita forzar trabajo de layout o de re-renderizado síncrono y grande como respuesta directa a un toque.

INP se juzga mejor con datos de campo, usuarios reales en dispositivos reales, que puedes ver en el Chrome User Experience Report y en el informe de Core Web Vitals de Google Search Console. Para depurar en laboratorio, la biblioteca de JavaScript web-vitals, el panel Performance de Chrome DevTools y Lighthouse te ayudan todos a encontrar las interacciones lentas. En este sitio, nuestro verificador de web vitals te permite introducir tus valores medidos y ver al instante si superan los umbrales de Google.

Conviene tener claro el alcance. INP trata solo de la capacidad de respuesta. Es una de las tres Core Web Vitals, junto con Largest Contentful Paint (carga) y Cumulative Layout Shift (estabilidad visual). Una página puede cargar rápido y aun así tener un mal INP si su JavaScript bloquea el main thread cuando la gente empieza a interactuar.

En resumen: INP premia a las páginas que se mantienen receptivas durante toda la visita, no solo en el primer toque. Si tu sitio envía mucho JavaScript, INP es la Core Web Vital que más probablemente necesite atención, y la solución es casi siempre la misma disciplina: hacer menos trabajo en el main thread, y hacerlo en partes más pequeñas.