Interacción a la siguiente pintura (INP)

Los datos de uso de Chrome muestran que el 90% del tiempo que un usuario pasa en una página después de que se carga. Por lo tanto, es importante medir cuidadosamente la capacidad de respuesta durante el ciclo de vida de la página. Esto es lo que evalúa la métrica INP.

Una buena capacidad de respuesta significa que una página responde rápidamente a las interacciones. Cuando una página responde a una interacción, el navegador presenta comentarios visuales en el siguiente fotograma que pinta. Los comentarios visuales te indican si, por ejemplo, se está agregando un artículo al carrito de compras en línea, si se abrió un menú de navegación para dispositivos móviles, si el servidor autentica el contenido de un formulario de acceso, etcétera.

Algunas interacciones, por naturaleza, tardan más que otras, pero en el caso de las interacciones especialmente complejas, es importante presentar rápidamente algunos comentarios visuales iniciales para informarle al usuario que está sucediendo algo. El siguiente marco que pintará el navegador es la primera oportunidad para hacerlo.

Por lo tanto, el objetivo de la INP no es medir todos los efectos finales de una interacción, como las recuperaciones de red y las actualizaciones de la IU de otras operaciones asíncronas, sino el tiempo en que se bloquea la próxima pintura. Cuando se retrasan los comentarios visuales, los usuarios pueden tener la impresión de que la página no responde lo suficientemente rápido. INP se desarrolló para ayudar a los desarrolladores a medir esta parte de la experiencia del usuario.

En el siguiente video, el ejemplo de la derecha brinda información visual inmediata sobre la apertura de un acordeón. En el ejemplo de la izquierda, se muestra la baja capacidad de respuesta y cómo puede generar experiencias negativas para los usuarios.

Esta guía explica cómo funciona INP, cómo medirlo y señala recursos para mejorarlo.

¿Qué es INP?

El INP es una métrica que evalúa la capacidad de respuesta general de una página ante las interacciones del usuario mediante la observación de la latencia de todas las interacciones de clic, presión y teclado que se producen durante la visita del usuario a la página. El valor final de la INP es la interacción más larga observada, sin tener en cuenta los valores atípicos.

Una interacción es un grupo de controladores de eventos que se activan durante el mismo gesto lógico del usuario. Por ejemplo, las interacciones de "presionar" en un dispositivo con pantalla táctil incluyen varios eventos, como pointerup, pointerdown y click. Una interacción puede estar impulsada por JavaScript, CSS, controles de navegador integrados (como elementos de formulario) o una combinación de estos.

La latencia de una interacción consiste en la duración más larga de un grupo de controladores de eventos que impulsan la interacción, desde el momento en que el usuario comienza la interacción hasta el momento en que el navegador puede pintar un marco la próxima vez.

¿Qué es un buen nivel de INP?

Fijar etiquetas, como "buena" o "deficiente" en una métrica de capacidad de respuesta es difícil. Por un lado, quieres fomentar prácticas de desarrollo que prioricen una buena capacidad de respuesta. Por otro lado, debes tener en cuenta que existe una variabilidad considerable en las capacidades de los dispositivos que usan las personas para establecer expectativas de desarrollo alcanzables.

Para garantizar experiencias del usuario con una buena capacidad de respuesta, un buen umbral para medir es el percentil 75 de las cargas de páginas registradas en el campo, segmentadas entre dispositivos móviles y computadoras de escritorio:

• Un INP inferior o igual a 200 milisegundos significa que una página tiene buena capacidad de respuesta.
• Un INP superior a 200 milisegundos e inferior a 500 milisegundos significa que la capacidad de respuesta de una página debe mejorar.
• Un INP superior a 500 milisegundos significa que una página tiene una baja capacidad de respuesta.

¿Qué hay en una interacción?

A menudo, el factor principal de la interactividad es JavaScript, aunque los navegadores proporcionan interactividad a través de controles no potenciados por JavaScript, como casillas de verificación, botones de selección y controles potenciados por CSS.

A los efectos de la INP, solo se observan los siguientes tipos de interacción:

• Hacer clic con un mouse
• Presionar un dispositivo con pantalla táctil
• Presiona una tecla en un teclado físico o en pantalla.

Las interacciones ocurren en el documento principal o en los iframes incorporados en el documento; por ejemplo, cuando se hace clic en el botón de reproducción de un video incorporado. Los usuarios finales no sabrán qué se incluye en un iframe o no, por lo tanto, la INP dentro de los iframes es necesaria para medir la experiencia del usuario en la página de nivel superior. Debido a que las APIs web de JavaScript no tienen acceso al contenido de iframes, esto puede mostrarse como una diferencia entre CrUX y RUM

Las interacciones pueden constar de varios eventos. Por ejemplo, una combinación de teclas incluye los eventos keydown, keypress y keyup. Las interacciones de presión contienen eventos pointerup y pointerdown. El evento con la duración más larga dentro de la interacción es lo que contribuye a la latencia total de la interacción.

El INP de la página se calcula cuando el usuario abandona la página. El resultado es un valor único que representa la capacidad de respuesta general de la página durante todo su ciclo de vida. Un INP bajo significa que una página respondió de forma confiable a las entradas del usuario.

¿En qué se diferencia el INP del retraso de primera entrada (FID)?

INP es la métrica sucesora del retraso de primera entrada (FID). Si bien ambas son métricas de capacidad de respuesta, FID solo midió el retraso de entrada de la primera interacción en una página. El INP mejora el FID observando todas las interacciones en una página, desde el retraso de entrada hasta el tiempo que tarda en ejecutarse el controlador de eventos y, por último, hasta que el navegador pinta el siguiente fotograma.

Estas diferencias significan que tanto la INP como la FID son diferentes tipos de métricas de capacidad de respuesta. Mientras que el FID era una métrica de capacidad de respuesta de carga diseñada para evaluar la primera impresión de la página en el usuario, el INP es un indicador más confiable de la capacidad de respuesta general, independientemente de cuándo se produzcan las interacciones en el ciclo de vida de una página.

¿Qué sucede si no se informa ningún valor de INP?

Es posible que una página no muestre ningún valor de INP. Esto puede suceder por varios motivos, entre los que se incluyen los siguientes:

• Se cargó la página, pero el usuario nunca hizo clic, no tocó ninguna parte de la página ni presionó ninguna tecla del teclado.
• La página se cargó, pero el usuario interactuó con ella mediante gestos que no se miden, como desplazarse o colocar el cursor sobre elementos.
• Un bot, como un rastreador de búsqueda o un navegador sin cabeza, accede a la página y no se le asignó una secuencia de comandos para interactuar con ella.

Cómo medir el INP

La INP se puede medir tanto en el campo como en el laboratorio, en la medida en que puedas simular interacciones realistas de los usuarios.

En el campo

Idealmente, tu recorrido para optimizar el INP comenzará con los datos de campo. En el mejor de los casos, los datos de campo de la supervisión de usuarios reales (RUM) te brindarán no solo el valor de INP de una página, sino también datos contextuales que destaquen qué interacción específica fue responsable del valor de INP, si la interacción ocurrió durante o después de la carga de la página, el tipo de interacción (clic, presión de tecla o presión) y otros tiempos valiosos que pueden ayudarte a identificar qué parte de la interacción afectaba la capacidad de respuesta.

Si tu sitio web cumple con los requisitos para incluirse en el Informe sobre la experiencia del usuario en Chrome (CrUX), puedes obtener rápidamente datos de campo para INP a través de CrUX en PageSpeed Insights (y otras Métricas web esenciales). Como mínimo, puedes obtener una imagen a nivel del origen del INP de tu sitio web, pero, en algunos casos, también puedes obtener datos a nivel de la URL.

Sin embargo, si bien CrUX puede indicarte si hay un problema, no puede decirte qué lo causó. Una solución de RUM puede ayudarte a descubrir más detalles sobre las páginas, los usuarios o las interacciones de los usuarios que tienen problemas de capacidad de respuesta. Poder atribuir la INP a interacciones individuales evita las conjeturas y el esfuerzo desperdiciado.

En el laboratorio

Lo ideal es que comiences a realizar pruebas en el lab una vez que tengas datos de campo que sugieran que una página tiene interacciones lentas. Los datos de campo harán que el trabajo de reproducir interacciones problemáticas en el lab sea una tarea mucho más sencilla.

Sin embargo, es completamente posible que no tengas datos de campo. Si bien el INP puede medirse en algunas herramientas de laboratorio, el valor de INP resultante de una página durante las pruebas de laboratorio dependerá de las interacciones que se realicen durante el período de medición. Los comportamientos de los usuarios pueden ser impredecibles y muy variables, lo que significa que es posible que tus pruebas en el laboratorio no muestren interacciones problemáticas de la misma manera que los datos de campo. Además, algunas herramientas del lab no informarán el INP de una página porque solo observan la carga de una página sin ninguna interacción. En esos casos, el tiempo de bloqueo total (TBT) puede ser una métrica de proxy razonable para la INP, pero no es un sustituto de la INP en sí.

Si bien las herramientas de lab tienen limitaciones para evaluar el INP de una página, existen algunas estrategias para reproducir interacciones lentas en el lab. Las estrategias incluyen seguir flujos de usuarios comunes y probar interacciones durante el proceso, así como interactuar con la página mientras se carga (cuando el subproceso principal suele estar más ocupado) para identificar interacciones lentas durante esa parte crucial de la experiencia del usuario.

Cómo mejorar la INP

Hay una colección de guías sobre cómo optimizar el INP disponible para guiarte a través del proceso de identificar interacciones lentas en el campo y usar los datos de los labs para identificar las causas y optimizarlas.

Registro de cambios

En ocasiones, se descubren errores en las APIs que se usan para medir las métricas y, a veces, en las definiciones de las métricas. Como resultado, a veces se deben realizar cambios, y estos pueden aparecer como mejoras o regresiones en tus informes y paneles internos.

Para ayudarte a administrar esto, todos los cambios que realices en la implementación o definición de estas métricas se mostrarán en este Registro de cambios.

Si tienes comentarios sobre estas métricas, envíalos al grupo de Google web-vitals-feedback.

Ponga a prueba sus conocimientos