Métrica JS Long Tasks (JSLT): cuando tu web olvida respirar
Martin Michálek9/2/20267 minutos lecturaImagina que haces clic en un botón y nada ocurre. La web simplemente se congela. Por lo general, la culpable es una "tarea larga" – una tarea en JavaScript que se está ejecutando durante demasiado tiempo. Es el momento en que el navegador está tan ocupado pensando que ignora todo lo demás.
En este artículo, explicaremos cómo la métrica JS Long Tasks mide estos atascos digitales y qué pueden significar para tus usuarios y tu negocio.
Congelación del sitio web debido a JavaScript: más de 50 ms ya es demasiado
El lenguaje de programación de la web, JavaScript, aunque trabajador por naturaleza, tiene una característica fundamental. Funciona normalmente en un solo hilo.
El navegador es como un chef que solo puede hacer una cosa a la vez. Si está cortando cebolla para un gran guiso, no puede al mismo tiempo atender una llamada de su jefe.
Una Long Task (tarea larga en JavaScript) es cualquier operación que dura más de 50 ms. Este límite proviene del modelo RAIL. Un usuario percibe una respuesta como instantánea si ocurre en menos de 100 ms. Los 50 ms restantes son una reserva para que el navegador pueda reaccionar a tu clic.
Así lo ve el navegador. El segundo clic del usuario ocurre durante una tarea larga. El navegador es ahora ese chef que corta cebolla y no puede atender la llamada de su jefe.
El hilo principal del navegador es algo así como el guion que guía al navegador a utilizar el procesador y la memoria. Cuando se ejecuta una tarea larga, el hilo principal está bloqueado. En ese momento, el usuario no puede hacer clic ni escribir.
Muchas métricas de JS, mucha confusión
Todos queremos ver números verdes en Core Web Vitals. La métrica JS Long Tasks no forma parte de este conjunto básico, pero puede decirnos mucho.
Los clientes a menudo preguntan a los expertos de PageSpeed.ONE cuál es la diferencia entre las Long Tasks y métricas como Interaction to Next Paint (INP) o Total Blocking Time (TBT).
Específicamente, las métricas TBT y JSLT son similares. En resumen: TBT es una prueba estricta en el laboratorio, mientras que las Long Tasks en RUM son registros de cómo realmente la web se queda sin aliento en las manos de los usuarios. Total Blocking Time (TBT) se mide sintéticamente y solo durante la carga. JSLT se mide con usuarios reales. Más sobre las diferencias entre las mediciones sintéticas y RUM en el artículo synth vs CrUX vs RUM.
Hemos preparado una tabla comparativa clara:
| Característica | Total Blocking Time (TBT) | JS Long Tasks (JSLT) |
|---|---|---|
| Fuente de datos | Laboratorio (bot simulado) | Usuarios reales (RUM) |
| Ventana temporal | Solo durante la carga (FCP → TTI) | Toda la vida útil de la página |
| Qué se cuenta | Solo el tiempo que supera el límite de 50 ms | Toda la duración de todas las tareas |
| Objetivo principal | Control técnico rápido | Análisis de negocio y UX real |
| Herramienta típica | Lighthouse, PageSpeed.ONE Monitoring | SpeedCurve RUM |
¿Y la métrica INP? Tanto TBT como JSLT pueden tener una relación directa, pero a menudo también indirecta, con esa métrica del conjunto de Core Web Vitals.
Historias del mundo real: Innogy y el e-commerce de un cliente
Quien no mide, no gestiona. Nosotros medimos para gestionar la velocidad de los sitios web, porque tiene un impacto en los parámetros del negocio.
Echemos un vistazo a cómo se ve en el mundo real con nuestros clientes.
Innogy: Cómo domamos la interactividad
Con el cliente Innogy, en PageSpeed.ONE luchamos con métricas de JS lentas en dispositivos móviles. El análisis mostró que el hilo principal estaba bloqueado por scripts voluminosos y estilos complejos.
Dividir las tareas largas en partes más pequeñas redujo la métrica INP en un 38 %.
El sitio ahora es fluido incluso en teléfonos más económicos. Más detalles en el estudio de caso.
Menos atascos de JavaScript, más pedidos
Con otro cliente del sector e-commerce, nuestras análisis encontraron una relación clara. Cuanto más largas eran las JS Long Tasks y la métrica INP, menores eran las conversiones.
La línea azul es la tasa de conversión, las barras naranjas el valor de la métrica. Cuantas más tareas largas, menores conversiones.
Las tareas largas "congelaban" el sitio en momentos cruciales. Por eso, con el cliente nos enfocamos a largo plazo en las métricas de JS, cuya optimización ayuda a mantener a los clientes en el proceso de compra.
En resumen: un sitio fluido sin Long Tasks puede aumentar directamente tus ingresos. ¿Es este tu caso? Puedes averiguarlo con nuestro análisis de negocio.
¿Cómo optimizar la métrica JS Long Tasks?
El diagnóstico es fundamental. Sin él, solo estás adivinando. Necesitas monitorización y Chrome DevTools. Para consejos prácticos sobre cómo dividir tareas largas, consulta nuestro artículo sobre optimización de la métrica INP.
¿Cómo profundizar más? Básicamente tienes dos caminos.
- Chrome DevTools: Abre el panel de Performance y registra una acción en la web. Verás las Long Tasks como bloques con el borde derecho rojo. Es una clara advertencia.
- Long Tasks API: Si eres desarrollador, puedes recopilar datos a través de esta interfaz en el navegador.
// Ejemplo de seguimiento de Long Tasks en el navegador
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(`¡Atención, Long Task! Duración: ${entry.duration}ms`);
}
});
observer.observe({ entryTypes: ['longtask'] });
Solo necesitas mirar la consola y verás quién está atascado en la cocina.
Recetas para mejorar las JS Long Tasks
La optimización de las métricas de JavaScript es compleja, no nos engañemos. Siempre es necesario ver el sitio en un contexto más amplio y elegir la solución más eficiente. El equipo de asesoría de PageSpeed.ONE puede ayudarte con eso.
La optimización de Long Tasks no es magia, es una disciplina. Aquí están los pasos básicos:
- Yielding (Liberación): Si tienes un cálculo largo, interrúmpelo. Usa técnicas como
setTimeout(0)o el modernoscheduler.yield(). Al trabajar con React, consulta nuestros consejos en el artículo sobre optimización de React. Así, el navegador tiene tiempo para atender los clics del usuario. - Code Splitting (División de código): No envíes todo el código al navegador de una vez. Divídelo en paquetes más pequeños que se carguen solo cuando sea necesario.
- Optimización del DOM: Cuantos menos elementos tenga tu página, más rápidas serán las modificaciones. Una gran estructura DOM de elementos ralentiza cada operación del navegador.
- Web Workers: Un consejo para los amantes de la tecnología. Mueve los cálculos pesados a una "oficina secundaria" (hilo secundario). Así, el hilo principal queda libre para la interacción con el usuario.
Monitoring PLUS: Tu ojo que nunca duerme
Monitorear Long Tasks en tu computadora es solo el comienzo. Pero, ¿qué pasa con tus clientes? Nuestra herramienta monitoring PLUS supervisa las métricas por ti. Así, te enteras a tiempo si un nuevo script de marketing o el trabajo de los propios desarrolladores empiezan a empeorar el rendimiento de tu sitio web. Más sobre la monitorización de la velocidad web en nuestra guía de monitorización.
Te ayudamos con el monitoring de Core Web Vitals y, en caso de cambios mayores, te enviamos notificaciones.
¿Recibes notificaciones sobre cambios en las métricas de JavaScript y la velocidad de tu sitio web en general?
Conclusión
Las JS Long Tasks pueden ser un asesino silencioso de la experiencia del usuario. Puedes tener un diseño hermoso, pero si la web no responde, las conversiones caen. Enfócate en que tu hilo principal siempre tenga espacio para respirar y controla las métricas INP, TBT y JSLT.
¿Qué sigue?
- ¿Quieres saber cómo está tu sitio web? Prueba.
- ¿Necesitas optimizar las métricas? Echa un vistazo a nuestro análisis SpeedSprint.