Aprende a ingresar tus datos de campo en el lab para identificar y reproducir las causas de las interacciones lentas a través de pruebas manuales.
Una parte desafiante de la optimización de Interaction to Next Paint (INP) es descubrir qué está causando una INP deficiente. Existen muchas causas posibles, como las secuencias de comandos de terceros que programan muchas tareas en el subproceso principal, los tamaños grandes de DOM, las costosas devoluciones de llamadas de eventos y otras causas.
Mejorar el INP puede ser difícil. Para comenzar, debes saber qué interacciones suelen ser responsables del INP de una página. Si no sabes qué interacciones de tu sitio web suelen ser más lentas desde una perspectiva de usuario real, consulta el artículo Cómo encontrar interacciones lentas en el campo. Una vez que tengas datos de campo como guía, puedes probar esas interacciones específicas de forma manual en las herramientas del lab para averiguar por qué esas interacciones son lentas.
¿Qué sucede si no tienes datos de campo?
Contar con datos de campo es vital, ya que te ahorra mucho tiempo tratando de descubrir qué interacciones deben optimizarse. Sin embargo, es posible que te encuentres en una posición en la que no tengas datos de campo. Si eso describe su situación, todavía es posible encontrar interacciones para mejorar, aunque requiere un poco más de esfuerzo y un enfoque diferente.
Tiempo de bloqueo total (TBT) es una métrica del lab que evalúa la capacidad de respuesta de la página durante la carga y se correlaciona bien con INP. Si tu página tiene una TBT alta, es posible que no sea muy responsiva a las interacciones del usuario mientras se carga.
Para determinar la TBT de tu página, puedes usar Lighthouse. Si el TBT de una página es alto, existe la posibilidad de que el subproceso principal esté demasiado ocupado durante la carga, y eso puede afectar la capacidad de respuesta de una página durante ese momento 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 flujos de usuarios comunes que 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 los usuarios realizan cuando agregan artículos a un carrito de compras en línea y finalizan la compra.
Independientemente de si tienes datos de campo o no, el siguiente paso es probar y reproducir de forma manual las interacciones lentas, porque solo cuando puedes reproducir una interacción lenta puedes corregirla.
Reproduce interacciones lentas en el lab
Existen varias formas de reproducir interacciones lentas en el lab con 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 interacciones lentas y solucionar problemas relacionados. 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 Grabar en la parte superior izquierda del panel para iniciar el seguimiento.
- Realiza las interacciones para las que quieras solucionar problemas.
- Vuelve a hacer clic en el botón Registrar para detener el seguimiento.
Cuando se completa el generador de perfiles, el primer lugar para buscar debe ser el resumen de la actividad en la parte superior del generador de perfiles. El resumen de la 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 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 en el generador de perfiles para ayudarte a reducir el cronograma y a ignorar la actividad no relacionada.
Una vez que te enfoques en dónde ocurrió la interacción, el segmento Interacciones te ayudará a alinear la interacción y la actividad que ocurrió en el segmento de subprocesos principal debajo de ella:
Para obtener detalles adicionales sobre qué parte de la interacción fue más larga, coloca el cursor sobre la iteración en el segmento de interacciones:
La parte rayada de la interacción representa cuánto tiempo de la interacción superó los 200 milisegundos, que es el límite superior del resultado positivo. para el INP de una página. Las partes de la interacción enumeradas son las siguientes:
- El retraso de entrada, que se ve con el bigote izquierdo
- La duración del procesamiento, que se muestra a través del bloque sólido entre los bigotes izquierdo y derecho.
- El retraso en la presentación, visualizado por el bigote derecho.
A partir de aquí, es cuestión de profundizar en los problemas que causan la interacción lenta, que se tratará 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 que se sabe que son lentas, pero puede llevar tiempo identificar interacciones lentas cuando no sabes cuáles son las que tienen problemas. Un enfoque que debes considerar es usar la extensión de Chrome para las Métricas web. Esta extensión se puede usar para probar rápidamente varias 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.
- Busca 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, aparecerán datos de diagnóstico 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 aún debas usar el Generador de perfiles de rendimiento para diagnosticar interacciones lentas, ya que brinda los datos detallados que necesitarás para navegar por el código de producción de tu sitio web y encontrar las causas de las interacciones lentas.
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 ella tarda más tiempo.
Cómo identificar los retrasos largos en las entradas
Los retrasos 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 desde que el sistema operativo recibe la acción del usuario por primera vez hasta el momento en el que el navegador puede comenzar a procesar la primera devolución de llamada del controlador de eventos de esa interacción.
Para identificar los retrasos en las entradas del generador de perfiles de rendimiento de Chrome, ubica 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 se puede encontrar el valor exacto en un cuadro de información si colocas el cursor sobre la interacción en el generador de perfiles de rendimiento.
Los retrasos de entrada nunca pueden ser cero, pero puedes controlar la duración de la demora de entrada. La clave es descubrir si hay algún trabajo en ejecución en el subproceso principal que impida que las devoluciones de llamada se ejecuten tan pronto como debería.
En la figura anterior, se ejecuta una tarea de una secuencia de comandos de terceros a medida que el usuario intenta interactuar con la página y, por lo tanto, 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 las duraciones de procesamiento prolongadas
Las devoluciones de llamada de eventos se ejecutan inmediatamente después del retraso de entrada, y el tiempo que tardan en completarse se conoce como la duración del procesamiento. Si las devoluciones de llamada de eventos se ejecutan demasiado tiempo, retrasan el navegador para que no presente el siguiente fotograma y pueden aumentar de forma significativa la latencia total de una interacción. Las duraciones prolongadas de los procesamientos pueden ser el resultado de un JavaScript propio o de terceros costoso en términos de procesamiento y, en algunos casos, ambos. 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 llamada de eventos costosas, se puede observar lo siguiente en el 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 las tareas largas en la configuración de un lab de forma 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 media y usar la depuración remota.
- Si la tarea que ejecuta las devoluciones de llamada de eventos es una tarea 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. ¿Es estrictamente necesario todo lo que sucede en una devolución de llamada de evento costosa? De lo contrario, considera quitar ese código por completo si es posible o, si no puedes hacerlo, posterga su ejecución para otro momento. También puedes aprovechar las funciones del framework como ayuda. Por ejemplo, la función de memorización de React puede omitir el trabajo de renderización innecesario para un componente cuando sus props no han cambiado.
- Aplaza el trabajo que no sea de renderización en la devolución de llamada del evento a un momento posterior. Las tareas largas se pueden dividir ir al subproceso principal. Cada vez que cedas 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 renderizador puede procesar las actualizaciones de la interfaz de usuario que se realizaron antes en la devolución de llamada del evento. Si usas React, su función de transiciones puede hacerlo por ti.
Estas estrategias deberían poder ayudarte a optimizar las devoluciones de llamada de eventos para que tarden menos en ejecutarse.
Cómo identificar retrasos en la presentación
Las largas demoras en las entradas y las duraciones del procesamiento no son las únicas causas de INP deficiente. A veces, las actualizaciones de renderización que tienen lugar en respuesta incluso a cantidades pequeñas de código de devolución de llamada de eventos pueden ser costosas. El tiempo que tarda el navegador en renderizar actualizaciones visuales de la interfaz de usuario para reflejar el resultado de una interacción se conoce como retraso en la presentación.
El trabajo de renderización generalmente consiste en tareas como el recálculo del estilo, el diseño, la pintura y la composición, y se representan con bloques púrpura y verde en el gráfico tipo llama del generador de perfiles. El retraso total en la presentación está representado por el bigote derecho de la interacción en la pista de interacciones.
De todas las posibles causas de una latencia de interacción alta, las demoras en la presentación pueden ser las más difíciles de solucionar y corregir. El trabajo de renderización excesivo puede deberse a cualquiera de los siguientes motivos:
- Tamaños de DOM grandes. El trabajo de representació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 de DOM la interactividad y qué puedes hacer al respecto.
- Reprocesamientos forzados. Esto sucede cuando aplicas cambios de diseño a elementos en JavaScript y, luego, consultas de inmediato los resultados de ese trabajo. Como resultado, el navegador debe realizar el trabajo de diseño antes que cualquier otra cosa, de modo que pueda mostrar los estilos actualizados. Para obtener más información y sugerencias sobre cómo evitar reprocesamientos forzados, consulta Cómo evitar diseños grandes y complejos, y la hiperpaginación de diseños.
- Trabajo excesivo o innecesario en las devoluciones de llamada de
requestAnimationFrame. Las devoluciones de llamada derequestAnimationFrame()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 un trabajo que no implica cambios en la interfaz de usuario, ten en cuenta que podrías estar retrasando el siguiente fotograma. - Devoluciones de llamada
ResizeObserver. Estas devoluciones de llamada se ejecutan antes de la renderización y pueden retrasar la presentación del siguiente fotograma si el trabajo en ellas 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 campo sugieren que una interacción en particular es lenta, pero no puedes reproducir manualmente el problema del lab? Hay dos razones por las que esto podría suceder.
Por un lado, las circunstancias en las que pruebas las interacciones dependen del hardware y de la conexión de red. Es posible que estés usando un dispositivo veloz con una conexión rápida, pero eso no significa que tus usuarios lo hagan. Si es 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, intenta reproducir las interacciones lentas allí. Los dispositivos móviles no suelen ser tan rápidos como las computadoras portátiles o las computadoras 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 la CPU en las Herramientas para desarrolladores de Chrome.
Otra causa podría ser que estás esperando que se cargue una página antes de interactuar con ella, pero tus usuarios no. Si estás en una red rápida, habilita la limitación de la red para simular condiciones de red más lentas y, luego, interactúa con la página en cuanto se pinte. Debes hacer esto 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.
Solucionar problemas de INP es un proceso iterativo
Descubrir la causa de la alta latencia de interacción que contribuye a una INP deficiente requiere de mucho trabajo. Sin embargo, si puedes identificar las causas, ya estás a medio camino. Si sigues un enfoque metódico para solucionar problemas de INP deficientes, podrás determinar de manera confiable qué está causando el problema y llegar más rápido a la solución correcta. Para revisar:
- Usa los datos de campo para encontrar interacciones lentas.
- Probar manualmente las interacciones de campo problemáticas en el lab para ver si son reproducibles.
- Identifica si la causa se debe a una larga demora de entrada, a devoluciones de llamadas de eventos costosas o a un trabajo de renderización costoso.
- Y todo de nuevo.
La última es la más importante. Como en la mayoría de los trabajos que se realizan para mejorar el rendimiento de las páginas, la solución de problemas y la mejora de INP es un proceso cíclico. Cuando corrijas una interacción lenta, pasa a la siguiente y repite el proceso hasta que comiences a ver resultados.