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

Interaction to Next Paint (INP) es la Métrica web esencial estable que evalúa la capacidad de respuesta ante las interacciones. Sustituyó a First Input Delay (FID) el 12 de marzo de 2024. En vez de comprobar solo la demora previa a la primera interacción, INP evalúa las interacciones aptas durante toda la visita y comunica un único valor representativo de latencia.

¿Qué mide INP?

INP mide el tiempo desde un clic, un toque o una pulsación de tecla hasta que el navegador pinta el siguiente fotograma que refleja la interacción. El total incluye la demora de entrada antes de que comiencen los controladores de eventos, la duración del procesamiento mientras se ejecutan y la demora de presentación antes de que aparezca el siguiente fotograma. Pasar el cursor, desplazarse y hacer zoom no cuentan por sí solos.

¿Cuál es una buena puntuación de INP?

Una buena puntuación de campo es de 200 milisegundos o menos. Un INP superior a 200 y menor o igual a 500 milisegundos necesita mejorar; cualquier valor superior a 500 milisegundos indica una capacidad de respuesta deficiente. La evaluación de las Métricas web esenciales usa el percentil 75 de las visitas, con los dispositivos móviles y las computadoras de escritorio evaluados por separado.

• Buena: INP ≤ 200 ms
• Necesita mejorar: 200 ms < INP ≤ 500 ms
• Deficiente: INP > 500 ms

¿Cómo elige INP un valor para una visita?

INP suele comunicar la interacción apta más larga de la visita. En páginas con mucha interacción, ignora la interacción más alta por cada 50 para reducir la influencia de valores atípicos aleatorios. La mayoría de las visitas tiene menos de 50 interacciones, por lo que normalmente se informa la peor. Después, las herramientas de campo agregan las visitas en el percentil 75 de la página o el origen.

¿Cómo se mejora INP?

Empieza con datos de campo del Informe sobre la experiencia del usuario en Chrome o de un sistema de monitorización de usuarios reales para identificar la interacción lenta; después, reprodúcela en el laboratorio. Reduce las tareas largas del hilo principal, acorta las devoluciones de llamada de eventos, cede el control antes del trabajo no esencial y evita cálculos de diseño costosos o actualizaciones de un DOM sobredimensionado. Optimiza las tres fases de latencia y muestra la respuesta visual necesaria en el siguiente fotograma antes de aplazar el trabajo secundario.