Aprende a enviar tus datos de campo al lab para reproducir e identificar las causas de las interacciones lentas mediante pruebas manuales.
Una parte desafiante de la optimización de Interaction to Next Paint (INP) es descubrir qué causa un INP deficiente. Existen muchas causas posibles, como las secuencias de comandos de terceros que programan muchas tareas en el subproceso principal, los tamaños de DOM grandes, las devoluciones de llamada de eventos costosas y otros motivos.
Mejorar el INP puede ser difícil. Para comenzar, debe saber qué interacciones suelen ser responsables del INP de una página. Si no sabes qué interacciones en tu sitio web suelen ser las más lentas desde la perspectiva de un usuario real, consulta el artículo 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 manualmente 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 te encuentres 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 bien con el INP. Si tu página tiene una TBT alta, es un posible indicador de que es posible que no responda muy bien a las interacciones del usuario mientras se carga.
Para determinar la TBT de tu página, puedes usar Lighthouse. Si la TBT de una página es alta, es posible que el subproceso principal esté demasiado ocupado durante la carga, lo que puede afectar la capacidad de respuesta de la página durante ese tiempo crucial de su ciclo de vida.
Para encontrar interacciones lentas después de que se carga la página, es posible que necesites otros tipos de datos, como los flujos de usuarios comunes que quizás ya hayas identificado 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 finalizan la compra.
Independientemente de si tienes o no datos de campo, el siguiente paso es probar y reproducir manualmente interacciones lentas, ya que solo puedes corregirlas cuando puedes reproducir una interacción lenta.
Reproduce interacciones lentas en el lab
Hay varias formas de reproducir interacciones lentas en el lab a través de pruebas manuales, pero el siguiente es un framework que puedes probar.
Cómo registrar un seguimiento
El Generador de perfiles de rendimiento de Chrome es la herramienta recomendada para diagnosticar y solucionar problemas de interacciones lentas. Para generar el perfil de una interacción en el generador de perfiles de rendimiento de Chrome, sigue estos pasos:
- Abre la página que deseas probar.
- Abre las Herramientas para desarrolladores de Chrome y ve al panel Rendimiento.
- Haz clic en el botón Record en la esquina superior izquierda del panel para iniciar el seguimiento.
- Realiza las interacciones para las que quieres solucionar problemas.
- 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 actividad ubicado en la parte superior del generador de perfiles. El resumen de actividad muestra barras rojas en la parte superior de las secciones donde se realizaron tareas largas en la grabación. Esto te permite acercar rápidamente las áreas con problemas.
Puedes enfocarte rápidamente en las áreas problemáticas arrastrando y seleccionando una región en el resumen de la actividad. De manera opcional, puedes usar la función de rutas de navegación del generador de perfiles para ayudarte a reducir la línea de tiempo y también ignorar la actividad no relacionada.
Una vez que hayas enfocado en el lugar donde ocurrió la interacción, el segmento Interactions te ayudará a alinearla con la actividad que se produjo en el seguimiento de subprocesos principal debajo de ella:
Para obtener detalles adicionales sobre qué parte de la interacción duró más tiempo, coloca el cursor sobre la iteración en el segmento de interacciones:
La parte seccionada de la interacción representa cuánto tiempo de la interacción superó los 200 milisegundos, que es el límite superior del umbral "bueno" para el INP de una página. Las partes de la interacción indicadas son las siguientes:
- El retraso de entrada, que representa el bigote izquierdo.
- La duración del procesamiento, que se visualiza a través del bloque sólido entre los bigotes de la izquierda y la derecha.
- El retraso de presentación, que representa el bigote correcto.
A partir de ahora, se trata de profundizar en los problemas que causan la interacción lenta, que se trata más adelante en esta guía.
La extensión de Chrome de Métricas web
El Generador de perfiles de rendimiento es el enfoque recomendado para diagnosticar interacciones lentas, pero identificarlas puede llevar tiempo cuando no sabes cuáles son las que son problemáticas. Un enfoque que debes considerar es usar la extensión de Chrome de Métricas web. Esta extensión se puede usar para probar rápidamente una serie de interacciones para encontrar las problemáticas, antes de pasar al generador de perfiles de rendimiento.
Una vez instalada, la extensión de Métricas web muestra los datos de interacción en la consola de Herramientas para desarrolladores si sigues estos pasos:
- En Chrome, haz clic en el ícono de extensiones que se encuentra a la derecha de la barra de direcciones.
- Ubica la extensión de Métricas web en el menú desplegable.
- Haz clic en el ícono de la derecha para abrir la configuración de la extensión.
- Haz clic en Opciones.
- Habilita la casilla de verificación Registro de la consola en la pantalla que aparece y, luego, haz clic en Guardar.
Después de seguir estos pasos, abre la consola en las Herramientas para desarrolladores de Chrome y comienza a probar las interacciones sospechosas en una página. A medida que interactúes, los datos de diagnóstico aparecerán en la consola:
Si bien la extensión de Métricas web ayuda a identificar interacciones lentas y proporciona algunos detalles para ayudarte a depurar INP, es posible que debas usar el generador de perfiles de rendimiento para diagnosticar interacciones lentas, ya que proporciona los datos detallados que necesitarás para navegar por el código de producción de tu sitio web a fin de encontrar las causas de estas interacciones.
Cómo identificar qué parte de una interacción es lenta
Las interacciones constan de tres partes: el retraso de entrada, la duración del procesamiento y el retraso de la presentación. La forma de optimizar una interacción para reducir el INP de una página depende de qué parte de la página tarda más tiempo.
Cómo identificar las demoras de entrada largas
Las demoras en las entradas pueden causar una latencia de interacción alta. El retraso de entrada es la primera parte de una interacción. Este es el período de tiempo 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 la devolución de llamada del primer controlador de eventos de esa interacción.
La identificación de demoras en las entradas en el generador de perfiles de rendimiento de Chrome se puede realizar localizando la interacción en el segmento de interacciones. La longitud del bigote izquierdo indica la parte del retraso de entrada de la interacción, y el valor preciso se puede encontrar en la información sobre la herramienta colocando el cursor sobre la interacción en el generador de perfiles de rendimiento.
Las demoras de entrada nunca pueden ser cero, pero tienes control sobre la duración de la demora en la entrada. La clave es descubrir si hay trabajo en ejecución en el subproceso principal que impide que las devoluciones de llamada se ejecuten tan pronto como deberían.
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 duraciones de procesamiento prolongadas
Las devoluciones de llamada de eventos se ejecutan inmediatamente después del retraso de la entrada. El tiempo que tardan en completarse se conoce como duración de procesamiento. Si las devoluciones de llamada de eventos se ejecutan durante demasiado tiempo, retrasan la presentación del siguiente fotograma en el navegador y pueden aumentar considerablemente la latencia total de una interacción. Las duraciones prolongadas de procesamiento pueden ser el resultado de un código JavaScript propio o de terceros costoso en términos de procesamiento y, en algunos casos, de ambos casos. En el generador de perfiles de rendimiento, esto se representa mediante la parte sólida de la interacción en el segmento de interacciones.
Para encontrar devoluciones de llamadas de eventos costosos, observa lo siguiente en un seguimiento de una interacción específica:
- Determina si la tarea asociada con las devoluciones de llamada de eventos es una tarea larga. Para revelar tareas largas en un parámetro de 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 nivel bajo a medio y usar la depuración remota.
- 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 tengan un triángulo rojo en la esquina superior derecha de la entrada.
Puedes probar una de las siguientes estrategias para reducir la duración del procesamiento de una interacción:
- Haz el menor trabajo posible. ¿Todo lo que sucede en una devolución de llamada de evento costoso es estrictamente necesario? De lo contrario, considera quitar el código por completo si es posible 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 función de memorización de React puede omitir el trabajo de renderización innecesaria de un componente cuando sus props no han cambiado.
- 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 cedes el trabajo al subproceso principal, finalizas la ejecución de la tarea actual y divides el resto del trabajo en una tarea separada. De esta manera, el procesador puede procesar las actualizaciones de la interfaz de usuario que se realizaron anteriormente en la devolución de llamada del evento. Si usas React, la función de transiciones puede hacerlo por ti.
Estas estrategias deberían ayudarte a optimizar las devoluciones de llamada de eventos para que tarden menos en ejecutarse.
Cómo identificar retrasos en la presentación
Las demoras en la entrada de texto y las duraciones de procesamiento no son las únicas causas 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.
El trabajo de renderización a menudo consiste en tareas como un nuevo cálculo de estilo, el diseño, la pintura y la composición, y se representan con bloques morados y verdes en el gráfico tipo llama del generador de perfiles. El retraso total en la presentación se representa con el bigote derecho de la interacción en el segmento de interacciones.
De todas las posibles causas de la alta latencia de interacción, los retrasos en la presentación pueden ser las más difíciles de solucionar. El trabajo excesivo de renderización puede deberse a cualquiera 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, consulta 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 inmediatamente los resultados de ese trabajo. Como resultado, el navegador debe realizar el trabajo de diseño antes que nada más, de modo que el navegador pueda mostrar los estilos actualizados. Para obtener más información y sugerencias sobre cómo 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 llamadarequestAnimationFrame()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 usasrequestAnimationFrame()para realizar trabajos que no implican cambios en la interfaz de usuario, comprende que es posible que se retrase 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.
¿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? Existen dos razones por las que esto podría ser así.
Por un lado, las circunstancias mientras pruebas las interacciones dependen del hardware y de la conexión de red. Es posible que estés usando un dispositivo rápido con una conexión rápida, pero eso no significa que tus usuarios lo estén. Si se aplica a tu caso, puedes probar una de las siguientes tres opciones:
- Si tienes un dispositivo Android físico, usa la depuración remota para abrir una instancia de Herramientas para desarrolladores de Chrome en tu máquina anfitrión y, luego, intentar reproducir interacciones lentas allí. A menudo, los dispositivos móviles no son tan rápidos como las computadoras portátiles o de escritorio, por lo que las interacciones lentas pueden observarse con mayor facilidad en estos dispositivos.
- Si no tienes un dispositivo físico, habilita la función de limitación de CPU en las Herramientas para desarrolladores de Chrome.
Otra causa podría ser que estés esperando a que se cargue una página antes de interactuar con ella, pero los usuarios no. Si usas una red rápida, simula 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 durante ese período pueden revelar lo que experimentan tus usuarios.
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 determinar de manera confiable la causa del problema y llegar a la solución correcta con mayor rapidez. Para revisar:
- Utiliza los datos de campo para detectar interacciones lentas.
- Probar manualmente las interacciones de los 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 costoso procesamiento de los datos.
- Y todo de nuevo.
El último de ellos es el más importante. Al igual que la mayoría de los trabajos que realizas para mejorar el rendimiento de la página, la solución de problemas y la mejora del 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.