El tiempo de bloqueo total (TBT) es una de las métricas con seguimiento en la sección Rendimiento del informe de Lighthouse. Cada métrica abarca algún aspecto de la velocidad de carga de la página.
El informe de Lighthouse muestra el TBT en milisegundos:
Qué mide la TBT
TBT mide la cantidad total de tiempo que una página no puede responder a las entradas del usuario, como clics del mouse, presiones de la pantalla o presiones del teclado. Para calcular la suma, se suma la parte de bloqueo de todas las tareas largas entre First Contentful Paint y Tiempo de carga. 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 longitud, la parte de bloqueo sería de 20 ms.
Cómo Lighthouse determina tu puntuación de TBT
Tu puntuación TBT es una comparación del tiempo TBT de tu página y el TBT multiplicado por millones de sitios reales cuando se cargan en dispositivos móviles. Consulta Cómo se determinan las puntuaciones de las métricas para obtener información sobre cómo se establecen los umbrales de puntuación de Lighthouse.
En esta tabla, se muestra cómo interpretar tu puntuación TBT:
| Tiempo TBT (en milisegundos) |
Códigos de color |
|---|---|
| De 0 a 200 | Verde (rápido) |
| 200-600 | Naranja (moderado) |
| Más de 600 | Rojo (lento) |
Cómo mejorar tu puntuación de TBT
Consulta ¿Qué causa mis tareas largas? para aprender a diagnosticar la causa raíz de las tareas largas con el panel Rendimiento de las Herramientas para desarrolladores de Chrome.
En general, las causas más comunes de las tareas largas son las siguientes:
- Carga, análisis o ejecución innecesarios de JavaScript. Mientras analizas tu código en el panel Rendimiento, es posible que descubras que el subproceso principal realiza trabajos que en realidad no son necesarios para cargar la página. Reducir las cargas útiles de JavaScript con la división de código, la eliminación del código sin usar o la carga eficiente de JavaScript de terceros debería mejorar tu puntuación de TBT.
- Instrucciones de JavaScript ineficientes Por ejemplo, después de analizar tu código en el panel Rendimiento, supongamos
que ves una llamada a
document.querySelectorAll('a')que muestra 2,000 nodos. La refactorización de tu código para usar un selector más específico que solo muestre 10 nodos debería mejorar tu puntuación TBT.
Cómo mejorar tu nivel de rendimiento general
A menos que tengas un motivo específico para enfocarte en una métrica en particular, por lo general, es mejor enfocarse en mejorar tu puntuación de rendimiento general.
Usa la sección Oportunidades del informe de Lighthouse para determinar qué mejoras tendrán el mayor valor para tu página. Cuanto más significativa sea la oportunidad, mayor será el efecto que tendrá en tu puntuación de rendimiento. Por ejemplo, la captura de pantalla de Lighthouse que aparece a continuación muestra que eliminar los recursos de bloqueo de renderización producirá la mayor mejora:
Consulta la página de destino de las auditorías de rendimiento para obtener información sobre cómo abordar las oportunidades identificadas en tu informe de Lighthouse.
Recursos
- Código fuente de la auditoría Tiempo de bloqueo total
- ¿Las tareas largas de JavaScript retrasan su tiempo de carga?
- Cómo optimizar el retraso de primera entrada
- Primer procesamiento de imagen con contenido
- Tiempo para ser interactivo
- Reduce las cargas útiles de JavaScript con la división de código
- Quita el código sin usar
- Carga recursos de terceros de forma eficiente