Inteligente CDN OptiPic — Más que compresión. Optimización de imagen compleja sobre la marcha con convertir a WebP [Más]
Previous Next

Interacción hasta el Siguiente Pintado (INP)

Los datos de uso de Chrome muestran que el 90% del tiempo de un usuario en una página se pasa __después__ de que se cargue, por lo tanto, la medición cuidadosa de la capacidad de respuesta __a lo largo__ del ciclo de vida de la página es importante. Esto es lo que evalúa la métrica INP.

Una buena capacidad de respuesta significa que una página responde rápida a las interacciones realizadas con ella. Cuando una página responde a una interacción, el resultado es una __retroalimentación visual__ que el navegador presenta en el siguiente fotograma. La retroalimentación visual te dice si, por ejemplo, un artículo que agregas a un carrito de compras en línea realmente se agrega, si un menú de navegación móvil se ha abierto, si el contenido de un formulario de inicio de sesión está siendo autenticado por el servidor, etc.

Algunas interacciones naturalmente tomarán más tiempo que otras, pero para interacciones especialmente complejas, es importante presentar __rápidamente una retroalimentación visual inicial__ como una señal al usuario de que algo está __sucediendo__. El tiempo hasta el siguiente pintado es la oportunidad más temprana para hacer esto. Por lo tanto, la intención de INP no es medir todos los efectos eventuales de la interacción (como las recuperaciones de red y las actualizaciones de la interfaz de usuario de otras operaciones asíncronas), sino el tiempo en el que se __bloquea__ el siguiente pintado. Al retrasar la retroalimentación visual, es posible que estés dando a los usuarios la impresión de que la página no responde a sus acciones.

El objetivo de INP es asegurar que el tiempo desde que un usuario inicia una interacción hasta que se pinta el siguiente fotograma sea lo más corto posible, para todas o la mayoría de las interacciones que el usuario realiza.

En el siguiente video, el ejemplo de la derecha brinda una retroalimentación visual inmediata de que se está abriendo un acordeón. También demuestra cómo una capacidad de respuesta deficiente puede causar múltiples respuestas no deseadas a la entrada porque el usuario piensa que la experiencia está rota.

An example of poor versus good responsiveness. At left, long tasks block the accordion from opening. This causes the user to click multiple times, thinking the experience is broken. When the main thread catches up, it processes the delayed inputs, resulting in the accordion opening and closing unexpectedly.

Este artículo explica cómo funciona INP, cómo medirlo y señala recursos para mejorarlo.

INP es una métrica que evalúa la capacidad de respuesta general de una página ante las interacciones del usuario al observar la latencia de todos los clics, toques y pulsaciones de teclado que ocurren durante la visita del usuario a una página. El valor final de INP es la interacción más larga observada, ignorando los valores atípicos.

Como se mencionó anteriormente, INP se calcula observando todas las interacciones realizadas con una página. Para la mayoría de los sitios, la interacción con mayor latencia se informa como INP. Sin embargo, en páginas con un gran número de interacciones, pueden producirse pequeñas interrupciones aleatorias que resulten en una interacción inusualmente alta en un sitio receptivo. Cuantas más interacciones haya, es más probable que esto ocurra. Para contrarrestarlo y obtener una medida más precisa de la capacidad de respuesta real en esos tipos de páginas, ignoramos la interacción más alta por cada 50 interacciones. La gran mayoría de las experiencias de las páginas no tienen más de 50 interacciones, por lo que se informa la peor interacción. Luego, se informa el percentil 75 de todas las vistas de página como de costumbre, lo que elimina aún más los valores atípicos para proporcionar un valor que la gran mayoría de los usuarios experimenta o mejor.

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 "tocar" en un dispositivo con pantalla táctil incluyen varios eventos, como pointerup, pointerdown y click. Una interacción puede ser impulsada por JavaScript, CSS, controles incorporados del navegador (como elementos de formulario) o una combinación de ellos.

La latencia de una interacción consiste en la duración más larga de un grupo de controladores de eventos que impulsa la interacción, desde el momento en que el usuario comienza la interacción hasta el momento en que se presenta el siguiente fotograma con retroalimentación visual.

Poner etiquetas como "bueno" o "pobre" en una métrica de capacidad de respuesta es difícil. Por un lado, quieres fomentar prácticas de desarrollo que den prioridad a una buena capacidad de respuesta. Por otro lado, debes tener en cuenta que hay una considerable variabilidad en las capacidades de los dispositivos que la gente usa para establecer expectativas de desarrollo alcanzables.

Para asegurarte de que estás ofreciendo experiencias de usuario con buena capacidad de respuesta, una buena medida de referencia es el percentil 75 de las cargas de páginas registradas en el campo, segmentado por dispositivos móviles y de escritorio:

  • Un INP por debajo o igual a 200 milisegundos significa que tu página tiene una __buena capacidad de respuesta
  • Un INP por encima de 200 milisegundos y por debajo o igual a 500 milisegundos significa que la capacidad de respuesta de tu página __necesita mejora__.
  • Un INP por encima de 500 milisegundos significa que tu página tiene una __capacidad de respuesta deficiente__.


A diagram depicting an interaction on the main thread. The user makes an input while blocking tasks run. The input is delayed until those tasks complete, after which the pointerup, mouseup, and click event handlers run, then rendering and painting work is kicked off until the next frame is presented.
The life of an interaction. An input delay occurs until event handlers begin running, which may be caused by factors such as long tasks on the main thread. The interaction's event handlers then run, and a delay occurs before the next frame is presented.

El principal impulsor de la interactividad suele ser JavaScript, aunque los navegadores proporcionan interactividad a través de controles que no dependen de JavaScript, como casillas de verificación, botones de radio y controles basados en CSS.

En cuanto a INP, solo se observan los siguientes tipos de interacción:

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

Las interacciones ocurren en el documento principal o en iframes incrustados en el documento, como hacer clic en reproducir en un video incrustado. Los usuarios finales no serán conscientes de qué hay en un iframe o no. Por lo tanto, se necesitan INP dentro de los iframes para medir la experiencia del usuario para la página de nivel superior. Tenga en cuenta que las API web de JavaScript no tendrán acceso al contenido del iframe, por lo que es posible que no puedan medir INP dentro de un iframe y esto se mostrará como una diferencia entre CrUX y RUM.

Las interacciones pueden constar de dos partes, cada una con múltiples eventos. Por ejemplo, una pulsación de tecla consta de los eventos keydown, keypress y keyup. Las interacciones táctiles contienen los eventos pointerup y pointerdown. Se elige el evento con la duración más larga dentro de la interacción como latencia de la interacción.

A depiction of more complex interaction containing two interactions. The first is a mousedown event, which produces a frame before the mouse button is let up, which kicks off more work until yet another frame is presented as the result.
A depiction of an interaction with multiple event handlers. The first part of the interaction receives an input when the user clicks down on a mouse button. However, before they release the mouse button, a frame is presented. When the user releases the mouse button, another series of event handlers must run before the next frame is presented.

INP se calcula cuando el usuario abandona la página, lo que resulta en un único valor que representa la capacidad de respuesta general de la página a lo largo de todo el ciclo de vida de la página. Un bajo INP significa que una página responde de manera confiable a la entrada del usuario.

Cuando INP considera todas las interacciones de la página, El Retardo de la Primera Interacción (FID) solo cuenta para la primera interacción. También mide solo el retardo de la primera interacción, no el tiempo que tardan en ejecutarse los controladores de eventos, ni el retardo en presentar el siguiente fotograma.

Dado que FID también es una métrica de capacidad de respuesta de carga, la razón detrás de esto es que si la primera interacción realizada con una página en la fase de carga tiene poco o ningún retraso perceptible de entrada, la página ha causado una buena primera impresión.

INP se trata más que las primeras impresiones. Al muestrear todas las interacciones, se puede evaluar la capacidad de respuesta de manera integral, lo que hace que INP sea un indicador más confiable de la capacidad de respuesta general que FID.

Es posible que una página no devuelva ningún valor de INP. Esto puede ocurrir por varias razones:

  • La página se cargó, pero el usuario nunca hizo clic, tocó o presionó una tecla en su teclado.
  • La página se cargó, pero el usuario interactuó con la página mediante gestos que no implicaron hacer clic, tocar o usar el teclado. Por ejemplo, desplazarse o pasar el cursor sobre elementos no se tiene en cuenta al calcular el INP.
  • La página está siendo accedida por un bot, como un crawler de búsqueda o un navegador sin cabeza, que no ha sido programado para interactuar con la página.

INP se puede medir tanto en el campo como en el laboratorio utilizando una variedad de herramientas.

Idealmente, tu inicio en la optimización de INP comenzará con datos de campo. En su mejor momento, los datos de campo del monitoreo de usuarios reales (RUM) te darán no solo el valor de INP de una página, sino también datos contextuales que resalten qué interacción específica fue responsable del valor de INP en sí, si la interacción ocurrió durante o después de la carga de la página, el tipo de interacción (clic, tecla o toque) y otra información valiosa.

Si su sitio web cumple con los requisitos para ser incluido en el Informe de Experiencia de Usuario de Chrome (CrUX), puede obtener rápidamente datos de campo para INP a través de CrUX en PageSpeed Insights (y otras Core Web Vitals). Como mínimo, puede obtener una imagen a nivel de origen de INP de su sitio web, pero en algunos casos, también puede obtener datos a nivel de página.

Sin embargo, aunque CrUX es útil para indicarte que hay un problema a alto nivel, a menudo no proporciona suficiente detalle para ayudarte a entender completamente cuál es el problema. Una solución RUM puede ayudarte a profundizar en más detalles sobre las páginas, usuarios o interacciones de usuarios que están experimentando interacciones lentas. Poder atribuir INP a interacciones individuales evita conjeturas y esfuerzos desperdiciados.

Idealmente, querrás comenzar las pruebas en el laboratorio una vez que tengas datos de campo que sugieran que tienes interacciones lentas. En ausencia de datos de campo, sin embargo, existen algunas estrategias para reproducir interacciones lentas en el laboratorio. Estas estrategias incluyen seguir flujos de usuarios comunes y probar interacciones a lo largo del camino, así como interactuar con la página durante la carga, cuando el hilo principal suele estar más ocupado, para descubrir interacciones lentas durante esa parte crucial de la experiencia del usuario.

Hay una colección de guías sobre cómo optimizar INP disponibles para guiarlo a través del proceso de identificar interacciones lentas en el campo y utilizar datos de laboratorio para profundizar y optimizarlas de diversas formas.

?