Cómo diagnosticar interacciones lentas en el lab de forma manual

Aprende a llevar tus datos de campo al lab para reproducir y también identificar las causas de las interacciones lentas mediante pruebas manuales.

Una parte desafiante de la optimización de Interaction to Next Paint (INP) es averiguar qué causa un INP deficiente. Existe una gran variedad de causas posibles: secuencias de comandos de terceros que programan muchas tareas en el subproceso principal, grandes tamaños de DOM, devoluciones de llamadas de eventos costosas y mucho más.

Encontrar formas de solucionar problemas de INP puede ser difícil. Para empezar, debes saber qué interacciones suelen ser responsables del INP de una página. Si no sabes qué interacciones de tu sitio web suelen ser las más lentas desde la perspectiva de un usuario real, primero lee Cómo encontrar interacciones lentas en el campo. Una vez que tengas datos de campo que te sirvan de guía, puedes probar esas interacciones específicas de forma manual en las herramientas del lab para averiguar por qué son lentas.

¿Qué pasa si no tienes datos de campo?

Contar con datos de campo es fundamental, ya que te permite ahorrar mucho tiempo cuando tratas de determinar qué interacciones debes optimizar. Sin embargo, es posible que estés en una posición en la que no tengas datos de campo. Si eso describe tu situación, aún es posible encontrar interacciones para mejorar, aunque esto requiere un poco más de esfuerzo y un enfoque diferente.

El tiempo de bloqueo total (TBT) es una métrica de lab que evalúa la capacidad de respuesta de la página durante la carga y se correlaciona muy bien con el INP. Si tu página tiene un TBT alto, es un indicador importante de que es posible que no responda muy bien a las interacciones del usuario durante la carga inicial.

Para determinar la TBT de tu página, puedes usar Lighthouse o PageSpeed Insights. Si el TBT de una página no alcanza el umbral "bueno", es muy probable que el subproceso principal esté demasiado ocupado durante la carga de la página, lo que puede afectar la rapidez con la que se producen las interacciones durante ese tiempo crucial del ciclo de vida de la página.

Para encontrar interacciones lentas después de que se carga la página, es posible que debas usar otros tipos de datos, como los flujos de usuarios comunes que quizás ya identificaste en las estadísticas de tu sitio web. Si trabajas en un sitio web de comercio electrónico, por ejemplo, un flujo de usuarios común serían las acciones que realizan los usuarios cuando agregan artículos a un carrito de compras en línea y, luego, pasan por el proceso de confirmación de la compra.

Independientemente de si tienes o no datos de campo, el siguiente paso es probar y reproducir de forma manual las interacciones lentas, ya que solo puedes corregirlas cuando puedes identificar de manera concluyente una interacción lenta.

Reproduce interacciones lentas en el lab

Existen varias formas de reproducir interacciones lentas en el lab mediante pruebas manuales, pero el siguiente es un framework que puedes usar para reproducir interacciones lentas en un entorno de lab mientras minimizas el esfuerzo cognitivo.

No busques el generador de perfiles de rendimiento de inmediato.

Si ya estás familiarizado con el generador de perfiles de rendimiento de Chrome, sabes que proporciona mucha información de diagnóstico útil para solucionar problemas de rendimiento de la página. Es una herramienta útil con muchas ventajas.

Sin embargo, la desventaja es que el generador de perfiles de rendimiento de Chrome no proporciona una vista en vivo mientras interactúa con la página. Lleva mucho tiempo usarla, y hay formas más eficientes de probar las interacciones de forma manual primero. La idea es dedicar la cantidad mínima de tiempo y esfuerzo a reproducir interacciones lentas y, una vez que se haya identificado de manera concluyente una interacción lenta, debes usar el Generador de perfiles de rendimiento para profundizar en las causas.

Usa la extensión de Chrome de Métricas web

La extensión de Chrome de Métricas web implica el menor esfuerzo posible para probar manualmente la latencia de las interacciones. Una vez instalada, la extensión mostrará los datos de interacción en la consola de Herramientas para desarrolladores, siempre y cuando primero hagas lo siguiente:

1. En Chrome, haz clic en el ícono de extensiones que se encuentra a la derecha de la barra de direcciones.
2. Ubica la extensión de Métricas web en el menú desplegable.
3. Haz clic en el ícono de la derecha para abrir la configuración de la extensión.
4. Haz clic en Opciones.
5. Habilita la casilla de verificación Registro de la consola en la pantalla resultante y, luego, haz clic en Guardar.

Una vez que lo hayas hecho, abre la consola en las Herramientas para desarrolladores de Chrome y comienza a probar interacciones potenciales en tu sitio web. Cuando interactúes con la página, aparecerán datos de diagnóstico útiles en la consola.

Usa un fragmento de JavaScript

Por más útil que sea, es posible que la extensión de Métricas web no sea una opción viable para todo el mundo. Las extensiones del navegador se pueden bloquear en algunos entornos debido a las políticas de seguridad del dispositivo. Las extensiones tampoco se pueden instalar en dispositivos móviles. Esto último resulta problemático si quieres realizar pruebas manuales en un dispositivo físico Android con depuración remota.

Un método alternativo para usar la extensión Web Vital implica copiar y pegar JavaScript en la consola de Herramientas para desarrolladores. El siguiente código te proporciona el mismo resultado de la consola que la extensión de Métricas web para cada interacción:

let worstInp = 0;

const observer = new PerformanceObserver((list, obs, options) => {
  for (let entry of list.getEntries()) {
    if (!entry.interactionId) continue;

    entry.renderTime = entry.startTime + entry.duration;
    worstInp = Math.max(entry.duration, worstInp);

    console.log('[Interaction]', entry.duration, `type: ${entry.name} interactionCount: ${performance.interactionCount}, worstInp: ${worstInp}`, entry, options);
  }
});

observer.observe({
  type: 'event',
  durationThreshold: 0, // 16 minimum by spec
  buffered: true
});

Una vez que determinaste que una interacción es realmente lenta, puedes generar un perfil de la interacción en el Generador de perfiles de rendimiento para obtener información detallada sobre por qué es lenta.

¿Qué sucede si no puedes reproducir una interacción lenta?

¿Qué sucede si los datos de tu campo sugieren que una interacción en particular es lenta, pero no puedes reproducir manualmente el problema en el lab? Hay un par de razones por las que este podría ser el caso, y es un desafío común en la solución de problemas de rendimiento de cualquier tipo.

Por una vez, las circunstancias mientras pruebas las interacciones dependen del hardware y de la conexión de red que utilices. Después de todo, es posible que uses un dispositivo rápido con una conexión rápida, pero eso no significa que tus usuarios tengan tanta suerte. Si esta situación se aplica a tu caso, puedes realizar una de las siguientes tres acciones:

1. Si tienes un dispositivo físico con Android, usa la depuración remota para abrir una instancia de Herramientas para desarrolladores de Chrome en tu máquina anfitrión y, luego, intenta reproducir interacciones lentas allí. A menudo, los dispositivos móviles no son tan rápidos como las laptops o las máquinas de escritorio, por lo que las interacciones lentas se pueden observar con mayor facilidad en esas condiciones.
2. Si no tienes un dispositivo físico, habilita la función de limitación de CPU en las Herramientas para desarrolladores de Chrome.
3. Prueba los pasos 1 y 2 juntos, ya que también puedes habilitar la limitación de la CPU en la instancia de Herramientas de desarrolladores para un dispositivo físico con Android.

Otra causa podría ser que estés esperando a que se cargue una página antes de interactuar con ella, pero tus usuarios no. Si usas una red rápida, simula las condiciones de red más lentas habilitando la regulación de la red. Luego, interactúa con la página en cuanto se pinta. Debes hacerlo porque el subproceso principal suele estar más ocupado durante el inicio y las pruebas en ese momento pueden revelar lo que experimentan tus usuarios.

Cómo registrar un seguimiento

Para obtener más información sobre por qué una interacción es lenta, el siguiente paso es usar el generador de perfiles de rendimiento en las Herramientas para desarrolladores de Chrome. Para generar el perfil de una interacción en el generador de perfiles de rendimiento de Chrome, haz lo siguiente:

1. Abre la página que necesitas probar.
2. Abre las Herramientas para desarrolladores de Chrome y ve al panel Rendimiento.
3. Haz clic en el botón Record en la esquina superior izquierda del panel para iniciar el seguimiento.
4. Realiza las interacciones para las que deseas generar perfiles.
5. Vuelve a hacer clic en el botón Grabar para detener el registro.

Cuando se completa el generador de perfiles, el primer lugar que se debe buscar debe ser el resumen de actividades ubicado en la parte superior del generador de perfiles. El resumen de actividad muestra barras rojas en la parte superior donde ocurrieron tareas largas en la grabación. Esto te permite acercar rápidamente las áreas problemáticas.

Puedes enfocarte con rapidez en las áreas problemáticas arrastrando y seleccionando una región en el resumen de la actividad. Una vez que te hayas enfocado en el lugar en el que se produjo la interacción, el segmento Interactions te ayuda a alinearla con la actividad que se produjo en el seguimiento de subprocesos principal debajo de ella:

A partir de aquí, se trata de profundizar en el problema que causa la interacción lenta. Existen muchos aspectos que pueden contribuir a una latencia de interacción alta, algunos de los cuales se tratan más adelante en esta guía.

Cómo usar los períodos de Lighthouse como alternativa al registro

Si bien el Generador de perfiles de rendimiento de Chrome tiene información de diagnóstico, puede resultar un poco intimidante para quienes no lo iniciaron. Una alternativa al generador de perfiles de rendimiento es el modo de período de Lighthouse. Para usar este modo, haz lo siguiente:

1. Con las Herramientas para desarrolladores abierto, ve a la pestaña Lighthouse en Herramientas para desarrolladores.
2. En la sección Modo, selecciona la opción Intervalo de tiempo.
3. Selecciona el tipo de dispositivo Computadora de escritorio o Dispositivo móvil en la sección etiquetada Dispositivo.
4. Asegúrate de que al menos la casilla de verificación Rendimiento esté seleccionada en la etiqueta Categorías.
5. Haz clic en el botón Iniciar período.
6. Prueba las interacciones en la página de la que quieres obtener datos.
7. Haz clic en el botón End timespan y espera a que aparezca la auditoría.
8. Una vez que la auditoría se propague en la pestaña Lighthouse, puedes filtrarlas por INP. Para ello, haz clic en el vínculo de INP junto a la etiqueta que dice Mostrar auditorías relevantes para.

En este punto, debería aparecer una lista desplegable para las auditorías que fallaron o aprobaron. Cuando expandas ese menú desplegable, debería haber un desglose del tiempo empleado durante la interacción.

Cómo identificar las demoras de entrada largas

Algo que podría contribuir a una latencia de interacción alta es la demora en la entrada. El retraso de entrada es la primera fase de una interacción. Este es el período desde que el sistema operativo recibe por primera vez la acción del usuario hasta el punto en el que el navegador puede comenzar a procesar el primer evento activado por esa entrada. La demora de entrada finaliza justo cuando comienzan a ejecutarse las devoluciones de llamada de eventos para la interacción.

Para identificar las demoras de entrada en el Generador de perfiles de rendimiento de Chrome, se debe ubicar el inicio de una interacción en el segmento de interacciones y, luego, buscar el inicio de cuándo comienzan a ejecutarse las devoluciones de llamada de eventos para esa interacción.

Siempre debería esperarse cierta demora de entrada, ya que el sistema operativo tarda un tiempo en pasar el evento de entrada al navegador, pero tienes cierto control sobre la duración del retraso de la entrada. La clave es averiguar si hay algún trabajo en ejecución en el subproceso principal que impide que se ejecuten las devoluciones de llamada.

En la figura anterior, se ejecuta una tarea de una secuencia de comandos de terceros mientras el usuario intenta interactuar con la página y, por lo tanto, se extiende el retraso de entrada. La demora de entrada extendida afecta la latencia de la interacción y, por lo tanto, podría afectar el INP de la página.

Cómo identificar devoluciones de llamada de eventos costosos

Las devoluciones de llamada de eventos se ejecutan inmediatamente después del retraso de entrada. Si la devolución de llamada de un evento se ejecuta durante demasiado tiempo, retrasa el navegador para que no presente el siguiente fotograma y puede aumentar considerablemente la latencia total de una interacción. Las devoluciones de llamada de eventos de larga duración pueden ser el resultado de código JavaScript propio o de terceros costoso en términos de procesamiento y, en algunos casos, de ambos casos.

Para encontrar devoluciones de llamada de eventos costosos, observa lo siguiente en un seguimiento de una interacción específica:

1. Determina si la tarea asociada con las devoluciones de llamada de eventos es una tarea larga. Para revelar tareas largas en una configuración de lab de manera más confiable, es posible que debas habilitar la limitación de la CPU en el panel de rendimiento o conectar un dispositivo Android de gama baja a intermedia y usar la depuración remota.
2. Si la tarea que ejecuta las devoluciones de llamada de eventos es larga, busca entradas del controlador de eventos (por ejemplo,entradas con nombres como Evento: clic) en la pila de llamadas que tenga un triángulo rojo en la esquina superior derecha de la entrada. Estas son devoluciones de llamada de eventos costosas.

Para abordar devoluciones de llamada de eventos costosos, prueba una de las siguientes estrategias:

1. Haz el menor trabajo posible. ¿Todo lo que sucede en una devolución de llamada de evento costosa es estrictamente necesario? De lo contrario, considera quitar el código por completo si puedes o postergar su ejecución para un momento posterior si no puedes. También puedes aprovechar las funciones del framework para obtener ayuda. Por ejemplo, la clase PureComponent y la función de memoria de React pueden omitir el trabajo de renderización innecesario cuando los props y el estado no cambiaron de un componente.
2. Aplaza el trabajo de no renderización en la devolución de llamada del evento a un momento posterior. Las tareas largas se pueden dividir alcanzando el rendimiento al subproceso principal. Cada vez que obtienes el rendimiento en el subproceso principal, finalizas la ejecución de la tarea actual y se divide el resto del trabajo en una tarea separada. Esto le da al procesador la oportunidad de procesar las actualizaciones de la interfaz de usuario que se realizaron antes en la devolución de llamada del evento. Si usas React, la función de transiciones puede hacerlo por ti.

Si usas estas estrategias, deberías poder obtener las devoluciones de llamada de tus eventos en un lugar en el que respondan con mayor rapidez a la entrada del usuario.

Cómo identificar retrasos en la presentación

Las demoras de entrada largas y las devoluciones de llamada de eventos costosas no son los únicos motivos posibles de un INP deficiente. A veces, las actualizaciones de renderización que se producen en respuesta a incluso pequeñas cantidades de código de devolución de llamada de eventos pueden ser costosas. El tiempo que tarda el navegador en procesar las actualizaciones visuales de la interfaz de usuario para reflejar el resultado de una interacción se conoce como demora en la presentación.

De todas las posibles causas de la latencia de interacción alta, el trabajo de renderización puede ser la más difícil de solucionar y corregir, pero el resultado vale la pena. El trabajo de renderización excesivo podría deberse a alguno de los siguientes motivos:

• Tamaños de DOM grandes El trabajo de renderización necesario para actualizar la presentación de una página a menudo aumenta junto con el tamaño del DOM de la página. Para obtener más información, lee Cómo afectan los tamaños grandes del DOM a la interactividad y lo que puedes hacer al respecto.
• Reprocesamientos forzados: Esto sucede cuando aplicas cambios de diseño a los elementos de JavaScript y, luego, consultas los resultados de ese trabajo. Como resultado, el navegador debe realizar el trabajo de diseño antes que nada más, de modo que pueda mostrar los diseños actualizados. Si deseas obtener más información y sugerencias para evitar los reprocesamientos forzados, consulta Cómo evitar los diseños grandes y complejos, y la hiperpaginación de diseños.
• Trabajo excesivo o innecesario en devoluciones de llamada requestAnimationFrame. Las devoluciones de llamada requestAnimationFrame() se ejecutan durante la fase de renderización del bucle de eventos y deben completarse antes de que se pueda presentar el siguiente fotograma. Si usas requestAnimationFrame() para realizar trabajos que no implican cambios en la interfaz de usuario, comprende que podrías retrasar el siguiente fotograma.
• ResizeObserver. Estas devoluciones de llamada se ejecutan antes de la renderización y pueden retrasar la presentación del siguiente fotograma si su trabajo es costoso. Al igual que con las devoluciones de llamada de eventos, aplaza cualquier lógica que no sea necesaria para el siguiente fotograma.

La solución de problemas de INP es un proceso iterativo

Descubrir la causa de una latencia de interacción alta que contribuye a una INP deficiente requiere mucho trabajo, pero si puedes precisar las causas, ya estás a mitad de camino. Si sigues un enfoque metódico para solucionar problemas de INP deficiente, puedes identificar de manera confiable la causa del problema y llegar más rápido a la solución correcta. Para revisar, sigue estos pasos:

• Utiliza los datos de campo para detectar interacciones lentas.
• Probar manualmente las interacciones de campos problemáticos en el lab para ver si se pueden reproducir.
• Identifica si la causa se debe a una larga demora en las entradas, costosas devoluciones de llamadas de eventos o un procesamiento costoso.
• Y todo de nuevo.

El último de ellos es el más importante. Como la mayoría de los trabajos que haces para mejorar el rendimiento de la página, la solución de problemas y mejoras de INP es un proceso cíclico. Cuando corrijas una interacción lenta, continúa con la siguiente y repite el proceso hasta que empieces a ver resultados. ¡Mantente alerta!