TBT (Total Blocking Time): Entendiendo el Tiempo de Bloqueo de Tu Página

Introducción

Total Blocking Time (TBT) es una métrica de rendimiento crítica que mide cuánto tiempo el hilo principal de tu página está bloqueado durante la carga. Cuando el hilo principal está bloqueado, los usuarios no pueden interactuar con tu página—los clics no se registran, el texto no aparece al escribir, y la página se siente “congelada.”

TBT cuantifica esta experiencia frustrante midiendo el tiempo total entre First Contentful Paint (FCP) y Time to Interactive (TTI) durante el cual el hilo principal estuvo bloqueado el tiempo suficiente para prevenir la respuesta a inputs del usuario.

¿Qué es TBT?

TBT mide la cantidad total de tiempo de bloqueo causado por Long Tasks durante el proceso de carga de la página. Así es como funciona:

Entendiendo los Long Tasks

Un Long Task (Tarea Larga) es cualquier tarea que se ejecuta en el hilo principal del navegador por más de 50 milisegundos. Durante un Long Task, el navegador no puede responder a la entrada del usuario.

Duración de Tarea: 70ms
               ├─────────────────────────────────────┤
               │  Primeros 50ms  │  Bloqueo: 20ms    │
               │   (aceptable)   │  (cuenta en TBT)  │
               └─────────────────┴───────────────────┘

Cálculo de TBT

El tiempo de bloqueo de cada Long Task es la porción que excede los 50ms:

Long Task 1: 250ms → Tiempo de bloqueo = 200ms (250 - 50)
Long Task 2: 90ms  → Tiempo de bloqueo = 40ms  (90 - 50)
Long Task 3: 35ms  → Tiempo de bloqueo = 0ms   (no es Long Task)
Long Task 4: 155ms → Tiempo de bloqueo = 105ms (155 - 50)

TBT = 200 + 40 + 0 + 105 = 345ms

Umbrales de TBT

Según la documentación de Chrome Developers, las puntuaciones de TBT se categorizan así:

✅ Bueno:              < 200 milisegundos
⚠️ Necesita Mejorar:  200 - 600 milisegundos
❌ Pobre:              > 600 milisegundos

Objetivo: Apunta a un TBT menor a 200ms para proporcionar una experiencia de usuario responsiva.

¿Por qué es Importante TBT para SEO?

TBT impacta directamente cómo los usuarios perciben la capacidad de respuesta de tu sitio web y tiene varias implicaciones importantes:

Beneficios clave de un buen TBT:

• Experiencia de usuario: Un TBT bajo significa que los usuarios pueden interactuar con tu página sin retrasos frustrantes
• Puntuación de Lighthouse: TBT contribuye 30% a tu puntuación general de rendimiento en Lighthouse
• Correlaciona con INP: TBT en pruebas de laboratorio predice puntuaciones reales de INP (Interaction to Next Paint)
• Crítico en móvil: Especialmente importante en dispositivos móviles con procesadores más lentos
• Impacto en conversiones: Las páginas que no responden llevan a mayores tasas de rebote e interacciones abandonadas

TBT vs INP

Mientras que INP (Interaction to Next Paint) es el Core Web Vital para la capacidad de respuesta, TBT es su proxy basado en laboratorio:

Métrica	Tipo	Mide	Caso de Uso
TBT	Métrica de laboratorio	Tiempo de bloqueo durante carga	Desarrollo, auditorías Lighthouse
INP	Métrica de campo	Respuesta real a interacciones	Monitoreo de usuarios reales

Mejorar TBT típicamente mejora INP, haciendo que TBT sea valioso para la optimización durante el desarrollo.

¿Qué Causa un TBT Alto?

Varios factores pueden causar un TBT alto:

1. Ejecución Pesada de JavaScript

Bundles grandes de JavaScript que se ejecutan sincrónicamente bloquean el hilo principal:

Descarga JS → Parseo → Ejecución (Long Tasks) → Impacto en TBT
                              ↑
              Computación pesada bloquea el hilo

2. Scripts de Terceros

Analytics, anuncios y widgets sociales frecuentemente añaden tiempo de bloqueo significativo:

<!-- Cada script puede contribuir Long Tasks -->
<script src="analytics.js"></script>
<script src="chat-widget.js"></script>
<script src="social-buttons.js"></script>

3. JavaScript Ineficiente

Código mal optimizado que hace demasiado trabajo de una vez:

// ❌ Una tarea grande bloqueando el hilo
function procesarTodosLosDatos(items) {
    items.forEach(item => computacionPesada(item));
}

// ✅ Dividiendo en chunks más pequeños
function procesarDatosEnChunks(items) {
    requestIdleCallback(() => procesarSiguienteChunk());
}

4. Recursos que Bloquean el Renderizado

CSS y JavaScript que previenen que la página se vuelva interactiva:

<!-- Bloquea el renderizado y añade al TBT -->
<script src="bundle-grande.js"></script>

Mejores Prácticas Básicas

1. Dividir Long Tasks

Separa el trabajo pesado de JavaScript en chunks más pequeños:

// Usar requestIdleCallback o setTimeout
function hacerTrabajo(tareas) {
    if (tareas.length === 0) return;

    const tarea = tareas.shift();
    procesarTarea(tarea);

    setTimeout(() => hacerTrabajo(tareas), 0);
}

2. Diferir JavaScript No Crítico

<!-- Cargar JavaScript sin bloquear -->
<script src="analytics.js" defer></script>
<script src="no-critico.js" async></script>

3. Eliminar JavaScript No Utilizado

Audita tus bundles de JavaScript y elimina código que no se necesita:

• Usa tree-shaking en tu proceso de build
• Analiza el tamaño del bundle con herramientas como webpack-bundle-analyzer
• Elimina dependencias no utilizadas

4. Optimizar Scripts de Terceros

• Carga scripts de terceros después del contenido principal
• Usa resource hints como dns-prefetch y preconnect
• Considera self-hosting de recursos críticos de terceros

Errores Comunes a Evitar

Error 1: Cargar Todo el JavaScript al Inicio

Problema: Descargar y ejecutar todo el JavaScript antes de que la página sea interactiva.

Solución: Divide tu aplicación en código y carga solo lo necesario inicialmente.

Error 2: Procesamiento de Datos Sincrónico

Problema: Procesar grandes conjuntos de datos sincrónicamente bloquea el hilo principal.

Solución: Usa Web Workers para computación pesada o divide el trabajo en tareas más pequeñas.

Error 3: Ignorar el Impacto de Terceros

Problema: Asumir que los scripts de terceros no afectan tus métricas.

Solución: Audita scripts de terceros con Lighthouse y considera cargarlos de forma diferida.

Midiendo TBT

Usando Chrome DevTools

1. Abre DevTools (F12)
2. Ve al panel de Performance
3. Haz clic en Record y recarga la página
4. Busca Long Tasks (triángulos rojos) en la línea de tiempo

Usando Lighthouse

Ejecuta una auditoría de Lighthouse para ver tu puntuación de TBT:

• En Chrome DevTools → pestaña Lighthouse
• Selecciona “Performance” y ejecuta la auditoría
• TBT se muestra en la sección de métricas

Artículos Relacionados

Mejora otros aspectos del rendimiento de tu sitio:

• LCP Explicado - Optimiza tu elemento de contenido más grande
• INP Explicado - Entiende la interactividad en el mundo real
• FCP Explicado - Mejora el primer pintado de contenido
• Speed Index Explicado - Mide el progreso visual

📚 Volver al Hub de Performance SEO - Explora todos los temas de rendimiento

---

Referencias

1. Chrome Developers - Total Blocking Time
2. web.dev - Total Blocking Time (TBT)
3. Chrome Developers - Lighthouse Performance Scoring

---

Pruébalo Tú Mismo

¿Quieres medir el TBT de tu página?

🔧 Descarga UXR SEO Analyzer (Gratis, análisis 100% local)

---

Disclaimer: Los analizadores en esta extensión son guías de referencia basadas en documentación oficial de Chrome Developers y web.dev. No representan verdades absolutas sobre cómo los motores de búsqueda evalúan tu contenido—solo los motores de búsqueda conocen sus algoritmos internos. Usa estas recomendaciones como punto de partida para mejorar tu sitio.

Última actualización: 14 de diciembre de 2025