Total Blocking Time
El Total Blocking Time o TBT (tiempo de bloqueo total) es una de las métricas que se registran en la sección Rendimiento del informe Lighthouse. Cada métrica captura algún aspecto de la velocidad de carga de la página.
El informe Lighthouse muestra el TBT en milisegundos:
Qué mide la TBT #
La TBT mide la cantidad total de tiempo que una página está bloqueada para que no responda a la entrada del usuario, como los clics del ratón, toques de la pantalla o pulsaciones del teclado. La suma se calcula sumando la parte de bloqueo de todas las tareas largas entre First Contentful Paint (primer despliegue de contenido) y Time to Interactive (tiempo de interacción). Cualquier tarea que se ejecute durante más de 50 ms es una tarea larga. La cantidad de tiempo después de 50 ms es la parte de bloqueo. Por ejemplo, si Lighthouse detecta una tarea de 70 ms de duración, la porción de bloqueo sería de 20 ms.
Cómo determina Lighthouse su puntaje TBT #
Su puntaje TBT es una comparación del tiempo TBT de su página y el tiempo TBT de millones de sitios reales cuando se carga en dispositivos móviles. Consulte Cómo se determinan las puntuaciones de métricas para saber cómo se establecen los umbrales de puntuación de Lighthouse.
Esta tabla muestra cómo interpretar su puntaje TBT:
Cómo mejorar su puntaje TBT #
Consulte ¿Qué está causando mis tareas largas? para aprender a diagnosticar la causa principal de tareas largas con el panel Rendimiento de Chrome DevTools.
En general, las causas más comunes de tareas largas son:
- Carga, análisis o ejecución de JavaScript innecesarios. Al analizar su código en el panel Rendimiento, es posible que descubra que el hilo principal está realizando un trabajo que no es realmente necesario para cargar la página. Reducir las cargas útiles de JavaScript con la división de código, eliminar el código no utilizado o cargar JavaScript de terceros de manera eficiente debería mejorar su puntaje TBT.
- Declaraciones de JavaScript ineficientes. Por ejemplo, después de analizar su código en el panel Rendimiento, suponga que ve una llamada a
document.querySelectorAll('a')que devuelve 2000 nodos. Refactorizar su código para usar un selector más específico que solo devuelva 10 nodos debería mejorar su puntaje TBT.
How to improve your overall Performance score #
Unless you have a specific reason for focusing on a particular metric, it's usually better to focus on improving your overall Performance score.
Use the Opportunities section of your Lighthouse report to determine which improvements will have the most value for your page. The more significant the opportunity, the greater the effect it will have on your Performance score. For example, the Lighthouse screenshot below shows that eliminating render-blocking resources will yield the biggest improvement:
See the Performance audits landing page to learn how to address the opportunities identified in your Lighthouse report.
Recursos #
- Código fuente para la auditoría Total Blocking Time
- ¿Las tareas largas de JavaScript están retrasando su Time to Interactive?
- Optimizar la demora de la primera entrada
- Primer despliegue de contenido
- Tiempo de interacción
- Reducir las cargas útiles de JavaScript con la división de código
- Eliminar el código no utilizado
- Cargar de manera eficiente los recursos de terceros