Interacción con Next Paint (INP): guía técnica completa y estándar de optimización

La interacción con Next Paint (INP) es una métrica oficial de Google Core Web Vital introducida para evaluar la capacidad de respuesta general de la interfaz de las páginas web.

A diferencia del retardo de la primera entrada (FID), que evaluó solo la interacción inicial al cargar la página, INP observa la latencia de todas las interacciones del usuario (clics, toques y entradas de teclado) que ocurren durante toda la vida útil de la visita de un usuario a una página.

Resumen de la primera respuesta

Interaction to Next Paint (INP) es una métrica de Core Web Vital que mide el tiempo transcurrido desde que un usuario interactúa con una página (haciendo clic, tocando o presionando una tecla) hasta que el navegador presenta el marco visual actualizado en la pantalla.La latencia INP consta de tres subpartes: retraso de entrada, duración del procesamiento y retraso de presentación.Una puntuación INP aprobatoria es de 200 milisegundos o menos en el percentil 75 de visitas de usuarios reales.En marzo de 2024, INP reemplazó oficialmente el retardo de la primera entrada (FID) en los algoritmos de clasificación de búsqueda de Google.

Umbrales de puntuación INP y escala de calificación

Para brindar una experiencia de usuario receptiva, las páginas web deben cumplir con los siguientes umbrales de Core Web Vitals para INP evaluados en el percentil 75 de visitas de campo de usuarios reales:

Bueno: $\le 200\text {ms} $ (verde): respuesta de interfaz de usuario rápida y fluida que los usuarios consideran instantánea.
Necesita mejorar: $> 200\text {ms} $ y $\le 500\text {ms} $ (ámbar): retraso notable durante los clics o toques que afecta la participación del usuario.
Deficiente: $> 500\text {ms} $ (Rojo): congelación grave de la interfaz y bloqueo del hilo principal que genera frustración en el usuario y altas tasas de rebote.

Latencia INP	Calificación de desempeño	Impacto en la experiencia del usuario	Estado de clasificación de búsqueda de Google
$\le 200\text {ms} $	Bueno	Comentarios visuales instantáneos al tocar o hacer clic.	Calificación aprobatoria completa para la evaluación Core Web Vitals.
$201\texto {ms} - 500\texto {ms} $	Necesita mejorar	Interacciones lentas;retraso notable en la actualización del estado de la interfaz de usuario.	Puede experimentar penalizaciones de clasificación en palabras clave competitivas.
$> 500\texto {ms} $	Pobre	Botones que no responden, interfaz de usuario congelada y bloqueos en el hilo principal.	No pasa la evaluación de Core Web Vitals;penalización de clasificación activa.

Los tres componentes de la latencia de la interacción INP

Cuando un usuario interactúa con un elemento de una página web, la latencia total de interacción medida por INP consta de tres fases secuenciales:

Retraso de entrada: el tiempo transcurrido entre el momento en que el usuario inicia la interacción física (haciendo clic, tocando o presionando una tecla) y cuando el hilo principal del navegador comienza a ejecutar los controladores de eventos asociados.El retraso de entrada se debe principalmente a la congestión del subproceso principal debido a largas tareas de JavaScript en segundo plano que se ejecutan durante la carga de la página o la renderización de componentes.
Duración del procesamiento: el tiempo dedicado a ejecutar el código JavaScript dentro de todos los detectores de eventos registrados para esa interacción (como onclick, onkeydown o controladores de actualización de estado reactivo del marco).
Retraso de presentación: el tiempo transcurrido después de que se completan los controladores de eventos hasta que el navegador termina de calcular el nuevo cálculo del estilo, el diseño, pintar los píxeles actualizados y mostrar el siguiente cuadro visual en el hardware de pantalla del usuario.

Matemáticamente, la latencia INP total para una única interacción se expresa como:

$$\text{Latencia INP} = \text{Retraso de entrada} + \text{Duración del procesamiento} + \text{Retraso de presentación}$$

Por qué Google reemplazó FID con INP en marzo de 2024

El retardo de la primera entrada (FID) midió solo el componente de retardo de entrada de la primera interacción en una página.Si bien FID ayudó a identificar páginas donde el bloqueo del hilo principal impedía la interacción inicial, adolecía de dos limitaciones técnicas importantes:

Alcance de interacción única: FID ignoró todas las interacciones posteriores del usuario después de cargar la página y no pudo capturar la lentitud durante la navegación compleja del lado del cliente de la aplicación de una sola página (SPA).
Medición de latencia incompleta: FID midió solo el retraso de entrada, ignorando por completo el tiempo de procesamiento y el retraso de presentación.Un controlador de eventos que tardó 2000 ms en ejecutarse recibió una puntuación FID aprobatoria si el retraso de entrada inicial era inferior a 50 ms.

En marzo de 2024, Google reemplazó oficialmente FID con INP como factor de clasificación oficial de Core Web Vital.INP evalúa el percentil 75 de todas las interacciones durante una sesión, proporcionando una evaluación mucho más completa y realista de la experiencia del usuario real en las aplicaciones web modernas.

Interacciones de usuarios calificados frente a eventos no calificados

INP mide interacciones discretas del usuario donde el usuario espera retroalimentación visual inmediata.Comprender qué interacciones cuentan para el INP es esencial para la elaboración de perfiles de diagnóstico:

Interacciones medidas

Clics del mouse: hacer clic en botones, enlaces, controles de formulario o componentes interactivos personalizados.
Toques en pantalla táctil: Tocar elementos en dispositivos móviles o tabletas.
Presionar el teclado: presionar teclas físicas o virtuales del teclado (como Enter, Space o teclas alfanuméricas en entradas de texto).

Eventos no medidos

Desplazamiento y panorámica: desplazarse por una página o desplazarse por un componente del mapa no activa la medición de INP.
Pasar por encima: Mover el cursor del mouse sobre un elemento sin hacer clic está excluido de INP.
Animaciones de carga de página: las animaciones CSS que se activan automáticamente sin la intervención del usuario no cuentan para INP.

Estrategias técnicas probadas para optimizar puntuaciones INP altas

Para reducir la latencia INP por debajo del umbral de 200 ms, los equipos de ingeniería deben implementar las siguientes optimizaciones técnicas:

Dividir tareas largas del subproceso principal: utilice requestIdleCallback(), setTimeout() o scheduler.yield() para dividir tareas de ejecución de más de 50 ms en fragmentos más pequeños, lo que permite al navegador procesar las entradas entrantes del usuario inmediatamente entre los bloques de ejecución de tareas.
Optimizar las actualizaciones del estado del marco: en las aplicaciones Vue 3 y Nuxt 4, posponga la representación de la interfaz de usuario no crítica utilizando límites de componentes asíncronos o actualizaciones de referencia reactivas diferidas.
Minimizar la alteración del diseño: Evite leer las propiedades de la geometría DOM (como offsetHeight o getBoundingClientRect() ) inmediatamente después de mutar los elementos DOM, lo que fuerza el recálculo sincrónico del diseño.
Reducir la profundidad del árbol DOM: Los árboles DOM de gran tamaño aumentan el cálculo de estilo y el costo del diseño durante el retraso de la presentación.Mantenga el recuento total de elementos DOM por debajo de 1500 nodos por página.
Optimizar secuencias de comandos de terceros: las secuencias de comandos pesadas de terceros (análisis, redes publicitarias, widgets de chat de clientes) con frecuencia secuestran el hilo principal.Aplazar o descargar scripts de terceros no esenciales por parte del trabajador web.

Monitoreo continuo de INP con SimpleOps

SimpleOps realiza un seguimiento continuo del rendimiento de INP mediante la captura de métricas de conjuntos de datos de campo de usuarios reales de Chrome UX Report (CrUX) junto con auditorías sintéticas de Lighthouse.SimpleOps alerta automáticamente a su equipo cada vez que el INP del percentil 75 de su sitio web supera los 200 ms, lo que garantiza que su aplicación siga siendo rápida, fluida y optimizada para la clasificación de los motores de búsqueda.