Interaction to Next Paint (INP)
Interaction to Next Paint (INP) es una métrica de Core Web Vitals que mide cuánto tarda una página en responder visualmente tras una interacción del usuario: un clic, un toque o una pulsación de tecla. En marzo de 2024, Google ascendió INP a factor de posicionamiento oficial, en sustitución de First Input Delay (FID).
Interaction to Next Paint (INP) es una métrica de Core Web Vitals que mide cuánto tarda una página en responder visualmente tras una interacción del usuario: un clic, un toque o una pulsación de tecla. En marzo de 2024, Google ascendió INP a factor de posicionamiento oficial, en sustitución de First Input Delay (FID).
Por qué es importante
FID solo capturaba el retraso de la primera interacción, pero INP rastrea cada interacción a lo largo del ciclo de vida de la página y la puntúa según la más lenta. Eso refleja lo que los usuarios sienten realmente. Según Google, en 2026 alrededor del 36 % de los sitios de escritorio y el 45 % de los sitios móviles siguen sin superar el umbral "Bueno", lo que convierte la optimización de INP en un claro factor diferenciador frente a las páginas de la competencia.
Umbrales
| Valoración | Valor de INP |
|---|---|
| Bueno | ≤ 200 ms |
| Necesita mejoras | 200–500 ms |
| Deficiente | > 500 ms |
Se puntúa en el percentil 75 (p75) de los datos de usuarios reales del Chrome User Experience Report (CrUX).
Qué ralentiza el INP
Tareas largas de JavaScript: Cualquier tarea que mantenga ocupado el hilo principal durante más de 50 ms bloquea la siguiente interacción.
Retraso de entrada: El tiempo que pasa antes de que se ejecute un controlador de eventos porque el hilo principal está ocupado con otro trabajo.
Retraso de presentación: El tiempo que transcurre entre la finalización del procesamiento del evento y el momento en que el navegador pinta el siguiente fotograma, normalmente provocado por cambios complejos en el DOM o en el diseño.
Cómo optimizarlo
Divide las tareas largas: Usa setTimeout, scheduler.yield() o requestIdleCallback para dividir las tareas de más de 50 ms.
Mantén ligeros los controladores de eventos: No ejecutes trabajo pesado dentro de un controlador de clics; aplázalo más allá del siguiente requestAnimationFrame.
Evita renderizados innecesarios: En React, usa memo, useMemo y useCallback para evitar actualizaciones redundantes.
Usa contain de CSS: Propiedades como contain: content limitan el alcance del diseño y el pintado, lo que abarata el renderizado de fotogramas.
Aplaza los scripts de terceros: Carga los anuncios, las analíticas y los widgets de chat con async/defer para que no bloqueen las interacciones.
Herramientas de medición: Usa PageSpeed Insights, la extensión Web Vitals de Chrome y el informe de Core Web Vitals de Search Console para obtener datos reales de INP.
Sources: