Interacción con Next Paint: ¿Qué es y cómo hacerlo?

¿Alguna vez ha experimentado un sitio web o una aplicación lenta y que no responde?

Quizás hizo clic en un botón y tardó mucho en aparecer algo en la pantalla. Esa es una experiencia frustrante, ¿verdad?

De eso se trata exactamente “Interacción con la siguiente pintura” (INP).

La interacción con Next Paint (INP) es una métrica emergente que Google utiliza para evaluar la rapidez con la que su sitio web responde a las entradas de los usuarios. El 12 de marzo de 2024, se convirtió en uno de los criterios de Core Web Vitals que impactan las clasificaciones de Google.

¿Por qué esto importa?

En la era digital actual, la gente espera que las cosas sucedan instantáneamente. Si un sitio web o una aplicación no responde rápidamente a sus acciones, es probable que se sienta insatisfecho y abandone el negocio. ¡Nadie tiene tiempo para aplicaciones lentas hoy en día!

Optimizar INP es crucial para ofrecer una experiencia de usuario agradable y fluida que los mantenga interesados ​​y satisfechos. Cuanto menor sea el INP, mayor será el rendimiento percibido de su sitio web o aplicación.

Examinemos el INP en profundidad y exploremos cómo medirlo para mejorar su puntuación actual.

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

Interacción con Next Paint (INP) es una métrica de rendimiento web que cuenta el tiempo entre una interacción del usuario (como un clic, un toque o un desplazamiento) y la próxima vez que se pintan píxeles en la pantalla como resultado de esa interacción.

En términos simples, INP mide la rapidez con la que una página web o aplicación responde visiblemente a la interacción del usuario. Un número de INP más bajo indica una experiencia con mayor capacidad de respuesta, mientras que un valor de INP más alto indica un retraso notable entre la acción del usuario y la actualización visual en la pantalla.

Para la mayoría de las interacciones del usuario, el valor INP sugerido es inferior a 200 milisegundos (ms). Un valor INP de más de 300 ms se considera deficiente y los usuarios lo considerarán lento

Interacción con Next Paint como elemento central de la web

La interacción con Next Paint se introdujo como una de las tres métricas de Google Core Web Vitals el 12 de marzo de 2024. Reemplazó la métrica anterior de retraso de la primera entrada.

Como métrica de Core Web Vitals, la mala interacción con Next Paint puede influir en su clasificación de búsqueda en Google.

¿En qué se diferencia la interacción con la siguiente pintura del primer retraso de entrada?

INP es la medida sucesora del retardo de la primera entrada (FID). Ambas son métricas de capacidad de respuesta.

FID e INP varían de dos maneras:

• FID solo mide el primer retraso de procesamiento, mientras que INP mide todo el tiempo entre la entrada del usuario y la actualización de la interfaz de usuario.
• FID simplemente cuenta la interacción inicial del usuario en una página, pero INP considera (aproximadamente) la mayor latencia.

First Input Delay estima cuánto tiempo le toma al navegador comenzar a procesar la entrada del usuario. No se incluye el tiempo real dedicado a responder a eventos o cambiar la interfaz de usuario.

Como su nombre lo indica, FID solo analiza la interacción inicial que tiene el usuario con el sitio web. Es posible que este contacto inicial no refleje con precisión la experiencia general del usuario, especialmente en el caso de sitios que permanecen abiertos durante un período prolongado, como las aplicaciones de una sola página.

La interacción con Next Paint normalmente evalúa la peor latencia de entrada en la página. Sin embargo, si hay muchos encuentros con usuarios, los valores atípicos se descartarán y Google evaluará el percentil 98 de retraso en la interacción.

Entonces, si el INP de una página es de 250 milisegundos, el 2% de las interacciones del usuario tuvieron una latencia mayor que esa.

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

INP es una métrica de capacidad de respuesta que se centra en el tiempo transcurrido entre las interacciones del usuario. Mide la rapidez con la que responde un elemento de una página web cuando se realiza una acción específica en él.

Así es como funciona INP:

• Un usuario interactúa con una página web haciendo clic en un botón.
• El navegador solicita contenido nuevo del servidor web.
• El servidor web ofrece contenido nuevo al navegador.
• El navegador muestra el nuevo contenido de la página.
• El navegador calcula el tiempo necesario para crear el nuevo contenido y lo informa como puntuación INP.

Una calificación INP baja indica que la página responde extremadamente a las aportaciones del usuario. Como parte de Core Web Vitals, INP es importante por las siguientes razones:

• Mejorada la experiencia del usuario:Una puntuación INP alta indica que los visitantes deben esperar mucho tiempo para que la página web responda a sus actividades, lo que puede resultar molesto.

• SEO (optimización de motores de búsqueda):INP y otros Core Web Vitals son parte de las señales de experiencia de la página de Google, que influyen en la clasificación de un sitio web en las páginas de resultados de búsqueda. Esto enfatiza la importancia del INPMétrica SEO.

• Reducir la tasa de rebote:Los tiempos de carga lentos pueden hacer que los clientes abandonen la página, lo que reduce los resultados de su empresa.

¿Cómo se mide el INP?

INP monitorea el tiempo que pasa entre la entrada del usuario, como clics y pulsaciones de teclas, y la siguiente actualización de la interfaz de usuario. Este retraso tiene tres componentes:

a. Retraso de entrada

Esperando operaciones en segundo plano en el sitio web para evitar que se ejecute el controlador de eventos.

b. Tiempo de procesamiento

Ejecutar controladores de eventos en JavaScript.

do. Retraso en la presentación

Ocuparse de otras operaciones pendientes, recalcular el diseño de la página y pintar el contenido de la página. Los INP se miden en milisegundos (ms). Un buen punto de referencia es menos de 200 ms, y se considera que es necesario mejorar cualquier valor entre esa cifra y 500 ms. Una latencia de 500 ms o más se considera mala.

Varias variables pueden influir en un valor INP, incluido el tamaño y la complejidad de una página web, así como la cantidad de archivos JavaScript y CSS cargados.

Puede utilizar muchas herramientas para evaluar la interacción con Next Paint, como por ejemplo:

• Prueba de velocidad del sitio web de DebugBear
• Estadísticas de velocidad de la página de Google
• Nuestra extensión de Chrome para la velocidad del sitio
• Depurador INP
• Consola de búsqueda de Google
• La biblioteca de Web Vitals

Las herramientas de prueba de velocidad de un sitio web pueden ayudarlo a determinar el valor INP de un sitio web. Este tipo de aplicación puede proporcionar información sobre el rendimiento de sus métricas de Core Web Vitals y ofrecer orientación sobre cómo optimizarlas.

Google PageSpeed ​​Insights es una herramienta popular para analizar INP yrendimiento del sitio web. Evaluará un sitio y hará recomendaciones sobre las mejores prácticas a aplicar. También puede examinar qué tan rápido se carga su sitio web en dispositivos móviles y de escritorio.

PageSpeed ​​Insights presenta dos tipos de hallazgos. La parte superior muestra las métricas de Core Web Vitals de un sitio del informe Chrome UX, una colección de métricas de rendimiento del mundo real de los usuarios de Chrome.

Los valores que se muestran en el siguiente informe provienen de un entorno de laboratorio controlado que utiliza Google Lighthouse. Estos datos se pueden utilizar para probar nuevas funciones antes de que entren en funcionamiento.

Si los datos INP del sitio no están disponibles, consulte su tiempo total de bloqueo (TBT). Esta métrica evalúa una nueva forma de capacidad de respuesta. Se centra en cuánto tiempo un sitio web no puede responder a la interacción del usuario mientras se carga.

Hacia abajo, hay ideas sobre cómo mejorar las métricas de Core Web Vitals, de la siguiente manera:

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

Entonces, para optimizar INP, desea simplificar y priorizar la lista de tareas pendientes para el hilo principal tanto como sea posible. A continuación se muestran algunas estrategias y formas importantes de optimizar para mejorar los valores de interacción con la siguiente pintura (INP) y aumentar la capacidad de respuesta:

a. Mejorar el rendimiento de JavaScript

JavaScriptes un componente clave de muchos sitios web. Ofrece muchos elementos interactivos; sin embargo, también puede reducir la velocidad del sitio.

Cuando se ejecuta JavaScript, se ejecuta en el hilo principal, que es responsable de representar una página web. Si el código es ineficiente, puede hacer que el hilo se detenga e impida que el sitio web responda a la entrada del usuario.

Para mejorar la capacidad de respuesta, optimice su JavaScript. Puedes lograr esto mediante:

• Minimizar archivos JavaScriptreduce la cantidad de JavaScript, permitiéndole cargar másrápidamente.

• Habilite la compresión GZip.Otra forma común de comprimir archivos y datos de sitios web.

• Usando un marco de JavaScript.Esta herramienta puede ayudarle a organizar su código JavaScript y hacerlo más eficiente. AngularJS y jQuery son ejemplos bien conocidos.

• Utilizando CDN.Esta tecnología, conocida como red de entrega de contenido, distribuirá sus archivos JavaScript desde servidores ubicados cerca de su público objetivo, lo que resultará en tiempos de carga más rápidos.

JavaScript ineficiente puede bloquear el hilo principal, provocando retrasos en la renderización. La división de código, la carga diferida, el uso de trabajadores web y evitar operaciones de larga duración en el hilo principal son opciones para disminuir el retraso de JavaScript.

b. Utilice trabajadores web

Los trabajadores web son un servicio que permite que JavaScript se ejecute independientemente del hilo principal. Son útiles para ejecutar tareas complicadas en segundo plano.

Suponga que tiene un sitio web de WordPress cargado de fotos, videos y datos. Los trabajadores web pueden trasladar estas costosas operaciones de JavaScript a un hilo en segundo plano, evitando que su interfaz se bloquee.

Otra forma de evitar que el hilo principal se detenga es dividir trabajos de JavaScript grandes en otros más pequeños.

do. Dividir tareas largas

Dividir tareas grandes permite que el navegador web las maneje en partes más pequeñas a la vez. Como resultado, el hilo principal queda libre para realizar tareas más importantes.

Como usted sabe, las tareas largas bloquean el hilo principal, impidiendo que el navegador realice eventos de interacción. Paramejore la capacidad de respuesta de su sitio, reduzca la tensión en el hilo principal e intente dividir operaciones grandes.

Al dividir actividades grandes en partes más pequeñas, el hilo principal puede realizar otros trabajos y responder a las interacciones del usuario más rápidamente.

Además, dividir tareas largas ayuda a minimizar el efecto “jank”, en el que las animaciones y transiciones en el sitio web se vuelven entrecortadas o tartamudean debido aa un hilo principal sobrecargado. Al garantizar que cada actividad se complete en un período de tiempo más corto, el sitio web puede proporcionar una experiencia visual más fluida para el usuario.

d. Priorizar la preparación de los insumos

La preparación de entrada se refiere a la capacidad de una página web para responder a la interacción del usuario. Cuando no es así, normalmente significa que el hilo principal del navegador está ocupado con otras tareas.

A continuación se explica cómo priorizar la preparación de los insumos y aumentar el INP:

1. Se aplazará el JavaScript no crítico

Parte de JavaScript no es necesario para la carga inicial de la página y se puede ejecutar después delprincipal. contenido. Esto permite que el hilo principal priorice las interacciones del usuario y aumente la capacidad de respuesta general de la página.

2. Limitación

Esta estrategia determina la frecuencia con la que se ejecuta una función. Por ejemplo, cuando un usuario se desplaza hacia abajo, el mismo código podría ejecutarse cientos de veces por segundo. La limitación le permite ejecutarse solo una vez por milisegundo aproximadamente, independientemente de cuántas veces se active el evento.

3. Antirrebote

Esto prohíbe que una función se ejecute nuevamente hasta que haya transcurrido un cierto período. Por ejemplo, cuando los usuarios cambian el tamaño de la ventana de su navegador, este evento puede iniciar el mismo procedimiento muchas veces. La eliminación de rebotes se puede utilizar para posponer la ejecución hasta que el usuario deje de cambiar el tamaño durante un período predeterminado.

4. Oyentes del evento que no participan activamente

Los detectores de eventos son construcciones informáticas que detectan ciertos eventos, como desplazamientos y toques. Hacerlos pasivos le indica al navegador que omita la espera a que se complete una función específica y, en su lugar, continúe con otras actividades.

mi. Proporcionar comentarios inmediatos

Ciertas actividades, como completar un formulario con varias entradas de datos, pueden provocar retrasos importantes en la respuesta.

Ahí es donde entra en juego la retroalimentación instantánea. Esta estrategia proporciona a los clientes una indicación visible de que el sitio web ha recibido y está procesando su solicitud.

Los usuarios no se quedarán preguntándose si el sitio web ha registrado sus comentarios si reciben comentarios rápidos. Puede dar la impresión de un rendimiento más rápido, incluso si en realidad no reduce el tiempo de procesamiento.

Consulte estos ejemplos de señales de retroalimentación rápida:

1. Indicadores de carga

Muestre una rueda giratoria o una barra de progreso cuando se esté ejecutando un proceso, especialmente al presentar datos o cambiar a una nueva página.

2. Mensajes emergentes de confirmación

Es una buena idea mostrar un mensaje que confirme que una operación, como agregar un artículo al carrito, se completó con éxito.

3. Validación del campo del formulario

Por ejemplo, si un usuario ingresa una dirección de correo electrónico mal formada, muestre un aviso de error inmediatamente en lugar de esperar hasta que se envíe el formulario.

Conclusión

Al final del día, presentando ungran experiencia de usuarioen la web se reduce a una cosa: capacidad de respuesta. La velocidad a la que su sitio web o aplicación responde a los eventos del usuario, como clics, toques y navegación, puede determinar si es una experiencia agradable o frustrantemente lenta.

Por eso es tan importante optimizar el tiempo de interacción con la siguiente pintura (INP). INP monitorea los minutos importantes entre el momento en que alguien interactúa con su sitio web y el momento en que recibe la confirmación visual en su pantalla. Cuanto menor es el INP, más rápido y con mayor capacidad de respuesta parece todo.

¡Así que adelante y desbloquea el poder del INP optimizado!

Descubra la rápida capacidad de respuesta que distingue a los sitios web promedio de aquellos que parecen lujosamente rápidos y fluidos. De esto dependen la satisfacción de sus usuarios y el éxito de sus experiencias digitales.

Preguntas frecuentes