Interaction to Next Paint (INP) es una métrica estable de Métricas web esenciales que evalúa la capacidad de respuesta de la página usando datos de la API de Event Timing. El INP observa la latencia de todas las interacciones de clic, presión y teclado con una página a lo largo de su vida útil e informa la duración más larga, sin tener en cuenta los valores atípicos. Un INP bajo significa que la página puede responder rápidamente de manera constante a la gran mayoría de las interacciones del usuario.
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 renderiza para mostrar que la interacción se realizó correctamente. Por ejemplo, puede proporcionar comentarios sobre lo siguiente:
- Indica si un artículo que agregaste a un carrito de compras en línea realmente se está agregando.
- Indica si se abrió un menú de navegación para dispositivos móviles.
- Si el servidor está autenticando los contenidos de un acceso.
Algunas interacciones suelen tardar más que otras, pero, en el caso de las interacciones complejas, es importante presentar rápidamente algunos comentarios visuales iniciales para informarle al usuario que algo está sucediendo. El tiempo hasta la próxima pintura es la oportunidad más temprana para hacer esto. Por lo tanto, el objetivo de INP es no 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 siguiente pintura. Si retrasas los comentarios visuales, haces que los usuarios piensen que la página no responde a sus acciones.
El objetivo de INP es minimizar el tiempo que transcurre 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.
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 de latencia inusualmente alta en un sitio que, de otro modo, tendría respuesta. Cuantas más interacciones ocurra, más probable será que suceda. Para contrarrestar esta situación y dar una mejor medición de la capacidad de respuesta real de esos tipos de páginas, ignoramos una interacción más alta por cada 50 interacciones. Como la gran mayoría de las experiencias de página no tienen más de 50 interacciones, el navegador casi siempre informa 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 brindar un valor más representativo de la experiencia general del usuario.
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 "presionar" en un dispositivo con pantalla táctil incluyen varios eventos, como pointerup, pointerdown y click. Una interacción se puede generar con JavaScript, CSS, controles integrados del navegador, como elementos de formulario, o una combinación de todos estos elementos.
La latencia de una interacción consiste en la duración única 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.
Punto clave: Para obtener más detalles sobre cómo se mide el INP, consulta "¿Qué contiene una interacción?".
¿Qué es una buena puntuación de INP?
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 igual o inferior a 200 milisegundos significa que la página tiene buena capacidad de respuesta.
- Un INP de entre 200 milisegundos y 500 milisegundos significa que la capacidad de respuesta de la página necesita mejoras.
- Un INP superior a 500 milisegundos significa que la página tiene una capacidad de respuesta deficiente.
¿Qué contiene una interacción?
A menudo, el impulsor principal de la interactividad es JavaScript, aunque los navegadores proporcionan interactividad a través de controles que no usan 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
Punto clave: El desplazamiento del cursor y el desplazamiento no influyen en el INP. Sin embargo, el desplazamiento con el teclado (barra espaciadora, Re Pág, Av Pág, etc.) implica pulsar una tecla, que puede activar otros eventos que el INP sí mide. El desplazamiento resultante no se tiene en cuenta en el cálculo del INP.
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. Como los usuarios finales no saben qué partes de la página se encuentran en los iframes, debes medir el INP dentro de los iframes para medirlo con precisión en toda la página. Sin embargo, las APIs web de JavaScript no tienen acceso al contenido del iframe y es posible que no puedan medir el INP en un iframe. Se muestra como una diferencia entre CrUX y RUM.
Las interacciones pueden constar de varios eventos. Por ejemplo, cuando se presiona una tecla, se incluyen los eventos keydown, keypress y keyup, y las interacciones de presión incluyen los eventos pointerup y pointerdown. El evento con la duración más larga dentro de la interacción se elige como su latencia.
El INP se calcula cuando el usuario abandona la página, lo que da como resultado un solo valor que represente la capacidad de respuesta general de la página durante 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)?
INP es la métrica sucesora de Retraso de primera entrada (FID). Si bien ambas son métricas de respuesta, FID solo midió el retraso de entrada de la primera interacción en una página. INP mejora el FID teniendo en cuenta todas las interacciones de la página, desde la demora de entrada hasta el tiempo que lleva ejecutar los controladores de eventos y, por último, hasta que el navegador pinta el siguiente fotograma.
Estas diferencias indican que INP y FID son tipos diferentes de métricas de respuesta. Cuando 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, INP es un indicador más confiable de la capacidad de respuesta general, independientemente del momento en que se producen las interacciones de la 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, incluidos los siguientes:
- Se cargó la página, pero el usuario nunca interactuó con ella.
- Se cargó la página, pero el usuario interactuó con ella mediante gestos que no se miden, como desplazarse o colocar el cursor sobre los elementos.
- Un bot, como un rastreador de búsqueda o un navegador sin interfaz gráfica, accede a la página y no tiene 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.
Punto clave: La mejor manera de medir el INP de tu sitio web es recopilar métricas de usuarios reales en el campo. Si acostumbras a emplear los datos de lab para evaluar el rendimiento, te recomendamos que leas Por qué los datos de los labs y los campos pueden ser diferentes (y qué hacer al respecto).
En el campo
Idealmente, tu recorrido hacia la optimización de INP comienza con los datos de campo. En el mejor de los casos, los datos de campo de la supervisión de usuarios reales (RUM) proporcionan 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, 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 del campo INP a través de CrUX en PageSpeed Insights, junto con datos sobre otras Métricas web esenciales. Como mínimo, puedes obtener una imagen de 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 puede decirte 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 descubrir 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 ayuda a evitar conjeturas y 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, hay algunas estrategias para reproducir interacciones lentas en el lab. Las estrategias incluyen seguir flujos comunes de usuarios y probar interacciones durante el proceso, además de interactuar con la página durante la carga, cuando el subproceso principal suele estar más activo, para exponer interacciones lentas durante esa parte crucial de la experiencia del usuario.
Cómo mejorar el INP
Consulta nuestra colección de guías sobre la optimización de INP para obtener orientación sobre cómo identificar interacciones lentas en el campo y usar los datos de lab para optimizarlas.
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 se deben 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 se muestran en este Registro de cambios.
Si tienes comentarios sobre estas métricas, envíalos en el grupo de Google web-vitals-feedback.