Métrica «Total Blocking Time» (TBT)

El Total Blocking Time (TBT) es una métrica de velocidad web que indica el tiempo total durante el cual la página renderizada no puede responder a las entradas del usuario.

La métrica Total Blocking Time, también conocida como «Tiempo Total de Bloqueo de JavaScript», mide el periodo después de la primera pintura con contenido (FCP) cuando el hilo principal del navegador está bloqueado por JavaScript y la página no puede responder a las entradas del usuario. Esto suele ser un problema de JavaScript lento y la métrica TBT generalmente tiene un impacto directo en la importante métrica INP.

¿Qué significa bloqueo del navegador y qué son las tareas largas?#

Un hilo principal del navegador bloqueado es un estado en el que el navegador debe procesar una tarea larga (conocida como «long task»). Es aquella tarea que se ejecuta en el hilo principal del navegador durante más de 50 milisegundos.

Así se ve un clic ralentizado por una tarea larga.

En la imagen se puede observar:

• La primera interacción (marcada como «Click 1») ocurre rápidamente porque el navegador puede responder de inmediato.
• La respuesta del navegador a la segunda interacción («Click 2») tendrá un retraso, ya que el usuario ha coincidido con el procesamiento de código JavaScript en segundo plano («Long Task»).

Decimos que el hilo principal está «bloqueado» porque el navegador no puede interrumpir la tarea en curso. El usuario simplemente hace clic o intenta realizar otra interacción con la página, pero no obtiene respuesta alguna porque el navegador está ejecutando una tarea larga.

Si el usuario interactúa con la página en medio de una tarea larga, el navegador debe esperar a que la tarea termine antes de poder responder.

Si una tarea dura más de 50 milisegundos, es probable que el usuario note el retraso y perciba la página como lenta o no funcional.

El tiempo total de bloqueo de la página, es decir, el valor de la métrica TBT, es la suma del tiempo de bloqueo de cada tarea larga que ocurre después del evento FCP durante el periodo de medición. La medición generalmente termina con la métrica Time To Interactive (TTI) o cuando el monitoreo del medidor finaliza.

¿Por qué es importante monitorear el TBT?#

Los usuarios no quieren esperar y, cuando lo hacen, quieren saber que algo está ocurriendo. Si una página web ya ha mostrado algún contenido significativo (se ha producido el evento FCP), es muy probable que los usuarios comiencen a interactuar con ella. Si la página no responde a las interacciones del usuario, esto puede desanimarlos y hacer que abandonen la página.

Como se ha mencionado, la métrica TBT también afecta a una de las 3 métricas Core Web Vitals, específicamente la métrica INP. Si el valor de TBT es alto y las tareas largas individuales son más largas de 200 ms, es muy probable que la métrica INP también empeore.

Esfuércese, por tanto, en que su web genere las tareas largas más cortas posibles y que el Total Blocking Time sea lo menor posible.

Valores ideales de Total Blocking Time#

Para que las páginas proporcionen una buena experiencia de usuario, deben esforzarse por lograr un tiempo total de bloqueo (TBT) inferior a 200 milisegundos cuando se prueban en «hardware móvil promedio». Este valor es recomendado por el equipo de Chrome en Web.Dev.

Veamos también qué valores de TBT recomienda la herramienta Lighthouse o herramientas derivadas como nuestro monitor de velocidad.

Tiempo TBT	Evaluación de Lighthouse
0 – 200 ms	Verde (rápido)
200 - 600 ms	Naranja (medio)
más de 600 ms	Rojo (lento)

Medición del TBT#

El Total Blocking Time solo puede medirse mediante mediciones sintéticas, es decir, por máquina. Hay varias maneras de obtener el valor de la métrica TBT para una página específica.

PageSpeed Insights#

Con nuestra prueba de velocidad web o la herramienta PageSpeed Insights puede conocer el valor de la métrica TBT para cada URL por separado.

Métrica TBT en el informe de la herramienta Lighthouse, en este caso dentro de PageSpeed Insights.

Monitorización PageSpeed.ONE#

En nuestro monitor PLUS mostramos no solo el valor actual de TBT para cada URL, sino que también podemos representar gráficamente cómo ha cambiado la métrica a lo largo del tiempo.

En el informe de Páginas monitoreamos el desarrollo del TBT para cada URL:

Total Blocking Time para diferentes tipos de páginas web y su evolución.

Con el Watchdog mostramos el desarrollo diario continuo del valor sintético de TBT, así como de otras métricas, y enviamos notificaciones cuando se superan los límites establecidos:

Evolución de la métrica TBT en el Watchdog de monitoreo de PageSpeed.ONE.

Optimización de la métrica Total Blocking Time#

La optimización de la métrica TBT consiste principalmente en reducir la cantidad de JavaScript ejecutado en la página.

En general, se puede recomendar lo siguiente:

• Limite la cantidad de JavaScript insertado en la página.
• Evite usar bibliotecas de JavaScript innecesarias.
• Minimize el uso de código JavaScript de terceros.
• Reduzca el trabajo en el hilo principal del navegador.

Los problemas específicos con TBT pueden verse de la siguiente manera:

• Generación de una tarea larga que asegura la hidratación de la página en frameworks de JavaScript como React o Nuxt/Vue.js.
• Inicialización de un gran número de funciones que se ejecutan todas a la vez al evento DOM ready.
• Inicialización de muchas bibliotecas de JavaScript de terceros utilizadas para fines de marketing, como TikTok, Databreakers, GTM, FbEvents, etc.
• Inicialización de bibliotecas de JavaScript para componentes que no son visibles en el primer viewport y, por tanto, se puede posponer su inicio.

En todos los casos, es necesario limitar la cantidad de código ejecutado en una página o vista en particular o optimizar el código JS que crea tareas largas. Para medir tareas largas en usuarios reales, puede utilizar la métrica JS Long Tasks (JSLT).

Optimización manual de tareas largas en JavaScript#

Los más avanzados pueden buscar tareas largas específicas en Chrome DevTools y la pestaña Performance (ver medición de velocidad directamente en el navegador) y optimizar partes específicas del código.

Las tareas largas en la web se pueden identificar fácilmente siguiendo las instrucciones del siguiente gráfico:

Cómo buscar tareas largas en Chrome DevTools.

1. Inicie el navegador Chrome con DevTools (F12) y muestre la página que desea optimizar.
2. Abra la pestaña Performance (en la imagen, n.º 1).
3. Ejecute la función Reload and Record para grabar el proceso de carga de la página (n.º 2).
4. Grabe la línea temporal de carga de la página.
5. En la línea Main (trabajo en el hilo principal) verá tareas largas tachadas en rojo, que duran más de 50 ms (n.º 3).
6. Al hacer clic lentamente dentro de la tarea larga, puede identificar qué parte del JavaScript es problemática (n.º 4).

Puede encontrar más información sobre cómo optimizar tareas largas en nuestro artículo sobre la optimización de la métrica INP.