Interacción a la siguiente pintura (INP)

Navegadores compatibles

  • 96
  • 96
  • x
  • x

Origen

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 del INP.

Una buena capacidad de respuesta significa que una página responde rápidamente a las interacciones que se realizan con ella. Cuando una página responde a una interacción, el resultado son los comentarios visuales, que el navegador presenta en el siguiente marco que presenta. Los comentarios visuales te indican, por ejemplo, si un artículo que agregas a un carrito de compras en línea realmente se está agregando, si se abrió un menú de navegación móvil, si el servidor está autenticando el contenido de un formulario de acceso, etcétera.

Algunas interacciones llevarán más tiempo que otras, pero, en el caso de las interacciones complejas, es importante presentar rápidamente algunos comentarios visuales iniciales como una señal para el usuario de que algo está sucediendo. El tiempo hasta la próxima pintura es la primera oportunidad para hacer esto. Por lo tanto, la intención de INP no es medir todos los efectos finales de la interacción (como las recuperaciones de red y las actualizaciones de la IU a partir de otras operaciones asíncronas), sino el tiempo en el que se bloquea la pintura siguiente. Si retrasas los comentarios visuales, podrías dar la impresión de que la página no responde a sus acciones.

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

En el siguiente vídeo, el ejemplo de la derecha proporciona información visual inmediata de que se está abriendo un acordeón. También demuestra cómo una capacidad de respuesta deficiente puede generar varias respuestas no deseadas porque el usuario cree que la experiencia no funciona.

Un ejemplo de respuesta deficiente frente a buena respuesta. A la izquierda, las tareas largas bloquean el acordeón. Esto hace que el usuario haga clic varias veces y piense 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.

En este artículo, se explica cómo funciona 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 observando la latencia de todas las interacciones de clic, presión y teclado que ocurren durante el ciclo de vida de 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.

Nota sobre cómo se calcula el INP

Como se indicó anteriormente, el INP se calcula observando todas las interacciones que se realizan con una página. En la mayoría de los sitios, la interacción con la peor latencia se registra como INP. Sin embargo, en el caso de las páginas con una gran cantidad de interacciones, los errores aleatorios pueden provocar una interacción inusualmente alta en un sitio responsivo. Cuantas más interacciones ocurra, más probable será que suceda. Para contrarrestar esta situación y medir mejor la capacidad de respuesta real de esos tipos de páginas, ignoramos una interacción más alta por cada 50 interacciones. La gran mayoría de las experiencias de página no tiene más de 50 interacciones, por lo que se informará la peor interacción. Luego, el percentil 75 de todas las vistas de página se informa como de costumbre, lo que quita aún más los valores atípicos para dar un valor que la gran mayoría de los usuarios experimentan 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 "presionar" 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 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 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 información visual.

¿Qué es una buena puntuación de INP?

Es difícil fijar etiquetas como “buena” o “mala” en una métrica de capacidad de respuesta. Por un lado, desea fomentar prácticas de desarrollo que prioricen una buena capacidad de respuesta. Por otro lado, debes tener en cuenta que existe una gran variabilidad en las capacidades de los dispositivos que las personas utilizan para establecer expectativas de desarrollo alcanzables.

Para garantizar que ofreces 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 a continuación o en 200 milisegundos significa que la página tiene buena capacidad de respuesta.
  • Un INP superior a 200 milisegundos o menos o a 500 milisegundos significa que la capacidad de respuesta de la página debe mejorarse.
  • Un INP superior a 500 milisegundos significa que la página tiene una capacidad de respuesta deficiente.
Los buenos valores de INP son de 200 milisegundos o menos, los valores malos son mayores a 500 milisegundos y cualquier valor intermedio debe mejorarse.

¿Qué contiene una interacción?

Un diagrama que muestra una interacción en el subproceso principal. El usuario realiza una entrada mientras bloquea la ejecución de tareas. La entrada se retrasa hasta que se completan esas tareas, después de lo cual se ejecutan los controladores de eventos de puntero, mouseup y clic. Luego, se inicia el trabajo de renderización y pintura hasta que se presente el siguiente fotograma.
El ciclo de vida de una interacción. Un retraso en la entrada se produce hasta que los controladores de eventos comienzan a ejecutarse. Esto puede deberse a factores como tareas largas en el subproceso principal. Luego, se ejecutan los controladores de eventos de la interacción y se produce un retraso antes de que se presente el siguiente fotograma.

A menudo, el impulsor principal de la interactividad es JavaScript, aunque los navegadores proporcionan interactividad a través de controles que no usan la tecnología de JavaScript, como casillas de verificación, botones de selección y controles con tecnología CSS.

En lo que respecta al INP, solo se observan los siguientes tipos de interacción:

  • Hacer clic con un mouse
  • Presionar 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 incorporados en el documento, por ejemplo, cuando se hace clic en reproducir en un video incorporado. Los usuarios finales no sabrán lo que hay en un iframe o no. Por lo tanto, el INP dentro de los iframes es necesario para medir la experiencia del usuario en la página de nivel superior. Ten en cuenta que las APIs web de JavaScript no tendrán acceso al contenido del iframe, por lo que es posible que no puedan medir el INP dentro de un iframe. Esto se mostrará como una diferencia entre CrUX y RUM.

Las interacciones pueden constar de dos partes, cada una con varios eventos. Por ejemplo, una combinación de teclas consta de los eventos keydown, keypress y keyup. Las interacciones de presión contienen eventos pointerup y pointerdown. Se elige el evento con la duración más larga dentro de la interacción como su latencia.

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 pone en marcha 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 con el 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 se calcula cuando el usuario abandona la página, lo que da como resultado un solo valor que representa la capacidad de respuesta general de la página durante todo su ciclo de vida. Un INP bajo significa que la página responde de forma confiable a las entradas del usuario.

¿Cuál es la diferencia entre INP y Retraso de primera entrada (FID)?

Mientras que el INP considera todas las interacciones de la página, la Retraso de primera entrada (FID) solo considera la primera interacción. Además, solo mide el retraso de entrada de la primera interacción, no el tiempo que lleva ejecutar controladores de eventos ni el retraso en la presentación del siguiente fotograma.

Dado que FID también es una métrica de capacidad de respuesta de la carga, la lógica es que, si la primera interacción realizada con una página en la fase de carga tiene poca o ninguna demora de entrada perceptible, significa que la página dio una buena primera impresión.

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

¿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 varias razones:

  • Se cargó la página, pero el usuario nunca hizo clic, presionó ni presionó una tecla del teclado.
  • Se cargó la página, pero el usuario interactuó con ella mediante gestos que no implican hacer clic, presionar ni usar el teclado. Por ejemplo, el desplazamiento o el desplazamiento sobre los elementos no influye en el cálculo del INP.
  • Un bot, como un rastreador de búsqueda o un navegador sin interfaz gráfica, tiene acceso a la página y no tiene una secuencia de comandos para interactuar con la página.

Cómo medir el INP

El INP se puede medir en el campo y en el lab con una variedad de herramientas.

En el campo

Idealmente, tu recorrido en la optimización del 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) proporcionarán no solo el valor de INP de una página, sino también datos contextuales que destacan 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, pulsación de tecla o toque) y otra información valiosa.

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 de origen del INP de tu sitio web, pero en algunos casos, también puedes obtener datos a nivel de la página.

Sin embargo, si bien CrUX es útil para indicarte que hay un problema a nivel general, a menudo no proporciona suficientes detalles para ayudar a comprender completamente cuál es el problema. Una solución de RUM puede ayudarte a desglosar más detalles sobre las páginas, los usuarios o las interacciones de los usuarios que experimentan interacciones lentas. Poder atribuir el INP a interacciones individuales evita las conjeturas y el esfuerzo desperdiciado.

En el laboratorio

Lo ideal es que comiences las pruebas en el lab una vez que tengas datos de campo que sugieran que tienes interacciones lentas. Sin embargo, ante la ausencia de datos de campo, existen algunas estrategias para reproducir interacciones lentas en el lab. Estas estrategias incluyen seguir flujos de usuarios comunes y probar interacciones a lo largo del proceso, así como interactuar con la página durante la carga (cuando el subproceso principal suele estar más activo) para mostrar interacciones lentas durante esa parte fundamental de la experiencia del usuario.

Cómo mejorar el INP

Hay una colección de guías sobre la optimización de INP disponible para guiarte en el proceso de identificación de interacciones lentas en el campo y usar datos de laboratorio para desglosarlas y optimizarlas de diversas maneras.

Registro de cambios

Ocasionalmente, se descubren errores en las APIs que se usan para medir métricas y, a veces, en las definiciones de las métricas en sí. Como resultado, a veces es necesario realizar cambios, que pueden aparecer como mejoras o regresiones en tus informes y paneles internos.

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

Si tienes comentarios sobre estas métricas, puedes enviarlos en el grupo de Google web-vitals-feedback.