¿Qué es TBT?
La métrica Tiempo de bloqueo total (TBT) mide la cantidad total de tiempo después del Primer procesamiento de imagen con contenido (FCP) durante el cual el subproceso principal se bloqueó durante el tiempo suficiente para evitar la capacidad de respuesta de la entrada.
De forma predeterminada, Lighthouse deja de supervisar TBT después del tiempo de carga (TTI), al igual que otras herramientas del lab que miden la carga de página. Consulta ¿Cómo se relaciona la TBT con la TTI?.
El subproceso principal se considera "bloqueado" cada vez que hay una Tarea larga (Long Task) una tarea que se ejecuta en el subproceso principal durante más de 50 milisegundos. Decimos que el subproceso principal está "bloqueado" porque el navegador no puede interrumpir una tarea en curso. Por lo tanto, en caso de que un usuario sí interactúe con la página en medio de una tarea larga, el navegador debe esperar a que esta finalice para poder responder.
Si la tarea es lo suficientemente larga (superior a 50 milisegundos), es probable que el usuario note la demora y perciba la página como lenta o dañada.
El tiempo de bloqueo de una tarea larga determinada es su duración superior a 50 milisegundos. Además, el tiempo de bloqueo total de una página es la suma del tiempo de bloqueo de cada tarea larga que ocurre después del FCP durante el período medido (por lo general, TTI para herramientas de carga de páginas o el tiempo de seguimiento total para otras herramientas).
Por ejemplo, considera el siguiente diagrama del subproceso principal del navegador durante la carga de la página:
La línea de tiempo representada en la imagen anterior tiene cinco tareas, tres de las cuales son tareas largas porque su duración supera los 50 milisegundos. En el siguiente diagrama, se muestra el tiempo de bloqueo para cada una de las tareas largas:
Entonces, si bien el tiempo total dedicado a ejecutar tareas en el subproceso principal es de 560 milisegundos, solo 345 milisegundos de ese tiempo se consideran tiempo de bloqueo.
| Duración de la tarea (milisegundos) | Tiempo de bloqueo de tareas (milisegundos) | |
|---|---|---|
| Tarea uno | 250 | 200 |
| Tarea dos | 90 | 40 |
| Tarea tres | 35 | 0 |
| Tarea cuatro | 30 | 0 |
| Tarea cinco | 155 | 105 |
| Total Blocking Time | 345 milisegundos | |
¿Cómo se relaciona la TBT con la INP?
El TBT es anterior al INP y es útil como indicador de problemas de INP, en particular en el entorno de lab, donde medir el INP es más difícil. Sin embargo, la TBT puede marcar posibles problemas que no sean un problema para los usuarios, si no interactúan en ese momento. Además, puede pasar por alto problemas causados por interacciones cuando se mide en el entorno del lab. Recomendamos medir el INP en el campo como una medida de los problemas reales de capacidad de respuesta que experimentan los usuarios. TBT puede ser una métrica proxy razonable para INP para el lab, pero no es un sustituto del INP en sí mismo.
¿Cómo se relaciona el TBT con el TTI?
El TBT se mide durante un período. En el caso de algunas herramientas de lab que miden tradicionalmente las cargas de página, incluida Lighthouse, el TBT se midió hasta el TTI porque ayuda a cuantificar la gravedad de la falta de interactividad de una página antes de que se vuelva interactiva de forma confiable. Sin embargo, el TBT también se puede seguir midiendo después de la carga de la página y, por lo tanto, más allá del TTI, por ejemplo, en el modo de período de Lighthouse.
TTI considera que una página es "confiablemente interactiva" si el subproceso principal no tiene tareas largas durante al menos cinco segundos. Esto significa que tres tareas de 51 ms distribuidas en 10 segundos pueden retrasar el TTI solo en una sola tarea de 10 segundos, pero esas dos situaciones se sentirían muy diferentes para un usuario que intenta interactuar con la página.
En el primer caso, tres tareas de 51 ms tendrían un TBT de 3 milisegundos. En cambio, una tarea de una sola duración de 10 segundos tendría un TBT de 9,950 milisegundos. El valor de TBT más alto en el segundo caso cuantifica la peor experiencia.
En este ejemplo, se muestra por qué la TBT suele ser una mejor métrica que la TTI, ya que tiene menos probabilidades de generar valores atípicos. Esto sucede incluso cuando se usa TTI como extremo para TBT.
Cómo medir la TBT
La TBT es una métrica que se debe medir en el lab. La mejor manera de medir la TBT es ejecutar una auditoría de rendimiento de Lighthouse en tu sitio. Consulta la documentación de Lighthouse sobre TBT para obtener detalles de uso.
Es posible medir el TBT en el campo, pero no lo recomendamos, ya que la interacción del usuario puede afectar el TBT de tu página de manera que genere mucha variación en tus informes. En cambio, aconsejamos observar la API de Long Animations Frames en el campo más reciente si deseas ver más allá de una sola interacción de INP.
Herramientas del lab
¿Cuál es una buena puntuación de TBT?
Para proporcionar una buena experiencia del usuario, los sitios deben esforzarse por tener un tiempo de bloqueo total inferior a 200 milisegundos cuando se prueban en hardware móvil promedio.
Para obtener detalles sobre cómo la TBT de tu página afecta la puntuación de rendimiento de Lighthouse, consulta Cómo Lighthouse determina tu puntuación de TBT.
Cómo mejorar el TBT
En general, recomendamos realizar optimizaciones para INP en lugar de TBT, ya que recomendamos usar TBT como una métrica proxy para INP en el lab (donde, por lo general, INP no se puede medir con precisión). Por lo tanto, para mejorar el TBT, consulta nuestros lineamientos para optimizar la INP.
Si estás analizando la TBT de manera específica, puedes ejecutar una auditoría de rendimiento de Lighthouse y prestar atención a cualquier oportunidad específica que la auditoría sugiera.
En general, mejorar el TBT de un sitio implica reducir la cantidad de secuencias de comandos de bloqueo, lo que significa optimizarlas para que sean menos bloqueantes o reducir la cantidad de secuencias de comandos en general. Consulta las siguientes guías de rendimiento: