Se usó la API de Cloud Translation para traducir esta página.

Interacción a la siguiente pintura (INP)

Jeremy Wagner

Navegadores compatibles

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 retroalimentación visual 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 fotograma que pintará el navegador es la primera oportunidad para hacerlo.

Por lo tanto, la intención de INP no es medir todos los efectos eventuales de una interacción (como las recuperaciones de red y las actualizaciones de IU de otras operaciones asíncronas), sino el tiempo en el que se bloquea la pintura next. Al retrasar los comentarios visuales, los usuarios pueden tener la impresión de que la página no responde lo suficientemente rápido, y 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. Una mala capacidad de respuesta se demuestra en el ejemplo de la izquierda y cómo puede crear experiencias del usuario deficientes.

Un ejemplo de respuesta deficiente frente a buena. A la izquierda, las tareas largas impiden que se abra el acordeón. En consecuencia, el usuario hace clic varias veces, pensando que la experiencia no funciona. Cuando el subproceso principal se pone al día, procesa las entradas retrasadas, lo que hace que el acordeón se abra y se cierre de forma inesperada. A la derecha, una página más responsiva abre el acordeón rápidamente y sin incidentes.

En esta guía, se explica cómo funciona el INP, cómo medirlo y se indican recursos para mejorarlo.

¿Qué es INP?

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 ocurren durante la visita del usuario a una página. El valor final de la INP es la interacción más larga observada, sin tener en cuenta los valores atípicos.

Detalles sobre cómo se calcula el INP

El INP se calcula observando todas las interacciones realizadas con una página. En la mayoría de los sitios, la interacción con la peor latencia se informa como INP.

Sin embargo, en el caso de las páginas con una gran cantidad de interacciones, los errores aleatorios pueden generar una interacción de latencia inusualmente alta en una página que, de otro modo, sería responsiva. Cuanto más interacciones se produzcan en una página determinada, más probabilidades habrá de que esto suceda.

Para proporcionar una mejor medición de la capacidad de respuesta real de las páginas con una gran cantidad de interacciones, ignoramos una interacción más alta por cada 50 interacciones. La gran mayoría de las experiencias de página no tienen más de 50 interacciones, por lo que la peor interacción se informa con mayor frecuencia. Luego, el percentil 75 de todas las vistas de página se informa de la forma habitual, por lo que se quitan aún más los valores atípicos para ofrecer un valor que sea mejor o que la gran mayoría de los usuarios experimentan.

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 se puede impulsar a través de JavaScript, CSS, controles integrados del navegador (como elementos del 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 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 una buena puntuación de INP?

Es difícil fijar etiquetas como "buena" o "deficiente" en una métrica de capacidad de respuesta. Por un lado, debes fomentar prácticas de desarrollo que prioricen la 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 asegurarte de ofrecer experiencias del usuario con 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 los dispositivos móviles y las computadoras de escritorio:

Un INP inferior o 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 necesita mejorar.
Un INP superior a 500 milisegundos significa que una página tiene una baja capacidad de respuesta.

Los valores de INP buenos son de 200 milisegundos o menos, los valores deficientes son superiores a 500 milisegundos y los valores intermedios deben mejorarse. — Los valores de INP adecuados son de 200 milisegundos o menos. Los valores deficientes son superiores a 500 milisegundos.

¿Qué hay en una interacción?

Un diagrama que representa una interacción en el subproceso principal. El usuario realiza una entrada mientras se ejecutan tareas de bloqueo. La entrada se retrasa hasta que se completan esas tareas. Luego, se ejecutan los controladores de eventos de levantar el puntero, levantar el mouse y hacer clic. Luego, se inicia el trabajo de renderización y pintura hasta que se presenta el siguiente fotograma. — Duración de una interacción. Se produce un retraso de entrada hasta que se comienzan a ejecutar los controladores de eventos, lo que puede deberse a factores como tareas largas en el subproceso principal. Luego, se ejecutan las devoluciones de llamada del controlador de eventos de la interacción y se produce una demora antes de que se presente el siguiente fotograma.

A menudo, el principal impulsor 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 el mouse
Presionar un dispositivo con pantalla táctil
Presiona una tecla en un teclado físico o en pantalla.

Las interacciones se producen en el documento principal o en los iframes incorporados en el documento, por ejemplo, hacer clic en Reproducir en un video incorporado. Los usuarios finales no sabrán si un iframe contiene contenido o no, por lo que se necesitan INP dentro de los iframes 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 los 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 mayor duración en la interacción es lo que contribuye a la latencia total de la interacción.

Representación de una interacción más compleja que contiene dos interacciones. El primero es un evento de mousedown, que produce un fotograma antes de que se suelte el botón del mouse, lo que inicia más trabajo hasta que se presenta otro fotograma como resultado. — Representación de una interacción con varios controladores de eventos. La primera parte de la interacción recibe una entrada cuando el usuario hace clic en un botón del mouse. Sin embargo, antes de soltar el botón del mouse, se presenta un marco. Cuando el usuario suelta el botón del mouse, se debe ejecutar otra serie de controladores de eventos antes de que se presente el siguiente fotograma.

El INP de la página se calcula cuando el usuario sale de ella. El resultado es un valor único que representa la capacidad de respuesta general de la página a lo largo de 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, el FID solo mide el retraso de entrada de la primera interacción en una página. INP mejora el FID observando todas las interacciones de una página, desde el retraso de entrada hasta el tiempo que tarda en ejecutar los controladores de eventos y, por último, hasta que el navegador haya pintado 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 ocurrir 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 la 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

Lo ideal es que tu recorrido para optimizar la INP comience 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 en sí, 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 califica para incluirse en el Informe sobre la experiencia del usuario en Chrome (CrUX), puedes obtener rápidamente datos de campo para la 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 la INP se puede medir en algunas herramientas de lab, el valor de INP resultante de una página durante las pruebas de lab 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 de lab no informan 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 a lo largo del camino, 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 el INP

Hay disponible una colección de guías para optimizar la INP que te guiará en el proceso de identificar interacciones lentas en el campo y usar datos de lab para ayudarte a 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, es necesario realizar cambios a veces, 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

¿Cuál es el objetivo principal de la métrica INP?

Mide el tiempo que tarda en mostrarse el primer contenido de una página.

Incorrecto: Esta descripción corresponde a First Contentful Paint.

Para cuantificar la estabilidad visual de una página y minimizar los cambios de diseño inesperados.

Incorrecto: Esta opción describe el cambio de diseño acumulado.

Para evaluar el tiempo que tarda una página en ser totalmente interactiva.

Incorrecto: Esto se relaciona con el tiempo de interacción, pero la INP se enfoca específicamente en la capacidad de respuesta a las entradas del usuario.

Para minimizar el tiempo desde que un usuario inicia una interacción hasta que se pinta el siguiente fotograma, para todas o la mayoría de las interacciones que inicia el usuario.

Correcto.

¿Cuáles de los siguientes tipos de interacción se observan para calcular el INP? (Selecciona todas las opciones que correspondan).

Hacer clic con el mouse

Correcto.

Desplazarse por la página con la rueda del mouse o el panel táctil

Incorrecto: INP no considera el desplazamiento.

Presionar una pantalla táctil.

Correcto.

Colocar el cursor del mouse sobre los elementos

Incorrecto: INP no considera colocar el cursor sobre un elemento

Presionar una tecla en un teclado

Correcto.

Acerca o aleja la página.

Incorrecto: El INP no considera el zoom.

¿Cómo se define la "latencia" de una interacción para la INP?

Es la cantidad de tiempo que el navegador tarda en procesar los controladores de eventos de una interacción.

Incorrecto: Solo se tiene en cuenta la duración del procesamiento, no la demora de entrada ni el tiempo para presentar el siguiente fotograma.

Es el tiempo promedio que tardan todas las interacciones en una página en producir una respuesta visual.

Incorrecto: INP se enfoca en la interacción más larga, no en el promedio.

Es el tiempo que tarda el navegador en comenzar a procesar los controladores de eventos asociados con una interacción.

Incorrecto: Esto solo tiene en cuenta la demora de entrada, no el tiempo de procesamiento y renderización.

Es el tiempo desde el inicio de la interacción hasta el momento en que se presenta por completo el siguiente fotograma.

Correcto.

¿Cuál es la diferencia entre INP y FID?

El INP mide el tiempo que tarda en mostrarse el primer contenido de una página, mientras que el FID mide la capacidad de respuesta a las entradas del usuario.

Incorrecto: Aquí se describe el primer procesamiento de imagen con contenido, no la INP.

El INP considera la duración completa de todas las interacciones, mientras que el FID solo mide la demora de entrada de la primera interacción.

Correcto.

INP y FID miden las diferentes marcas de tiempo en las que una página se vuelve interactiva.

Incorrecto: La INP y el FID miden la rapidez con la que la página responde a las interacciones, independientemente de cuándo ocurran.

No hay diferencia. INP y FID son solo dos nombres diferentes para la misma métrica.

Incorrecto: Tienen definiciones distintas.

¿En qué circunstancias es posible que los datos de INP no estén disponibles para una página en herramientas como PageSpeed Insights?

La página usa una biblioteca de medición de rendimiento personalizada que no informa datos de INP.

Incorrecto: el INP se mide automáticamente con las APIs de la plataforma web y no depende de que las páginas informen su rendimiento a través de bibliotecas personalizadas.

No hay suficientes datos de interacción de los usuarios de Chrome para calcular un valor de INP significativo en el conjunto de datos de CrUX.

Correcto.

Los usuarios interactuaron con la página solo a través del desplazamiento y el desplazamiento del cursor, que no se consideran para la INP.

Correcto.

La página se compila con un framework que se optimiza automáticamente para INP, por lo que no es necesario informarla.

Incorrecto: Los frameworks pueden ayudar con la INP, pero la métrica sigue siendo relevante y se informa si hay datos disponibles.

¿Cuál es la estrategia más eficaz para reproducir interacciones lentas en un entorno de lab?

Simular un dispositivo de alta gama con una conexión de red lenta y poco confiable para crear condiciones desafiantes

Incorrecto: Si bien la red puede desempeñar una función importante, es más probable que las capacidades del dispositivo expongan interacciones lentas.

Probar las interacciones solo después de que la página se cargue por completo y esté inactiva

Incorrecto: Es posible que se pasen por alto interacciones que son lentas durante la carga

Interactuar con la página durante la carga y seguir flujos de usuarios comunes para identificar posibles cuellos de botella

Correcto.

Enfócate en interacciones complejas y de casos extremos que es poco probable que la mayoría de los usuarios encuentre.

Incorrecto: Los flujos de usuarios comunes son más relevantes para identificar problemas de INP típicos.

✨ Este cuestionario lo generó Gemini 1.5 y lo revisaron personas. Comparte tus comentarios