Una tarea larga es un código JavaScript que monopoliza el subproceso principal durante períodos prolongados, lo que hace que la IU se "inmoviliza".
Mientras se carga una página, las tareas largas pueden vincular el subproceso principal y hacer que la página no responda a las entradas del usuario, incluso si parece estar lista. A menudo, los clics y las presiones no funcionan porque las funciones interactivas, como los objetos de escucha de eventos y los controladores de clics, aún no se han adjuntado a los elementos de la IU. Debido a esto, las tareas largas pueden aumentar considerablemente tu tiempo de carga.
Las Herramientas para desarrolladores de Chrome ahora pueden visualizar tareas largas, lo que facilita la detección de tareas que se deben optimizar.
¿Qué se considera una tarea larga?
Las tareas largas que consumen mucha CPU se deben a un trabajo complejo que tarda más de 50 ms. El modelo RAIL sugiere que proceses los eventos de entrada del usuario en 50 ms para garantizar una respuesta visible en 100 ms y preservar la conexión entre la acción y la reacción.
Punto clave: Si bien el modelo RAIL sugiere proporcionar una respuesta visual a la entrada del usuario en 100 ms, los umbrales de la métrica Interaction to Next Paint (INP) permiten establecer expectativas más alcanzables hasta 200 ms, especialmente para dispositivos más lentos.
¿Hay tareas largas en mi página que podrían retrasar la interactividad?
Hasta ahora, debías buscar manualmente "bloques amarillos largos" de secuencias de comandos de más de 50 ms de duración en las Herramientas para desarrolladores de Chrome o usar la API de Long Tasks para averiguar qué tareas estaban retrasando la interactividad.
Para facilitar el flujo de trabajo de auditoría de rendimiento, DevTools ahora visualiza tareas largas. Las tareas (en gris) tienen indicadores de advertencia si son tareas largas.
Para utilizar la nueva herramienta de visualización, sigue estos pasos:
- Registra un seguimiento en el Panel de rendimiento de la carga de una página web.
- Busca un indicador rojo en la vista del subproceso principal. Deberías ver que las tareas ahora están marcadas en gris y etiquetadas como Task.
- Mantén el puntero sobre una barra gris. Verás un diálogo en el que se muestra la duración de la tarea y si se la considera una tarea larga.
¿Qué causa mis tareas largas?
Para descubrir la causa de una tarea larga, selecciona la barra gris de tareas. En el panel lateral que aparece debajo, selecciona Bottom-Up y Group by Activity. Esto te permite ver qué actividades contribuyeron más (en total) a la tarea que tarda tanto en completarse. En el siguiente ejemplo, la causa del retraso parece un conjunto costoso de consultas del DOM.
¿Cuáles son las formas comunes de optimizar las tareas largas?
Las secuencias de comandos grandes suelen ser la causa principal de las tareas largas. Considera dividirlas. Además, debes vigilar las secuencias de comandos de terceros, que también pueden contener tareas largas que retrasan que el contenido principal se vuelva interactivo.
Divide todo tu trabajo en fragmentos que se ejecuten en menos de 50 ms y ejecútalos en el lugar y el momento adecuados. El lugar correcto para algunos de ellos podría estar fuera del subproceso principal, en un service worker. Para obtener orientación sobre cómo dividir tareas largas, consulta Optimiza tareas largas y Idle Until Urgent de Phil Walton.
Mantén la capacidad de respuesta de tus páginas. Minimizar las tareas largas es una excelente manera de garantizar que tus usuarios tengan una experiencia agradable cuando visiten tu sitio. Para obtener más información sobre las tareas largas, consulta Métricas de rendimiento centradas en el usuario.