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. Cuando una página responde a una interacción, el navegador presenta comentarios visuales en el siguiente marco que pinta. 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 llevan más tiempo que otras, pero, en el caso de las interacciones complejas, es importante presentar rápidamente algunos comentarios visuales iniciales para decirle al usuario que algo está sucediendo. El siguiente marco 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 la IU a partir de otras operaciones asíncronas, sino el tiempo en que se bloquea la pintura siguiente. Al retrasar los comentarios visuales, es posible que los usuarios tengan la impresión de que la página no responde lo suficientemente rápido, y el INP se desarrolló para ayudar a los desarrolladores a medir esta parte de la experiencia del usuario.
En el siguiente vídeo, el ejemplo de la derecha proporciona información visual inmediata de que se está abriendo un acordeón. En el ejemplo de la izquierda, se demuestra una capacidad de respuesta deficiente y cómo puede crear experiencias del usuario deficientes.
En esta guía, 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.
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 una página responsiva. Cuantas más interacciones se produzcan en una página determinada, más probable será que esto suceda.
Para medir mejor 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 tiene más de 50 interacciones, por lo que la peor interacción es la que más se registra. 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 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 impulsan la interacción, desde el momento en que el usuario comienza la interacción hasta el momento en que el navegador pinta el siguiente fotograma.
¿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 inferior o de 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 una página debe mejorarse.
- 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 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 que se necesita un INP dentro de los iframes para medir la experiencia del usuario en la página de nivel superior. Como las APIs web de JavaScript no tienen acceso al contenido de los iframes, esto puede mostrar 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 dentro de la interacción es el que contribuye a su latencia total.
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 a lo largo de su ciclo de vida. Un INP bajo significa que la página respondió 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 capacidad de respuesta, FID solo midió el retraso de entrada de la primera interacción en una página. INP mejora el FID observando todas las interacciones en una página, desde la demora en la 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 tanto INP como FID son tipos diferentes de métricas de capacidad de respuesta. Cuando FID era una métrica de capacidad de respuesta a la 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, entre los que se incluyen los siguientes:
- 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 no medidos, como desplazarse o colocar el cursor sobre los elementos.
- 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) te 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 otros tiempos valiosos que pueden ayudarte a identificar qué parte de la interacción afectó 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 de origen del INP de tu sitio web, pero en algunos casos, también puedes obtener datos a nivel de la URL.
Sin embargo, CrUX puede indicarte si hay un problema, pero no puede decirte la causa. Una solución RUM puede ayudarte a descubrir más detalles sobre las páginas, los usuarios o las interacciones de los usuarios que están experimentando problemas de capacidad de respuesta. 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 una página tiene interacciones lentas. Sin embargo, si no tienes datos de campo, existen algunas estrategias para reproducir interacciones lentas en el lab. Las estrategias incluyen seguir flujos comunes de usuarios y probar interacciones a lo largo del proceso, además de interactuar con la página mientras se carga (cuando el subproceso principal suele estar más activo) para identificar 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 guiarlo en el proceso de identificación de interacciones lentas en el campo y usar los datos de laboratorio para identificar las causas y 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 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, envíalos en el grupo de Google web-vitals-feedback.
Pon a prueba tus conocimientos
¿Cuál es el objetivo principal de la métrica INP?
¿Cuáles de los siguientes tipos de interacción se observan para calcular el INP? Selecciona todas las opciones que correspondan.
¿Cómo se define la “latencia” de una interacción para INP?
¿Cuál es la diferencia entre INP y FID?
¿En qué circunstancias los datos de INP podrían no estar disponibles para una página en herramientas como PageSpeed Insights?
¿Cuál es la estrategia más efectiva para reproducir interacciones lentas en un entorno de lab?
✨ Este cuestionario fue generado por Gemini 1.5 y revisado por personas. Comparte tus comentarios