Optimización de la interacción a la siguiente pintura: una guía paso a paso

Esta publicación fue patrocinada por Debugbear. Las opiniones expresadas en este artículo son propias del patrocinador.

Mantener su sitio web rápido es importante para la experiencia del usuario y el SEO.

La iniciativa Core Web Vitals de Google proporciona un conjunto de métricas para ayudarlo a comprender el rendimiento de su sitio web.

Las tres métricas Core Web Vitals son:

Esta publicación se centra en la métrica INP recientemente introducida y en lo que puede hacer para mejorarla.

¿Cómo se mide la interacción a la siguiente pintura?

INP mide qué tan rápido responde su sitio web a las interacciones del usuario, por ejemplo, un clic en un botón. Más específicamente, INP mide el tiempo en milisegundos entre la entrada del usuario y cuando el navegador ha terminado de procesar la interacción y está listo para mostrar cualquier actualización visual en la página.

Su sitio web necesita completar este proceso en menos de 200 milisegundos para obtener un “buen” puntaje. Los valores de más de medio segundo se consideran “pobres”. Una puntuación deficiente en una métrica de vital web central puede afectar negativamente la clasificación de su motor de búsqueda.

Google recopila datos INP de visitantes reales en su sitio web como parte del Informe de Experiencia de Usuario de Chrome (Crux). Estos datos de quid son lo que finalmente afecta las clasificaciones.

Cómo identificar y arreglar los tiempos de INP lentos

Los factores que causan una interacción deficiente en la siguiente pintura a menudo pueden ser complejos y difíciles de entender. Siga esta guía paso a paso para comprender las interacciones lentas en su sitio web y encontrar posibles optimizaciones.

1. Cómo identificar una página con tiempos de INP lentos

Diferentes páginas en su sitio web tendrán diferentes puntajes centrales de Web Vitals. Por lo tanto, debe identificar una página lenta y luego investigar lo que está causando que sea lento.

Usando la consola de búsqueda de Google

Una manera fácil de verificar sus puntajes de INP es utilizar la sección Core Web Vitals en la consola de búsqueda de Google, que informa los datos basados ​​en los datos de Google Crux que hemos discutido antes.

Por defecto, las URL de página se agrupan en grupos de URL que cubren muchas páginas diferentes. Tenga cuidado aquí: no todas las páginas pueden tener el problema que Google está informando. En su lugar, haga clic en cada grupo de URL para ver si los datos específicos de URL están disponibles para algunas páginas y luego concéntrese en ellas.

Uso de un servicio de monitoreo de usuario real (ron)

Google no informará los datos de Core Web Vitals para cada página de su sitio web, y solo proporciona las mediciones sin procesar sin ningún detalle para ayudarlo a comprender y solucionar los problemas. Para obtener que puede usar una herramienta de monitoreo de usuario real como Debugbear.

El monitoreo del usuario real funciona instalando un fragmento de análisis en su sitio web que mide qué tan rápido es su sitio web para sus visitantes. Una vez que esté configurado, tendrá acceso a una interacción al siguiente tablero de pintura como este:

Puede identificar las páginas que desea optimizar en la lista, pasar el paso a la URL y hacer clic en el icono del embudo para ver los datos solo para esa página específica.

Imagen creada por Debugbear, mayo de 2024

2. Descubra qué interacciones de elementos son lentas

Diferentes visitantes en la misma página tendrán diferentes experiencias. Mucho de eso depende de cómo interactúen con la página: si hacen clic en una imagen de fondo, no hay riesgo de que la página se congele repentinamente, pero si hacen clic en un botón que inicia un procesamiento pesado, eso es más probable. Y los usuarios en ese segundo escenario experimentarán INP mucho más altos.

Para ayudar con eso, los datos de ron proporcionan un desglose de los elementos de la página que interactuaron los usuarios y cuán grandes fueron los retrasos de interacción.

La captura de pantalla anterior muestra diferentes interacciones de INP ordenadas por la frecuencia de estas interacciones de usuario. Para que las optimizaciones lo sea lo más fácil posible, querrá concentrarse en una interacción lenta que afecte a muchos usuarios.

En Debugbear, puede hacer clic en el elemento de página para agregarlo a sus filtros y continuar su investigación.

3. Identifique qué componente INP contribuye más a las interacciones lentas

Los retrasos de INP se pueden dividir en tres componentes diferentes:

• Retraso de entrada: código de fondo que bloquea la interacción para ser procesada.
• Tiempo de procesamiento: el tiempo dedicado a manejar directamente la interacción.
• Retraso de presentación: Mostrar las actualizaciones visuales de la pantalla.

Debe concentrarse en qué componente INP es el mayor contribuyente al tiempo lento de INP, y asegurarse de tenerlo en cuenta durante su investigación.

En este escenario, el tiempo de procesamiento es el mayor contribuyente para el tiempo lento de INP para el conjunto de páginas que está viendo, pero debe profundizar para comprender por qué.

El alto tiempo de procesamiento indica que hay código que intercepta la interacción del usuario y la ejecución de código de rendimiento lento. Si, en su lugar, vio un alto retraso de entrada, eso sugiere que hay tareas de fondo que bloquean la interacción que se procesa, por ejemplo, debido a los scripts de terceros.

4. Verifique qué scripts está contribuyendo a INP lento

A veces, los navegadores informan scripts específicos que contribuyen a una interacción lenta. Es probable que su sitio web contenga scripts de terceros y de terceros, los cuales pueden contribuir a tiempos de INP lentos.

Una herramienta de ron como Debugbear puede recopilar y producir estos datos. Lo principal que desea ver es si ve principalmente su propio código de sitio web o código de terceros.

Consejo: Cuando ve un script o una función de código fuente marcada como “N/A”, esto puede indicar que el script proviene de un origen diferente y tiene restricciones de seguridad adicionales que evitan que las herramientas de ron capturen información más detallada.

Esto ahora comienza a contar una historia: parece que los scripts de análisis/terceros son los mayores contribuyentes a los tiempos de INP lentos.

5. Identifique por qué se están ejecutando esos scripts

En este punto, ahora tiene una fuerte sospecha de que la mayor parte del retraso de INP, al menos en las páginas y elementos que está viendo, se debe a los scripts de terceros. Pero, ¿cómo puede saber si esos son scripts generales de seguimiento o si realmente tienen un papel en el manejo de la interacción?

DeBugbear ofrece un desglose que ayuda a ver por qué el código se está ejecutando, llamado Desglose de Invocador de script primario de INP. Eso es un poco bocado: múltiples scripts diferentes pueden estar involucrados en la desaceleración de una interacción, y aquí solo ves al mayor contribuyente. El “Invoker” es solo un valor que el navegador informa sobre lo que causó que este código se ejecutara.

Los siguientes nombres de Invoker son ejemplos de controladores de eventos en toda la página:

• encerrar
• ondumedown
• inpointerup

Puede verlos mucho en la captura de pantalla de arriba, lo que le indica que el script de análisis está rastreando los clics en cualquier lugar de la página.

Por el contrario, si vio nombres de Invoker como estos que indicarían los controladores de eventos para un elemento específico en la página:

• .Load_more.enclick
• #logo.enclick

6. Revise las vistas de página específicas

Muchos de los datos que ha visto hasta ahora están agregados. Ahora es el momento de mirar los eventos de INP individuales, para formar una conclusión definitiva sobre lo que está causando INP lento en este ejemplo.

Las herramientas de monitoreo de usuarios reales como Debugbear generalmente ofrecen una forma de revisar experiencias específicas de los usuarios. Por ejemplo, puede ver qué navegador usaron, qué tan grande es su pantalla y qué elemento condujo a la interacción más lenta.

Como se mencionó anteriormente, múltiples scripts pueden contribuir a INP lento general. La sección INP Scripts le muestra los scripts que se ejecutaron durante la interacción INP:

Puede revisar cada uno de estos scripts con más detalle para comprender por qué funcionan y qué hace que tardan más en terminar.

7. Use el Profiler DevTools para obtener más información

Las herramientas de monitoreo de usuarios reales tienen acceso a muchos datos, pero por razones de rendimiento y seguridad, no pueden acceder a ninguna parte cerca de todos los datos disponibles. Es por eso que es una buena idea usar también DevTools de Chrome para medir el rendimiento de su página.

Para depurar INP en DevTools, puede medir cómo el navegador procesa una de las interacciones lentas que ha identificado antes. Devtools luego le muestra exactamente cómo el navegador pasa su tiempo manejando la interacción.

Cómo podrías resolver este problema

En este ejemplo, usted o su equipo de desarrollo podrían resolver este problema con:

• Trabajar con el proveedor de script de terceros para optimizar su script.
• Eliminar el script si no es esencial para el sitio web o encontrar un proveedor alternativo.
• Ajustar cómo interactúa su propio código con el script

Cómo investigar un alto retraso de entrada

En el ejemplo anterior, la mayor parte del tiempo INP se dedicó a ejecutar código en respuesta a la interacción. Pero a menudo el navegador ya está ocupado ejecutando otro código cuando ocurre una interacción de usuario. Al investigar los componentes INP, verá un alto valor de retraso de entrada.

Esto puede suceder por varias razones, por ejemplo:

• El usuario interactuó con el sitio web mientras aún se estaba cargando.
• Una tarea programada se está ejecutando en la página, por ejemplo, una animación continua.
• La página está cargando y representando un nuevo contenido.

Para comprender lo que está sucediendo, puede revisar el nombre de Invoker y la sección de scripts INP de experiencias individuales de los usuarios.

En esta captura de pantalla, puede ver que un temporizador está ejecutando un código que coincide con el inicio de una interacción de usuario.

El script se puede abrir para revelar el código exacto que se ejecuta:

El código fuente que se muestra en la captura de pantalla anterior proviene de un script de seguimiento de usuarios de terceros que se ejecuta en la página.

En esta etapa, usted y su equipo de desarrollo pueden continuar con el flujo de trabajo INP presentado anteriormente en este artículo. Por ejemplo, la depuración con el navegador DevTools o contactando al proveedor de terceros para obtener soporte.

Cómo investigar el alto retraso de presentación

El retraso de la presentación tiende a ser más difícil de depurar que el retraso de entrada o el tiempo de procesamiento. A menudo es causado por el comportamiento del navegador en lugar de un script específico. Pero como antes, aún comienza identificando una página específica y una interacción específica.

Puede ver una interacción de ejemplo con un alto retraso de presentación aquí:

Ves que esto sucede cuando el usuario ingresa texto en un campo de formulario. En este ejemplo, muchos visitantes pegaron grandes cantidades de texto que el navegador tuvo que procesar.

Aquí la solución fue retrasar el procesamiento, mostrar un mensaje de “espera …” al usuario y luego completar el procesamiento más adelante. Puede ver cómo mejora el puntaje INP a partir del 3 de mayo:

Obtenga los datos que necesita para mejorar la interacción a la siguiente pintura

Configurar el monitoreo real de los usuarios lo ayuda a comprender cómo los usuarios experimentan su sitio web y qué puede hacer para mejorarlo. Intente Debugbear ahora registrándose para una prueba gratuita de 14 días.

Los datos del quid de Google se agregan durante un período de 28 días, lo que significa que pasará un tiempo antes de notar una regresión. Con el monitoreo del usuario real, puede ver el impacto de los cambios en el sitio web de inmediato y ser alertado automáticamente cuando hay un gran cambio.

El depuración monitorea datos de laboratorio, datos de quid y datos de usuario reales. De esa manera, tiene todos los datos que necesita para optimizar su web vital en un solo lugar.

Este artículo ha sido patrocinado por Debugbear, y las opiniones presentadas en este documento representan la perspectiva del patrocinador.

¿Listo para comenzar a optimizar su sitio web? Regístrese para Debugbear y obtenga los datos que necesita para ofrecer excelentes experiencias de usuario.

Créditos de imagen

Imagen destacada: Imagen de Redesign.co. Utilizado con permiso.