TBT: qué es y cómo reducir el JavaScript que bloquea

Por qué importa

Una página bloqueada parece rota: pulsas el menú o el botón de añadir al carrito y no pasa nada, o pasa un segundo después. En móviles de gama media, con procesadores mucho más lentos que un ordenador, el JavaScript de sobra se nota enseguida.

El TBT es una métrica de laboratorio relacionada con el INP (Interaction to Next Paint), la Core Web Vital que mide la respuesta a las interacciones de visitantes reales y que sustituyó a FID en marzo de 2024. Google considera bueno un INP de hasta 200 ms. No son lo mismo, pero si bajas el TBT lo normal es que mejore también el INP. Además, el TBT es la métrica que más pesa en la puntuación de rendimiento de Lighthouse.

Cómo lo comprueba Posiciona

Tomamos el TBT que mide Lighthouse 13 en la prueba móvil de PageSpeed Insights y usamos su nota: unos 90 puntos con 200 ms, 50 con 600 ms y menos a partir de ahí. En el informe verás el tiempo y si es bueno (hasta 200 ms), necesita mejora (hasta 600 ms) o es pobre. Si pasa de 200 ms, te recomendamos reducir el JavaScript que ocupa el hilo principal, la parte del navegador que pinta la página y atiende al usuario.

En la nota de Velocidad esta comprobación cuenta como “importante” (peso 3 de 5).

Cómo solucionarlo

Localiza los scripts culpables: los diagnósticos de PageSpeed Insights sobre ejecución de JavaScript y código de terceros te dicen qué archivos consumen más tiempo.
Quita lo que no aporte: plugins o apps sin uso, píxeles de publicidad repetidos, varias herramientas de analítica a la vez, chats y widgets de redes sociales.
Carga con defer o async los scripts que no hacen falta para ver la página, y retrasa hasta la primera interacción los que solo se usan después, como el chat.
Sustituye los widgets pesados (mapas, vídeos de YouTube, chats) por una imagen o un botón que cargue el widget real solo cuando el usuario lo pulse.
Si tienes código propio, divide las tareas largas y no cargues en cada página el JavaScript que solo se usa en otras.
Tras cada cambio, prueba que formularios, carrito y menús siguen funcionando: retrasar scripts sin cuidado puede romper cosas.

Aplazar un script que no hace falta para ver la páginaHTML

<!-- Se descarga en paralelo y se ejecuta cuando el HTML está listo -->
<script src="/js/resenas.js" defer></script>

En WordPress

WP Rocket (con su opción de retrasar la ejecución del JavaScript), LiteSpeed Cache o Autoptimize permiten aplazar scripts sin tocar código. Actívalo y revisa después la web entera.
Con plugins como Asset CleanUp o Perfmatters puedes desactivar el CSS y el JavaScript de un plugin en las páginas donde no se usa, por ejemplo el del formulario fuera de la página de contacto.

En Shopify

En Shopify, cada app puede añadir scripts a todas las páginas. Desinstala las que no uses y, en el editor del tema (Tienda online → Temas → Personalizar), desactiva las integraciones de apps que no necesites.
Revisa theme.liquid desde Tienda online → Temas → Editar código: a veces quedan scripts de apps desinstaladas o códigos de seguimiento repetidos.

Preguntas frecuentes

¿Qué diferencia hay entre TBT e INP?

El TBT se mide en el laboratorio durante la carga y no necesita que nadie toque la página: suma el tiempo que el navegador está bloqueado. El INP se mide con visitantes reales y registra cuánto tarda la página en responder a sus clics, toques y teclas durante toda la visita. Son métricas distintas, pero comparten causa: demasiado JavaScript ejecutándose en el hilo principal.

¿Por qué mi TBT es alto en móvil y bajo en ordenador?

La prueba móvil de PageSpeed simula un procesador bastante más lento que el de un ordenador, así que el mismo código tarda mucho más en ejecutarse. Si en móvil tienes un TBT alto, tus visitantes con teléfonos de gama media están notando esos bloqueos. Optimizar pensando en ellos mejora también la experiencia en ordenador.