¿Qué es la interacción con la siguiente pintura (INP)? Cómo mejorar el INP

Interaction to Next Paint (INP) es una nueva métrica central de web vitals (CWV) que se centra en medir la capacidad de respuesta de una página web desde el momento en que un usuario interactúa con ella hasta el punto en que se representa la respuesta visual.

Esta métrica es fundamental para comprender y mejorar la experiencia del usuario (UX) de un sitio web, ya que se relaciona directamente con la rapidez con la que una página puede responder a las entradas del usuario.

Google introdujo INP como reemplazo del First Input Delay (FID) en los CWV como parte de sus esfuerzos continuos para mejorar el rendimiento web y la UX. El anuncio destaca la importancia de INP para medir la capacidad de respuesta de sitios y aplicaciones web, lo que marca un paso hacia una web más centrada en el usuario.

En este artículo, profundizaremos en las complejidades de INP, exploraremos su importancia y los métodos para optimizarlo para una experiencia web más fluida. Si es desarrollador web, propietario de un sitio o simplemente está interesado en el rendimiento web, el conocimiento y las herramientas que encontrará aquí le ayudarán a utilizar la métrica INP de forma eficaz.

¿Qué es la interacción con la siguiente pintura?

Interaction to Next Paint (INP) es la última incorporación a las métricas principales de Web Vitals de Google y mide la capacidad de respuesta de un sitio web o aplicación web a las interacciones del usuario.

Cuantifica específicamente el tiempo transcurrido entre una acción iniciada por el usuario (como hacer clic, tocar o presionar una tecla) y el momento en que la página se actualiza visualmente en respuesta a esa acción. Esta métrica es crucial para evaluar la rapidez y eficacia con la que un sitio web puede responder a las aportaciones de los usuarios.

Un aspecto clave de INP es que mide la capacidad de respuesta durante todo el ciclo de vida de la visita de un usuario a una página, no solo la interacción inicial. Esto la convierte en una métrica más completa que su predecesora, Retraso de la primera entrada (FID) , que solo tiene en cuenta el retraso en el procesamiento de la primera entrada.

INP es particularmente relevante para páginas con las que se interactúa durante un período más largo, como aplicaciones de una sola página, donde proporciona una representación más precisa de la experiencia general del usuario (UX).

¿Cómo se mide la interacción con la siguiente pintura (INP)?

Comprender cómo se mide la interacción con la siguiente pintura (INP) implica dividir el proceso en sus componentes principales. INP no se trata sólo de la respuesta inicial a una interacción, sino que abarca la secuencia completa desde la acción del usuario hasta la actualización visual en la página.

Pasos para medir el INP

• Captura de la interacción del usuario: La medición comienza en el momento en que un usuario interactúa con la página. Esta interacción podría ser un clic, un toque en una pantalla táctil o presionar una tecla en el teclado. INP se centra en estos tipos específicos de interacciones, ya que son acciones directas e intencionales que requieren una respuesta de la página.

• Retraso de entrada : La siguiente fase de la medición es el retraso de entrada. Este es el tiempo que tarda la página en comenzar a procesar la interacción. Durante esta fase, el navegador puede estar ocupado con otras tareas, lo que puede retrasar el procesamiento de la entrada del usuario.

• Tiempo de procesamiento : una vez que se procesa la entrada, la siguiente fase es el tiempo de procesamiento. Esto implica ejecutar los controladores de eventos asociados con la interacción. Estos controladores de eventos suelen ser funciones de JavaScript que se ejecutan en respuesta a la acción del usuario. El tiempo de procesamiento puede variar según la complejidad de las tareas que realizan estos manipuladores.

• Retraso de presentación: la siguiente fase es el retraso de presentación después de procesar la entrada. Este es el tiempo que tarda la página en generar la respuesta visual a la interacción. Incluye tareas como volver a calcular el diseño de la página, ejecutar cualquier cambio de CSS y volver a pintar el contenido de la página para reflejar la interacción.

• Actualización visual: El último paso es la actualización visual de la página, que es la culminación del proceso de interacción. Aquí es cuando el usuario ve el resultado de su acción, como la apertura de un menú, una indicación de envío de formulario o cualquier otro cambio visual en la página.

• Cálculo del INP: El INP total se calcula sumando el retraso de entrada, el tiempo de procesamiento y el retraso de presentación. Esto brinda una medida integral del tiempo desde la interacción inicial del usuario hasta la siguiente pintura, lo que refleja la actualización visual en la página.

¿Qué es una buena puntuación INP?

Para garantizar una experiencia de usuario (UX) satisfactoria, los sitios web deben aspirar a un INP de 200 milisegundos o menos. Este punto de referencia se considera un buen umbral para la mayoría de los usuarios, ya que indica que el sitio web responde y las interacciones se procesan rápidamente.

Al evaluar las puntuaciones del INP, es importante considerar la variabilidad de las experiencias del usuario en diferentes dispositivos y condiciones. Por lo tanto, un enfoque práctico es medir el percentil 75 de cargas de página, teniendo en cuenta tanto los dispositivos móviles como los de escritorio. Este método ayuda a capturar una visión más completa de la experiencia del usuario, garantizando que la mayoría de los usuarios reciban una experiencia receptiva.

Una puntuación INP alta puede afectar significativamente la experiencia del usuario, especialmente en sitios web con numerosos elementos interactivos, como editores de texto o juegos. En estos casos, un INP alto indica un riesgo de una mala experiencia del usuario debido a respuestas tardías a las interacciones del usuario. Por el contrario, una puntuación INP baja sugiere que el sitio web responde constantemente, lo que contribuye a una experiencia de usuario más fluida y agradable.

Diferencia entre el retardo de la primera entrada (FID) y la interacción con la siguiente pintura (INP)

Comprender la diferencia entre el retardo de la primera entrada (FID) y la interacción con la siguiente pintura (INP) es crucial para los desarrolladores web y propietarios de sitios que buscan optimizar la experiencia del usuario (UX). Si bien ambas métricas están diseñadas para medir la interactividad y la capacidad de respuesta, se centran en diferentes aspectos de las interacciones de los usuarios.

Retraso de la primera entrada (FID)

El retardo de la primera entrada mide el tiempo desde que un usuario interactúa por primera vez con una página (como hacer clic en un enlace o tocar un botón) hasta el momento en que el navegador realmente puede comenzar a procesar controladores de eventos en respuesta a esa interacción.

FID ayuda a comprender la UX durante la fase de carga de una página. Se trata de la impresión inicial: qué tan rápido una página puede comenzar a procesar una interacción después de que un usuario intenta interactuar con ella por primera vez.

Por ejemplo, considere un usuario que hace clic en un menú desplegable tan pronto como se carga la página. FID mediría el tiempo desde que el usuario hace clic hasta que comienza a aparecer el menú desplegable. Si el navegador está ocupado cargando la página, puede haber un retraso notable, lo que provocará una mala experiencia de usuario.

Interacción con la siguiente pintura (INP)

La interacción con Next Paint (INP), por otro lado, es una métrica más completa. Mide la latencia de todas las interacciones del usuario durante la vida útil de una visita a la página, no solo la primera. INP captura la duración completa desde que el usuario interactúa con la página hasta que la respuesta visual de esa interacción se representa en la pantalla. Esto incluye el tiempo necesario para el retraso de entrada, el procesamiento de la interacción y el retraso de la presentación.

Para ilustrar, imagine a un usuario interactuando con varios elementos en una página web, como escribir en un campo de búsqueda, seleccionar elementos de un menú y hacer clic en enlaces. INP mediría la capacidad de respuesta de cada una de estas interacciones, proporcionando una visión más amplia de la interactividad general de la página durante la visita del usuario.

Cómo medir la interacción con la siguiente pintura (INP)

El INP solo se puede medir con herramientas de campo, ya que requiere datos reales de interacción del usuario. Estas herramientas incluyen:

• PageSpeed Insights : proporciona una interfaz fácil de usar para ver las puntuaciones INP. PageSpeed Insights proporciona la puntuación del percentil 75 durante los últimos 28 días.

• Google BigQuery (CrUX Dashboard) : ofrece un contexto más histórico de las puntuaciones INP. Google mide todas las interacciones que los usuarios reales de Chrome tienen con una página y las almacena en el conjunto de datos CrUX.

• Herramienta Lighthouse : útil para depurar INP en tiempo real durante el desarrollo.

• Core Web Vitals Visualizer: ayuda a visualizar INP y otras métricas.

‍

Si bien el conjunto de datos de CrUX es la fuente final de las métricas de INP, es altamente anónimo y no proporciona monitoreo en tiempo real ni filtrado detallado. Los consultores de rendimiento web suelen confiar en el monitoreo de usuarios reales (RUM) para obtener información más detallada.

¿Cómo optimizar la interacción con la siguiente pintura?

Optimizar la interacción con Next Paint (INP) es clave para mejorar la capacidad de respuesta y la experiencia del usuario (UX) de un sitio web. A continuación se ofrecen consejos detallados sobre cómo optimizar INP:

1. Minimiza el procesamiento de la CPU en tu página

• Ejecución de código asincrónico : ejecute más código de forma asincrónica para garantizar que el usuario obtenga una actualización inmediata de la interfaz de usuario, incluso si aún hay algún procesamiento en segundo plano en curso.

• Perfilar el código del sitio web : utilice herramientas como el generador de perfiles de rendimiento DevTools para comprender lo que sucede en el hilo principal e identificar áreas de optimización.

• Revise los scripts de terceros: evalúe si los scripts de terceros están afectando la capacidad de respuesta de su sitio y configúrelos o pospóngalos según sea necesario.

2. Reducir el retraso de entrada

• Divida las tareas del hilo principal: reduzca y divida la actividad de la CPU en segundo plano en el hilo principal para minimizar el retraso de entrada.

• Métrica de tiempo total de bloqueo (TBT): utilice esta métrica en datos de laboratorio para identificar actividades en segundo plano que podrían estar bloqueando las interacciones del usuario.

• Optimice el código de terceros: si los scripts de terceros están provocando retrasos, explore opciones para reducir su impacto o cárguelos solo cuando sea necesario.

3. Optimice el tiempo de procesamiento

• Ejecución eficiente de código: investigue dónde pasa la mayor parte de su tiempo el navegador y optimice esas partes de su aplicación.

• Evite renderizaciones innecesarias: en marcos como React, asegúrese de que los componentes no se rendericen innecesariamente.

• Reducción del trabajo de diseño: si una cantidad significativa de actividad de la CPU es el resultado del trabajo de diseño, busque formas de reducir los diseños y los repintados.

4. Actualice la interfaz de usuario antes del procesamiento intensivo

• Comentarios inmediatos: proporcione comentarios visuales (como una rueda giratoria) antes de iniciar tareas que requieren un uso intensivo de la CPU.

• Utilice trabajadores web: para un procesamiento intensivo de JavaScript, considere utilizar trabajadores web para ejecutar tareas desde el hilo principal.

5. Evite bloquear los cuadros de diálogo

• Elementos de la interfaz de usuario sin bloqueo : reemplace los cuadros de diálogo nativos de alerta, confirmación y solicitud, que bloquean el hilo principal, con elementos de la interfaz de usuario sin bloqueo.

6. Reducir el retraso en la presentación

• Simplifique las actualizaciones de la página : si la representación del contenido de la página es lenta, concéntrese en mostrar primero el contenido importante para entregar el siguiente fotograma más rápidamente.

• Administre las interacciones en cola: tenga en cuenta cómo las interacciones en cola pueden aumentar el retraso de la presentación y adminístrelas de manera eficiente.

7. Mejores prácticas generales

• Supervise el rendimiento con regularidad: supervise continuamente el rendimiento de su sitio utilizando herramientas como Google PageSpeed Insights, Lighthouse y soluciones de monitoreo de usuarios reales (RUM).

• Manténgase actualizado con los CWV : realice un seguimiento de los cambios en las métricas principales de Web Vitals y ajuste sus estrategias de optimización en consecuencia.

Al implementar estas estrategias, puede mejorar significativamente el INP de su sitio web, lo que generará una experiencia más receptiva y fácil de usar. Recuerde, la optimización para INP es un proceso continuo que requiere monitoreo y ajustes periódicos basados en los patrones de interacción del usuario y las actualizaciones del sitio web.

Pensamientos finales

La interacción con Next Paint (INP) es una métrica clave para evaluar la capacidad de respuesta de las páginas web. Ofrece una visión integral de la rapidez con la que un sitio responde a las interacciones del usuario, superando el alcance del retardo de la primera entrada (FID) al medir la latencia de todas las interacciones, no solo de la primera.

Analizamos cómo medir el INP utilizando herramientas como PageSpeed Insights y Lighthouse y exploramos estrategias de optimización, como minimizar el procesamiento de la CPU y reducir el retraso de entrada. Estos pasos son cruciales para mejorar la experiencia del usuario (UX) y el rendimiento del sitio web.

Optimizar el rendimiento del sitio también puede ayudar a los editores a mejorar sus ingresos publicitarios. Después de todo, es más probable que un sitio bien optimizado anime al público a visitarlo más de una vez. Si está buscando mejorar la monetización de su sitio, considere ponerse en contacto con nosotros para obtener más información sobre cómo hemos ayudado a más de 350 editores en 60 países a aumentar sus ingresos desde 2015.

Preguntas frecuentes

¿Qué significa la interacción del usuario?

La interacción del usuario se refiere a cualquier acción que realiza un usuario en una página web, como hacer clic en un botón, tocar un enlace o escribir en un campo de texto. Estas interacciones son la forma en que los usuarios se comunican con un sitio web, iniciando una respuesta o cambio en la página. Las interacciones del usuario son fundamentales para la funcionalidad de las aplicaciones web, ya que desencadenan eventos que conducen a cambios dinámicos, actualizaciones de contenido o navegación dentro del sitio.

¿Es INP una métrica central de Web Vitals?

INP reemplazará al First Input Delay (FID) como métrica Core Web Vitals en marzo de 2024. Los CWV son un conjunto de métricas que Google utiliza para evaluar la experiencia del usuario (UX) de una página web, centrándose en aspectos como la carga de la página, la interactividad, y estabilidad visual.

¿Qué interacciones del usuario considera el INP?

INP considera interacciones como clics del mouse, toques en una pantalla táctil y pulsaciones de teclas. Son acciones directas que realizan los usuarios para interactuar con un sitio web. INP no incluye interacciones pasivas como desplazarse o desplazarse. La métrica se centra en interacciones activas en las que el usuario espera una respuesta del sitio web, lo que la convierte en una medida valiosa del rendimiento interactivo de un sitio.

¿Qué son las cookies?

Las cookies son pequeños archivos de datos que un navegador web almacena en el dispositivo de un usuario cuando visita sitios web. Se utilizan para recordar información sobre el usuario, como detalles de inicio de sesión, preferencias e historial de navegación.

Las cookies ayudan a personalizar la experiencia del usuario, mantener los estados de la sesión y rastrear el comportamiento del usuario con fines analíticos y publicitarios. Si bien son esenciales para muchas funcionalidades web, las cookies también plantean consideraciones de privacidad, lo que lleva a regulaciones sobre su uso y el consentimiento del usuario.

¿Cuál es un ejemplo de interacción con Next Paint?

Un ejemplo de interacción con Next Paint sería un usuario que hace clic en el botón "Enviar" en un formulario y el tiempo que tarda el mensaje de confirmación en aparecer en la pantalla. INP mide la duración desde el clic hasta la actualización visual de la confirmación. Esta métrica ayuda a identificar interacciones lentas, lo cual es esencial si desea mejorar la experiencia del usuario de su sitio.