¿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 respuesta de la entrada.
De forma predeterminada, Lighthouse deja de supervisar el TBT después del tiempo de carga (TTI), al igual que otras herramientas de lab que miden la carga de la página. Consulta ¿Cómo se relaciona el TBT con el TTI?.
El subproceso principal se considera "bloqueado" cada vez que hay una tarea larga, 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 interactúe con la página en medio de una tarea larga, el navegador debe esperar a que finalice la tarea para poder responder.
Si la tarea es lo suficientemente larga (más de 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. El tiempo de bloqueo total de una página es la suma del tiempo de bloqueo de cada tarea larga que se produce después del FCP para el período medido (por lo general, el TTI para las 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:
El cronograma que se muestra 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 de cada una de las tareas largas:
Por lo tanto, 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 la tarea (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 inconveniente para los usuarios, si no interactúan en ese momento. También puede pasar por alto los problemas causados por las interacciones cuando se miden en el entorno del lab. Recomendamos medir el INP en el campo como una medida de los problemas de capacidad de respuesta reales que experimentan los usuarios. La TBT puede ser una métrica de proxy razonable para la INP del laboratorio, pero no reemplaza a la INP en sí.
¿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.
El TTI considera que una página es "interactiva de forma confiable" si el subproceso principal no tiene tareas largas durante al menos cinco segundos. Esto significa que tres tareas de 51 ms repartidas en 10 segundos pueden retrasar el TTI tanto como 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. Mientras que una sola tarea de 10 segundos tendría un TBT de 9950 milisegundos. El valor de TBT más alto en el segundo caso cuantifica la peor experiencia.
Este ejemplo muestra por qué la TBT suele ser una mejor métrica que la TTI, ya que es menos propensa a los valores extremos. Esto sucede incluso cuando se usa TTI como extremo para TBT.
Cómo medir el tiempo de carga de la página
El TBT es una métrica que se debe medir en el lab. La mejor manera de medir el TBT es ejecutar una auditoría de rendimiento de Lighthouse en tu sitio. Consulta la documentación de Lighthouse sobre TBT para obtener detalles sobre el 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 su lugar, te recomendamos que mires la API de Long Animations Frame en el campo si quieres ir más allá de una sola interacción de INP.
Herramientas de 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 más información sobre cómo el TBT de tu página afecta tu puntuación de rendimiento de Lighthouse, consulta Cómo Lighthouse determina tu puntuación de TBT.
Cómo mejorar el TBT
En general, recomendamos optimizar para la INP en lugar de la TBT, ya que esta última es una métrica de proxy para la INP en el laboratorio (donde la INP no se puede medir con precisión). Por lo tanto, para mejorar el TBT, consulta nuestros lineamientos para optimizar la INP.
Si te enfocas específicamente en el TBT, puedes ejecutar una auditoría de rendimiento de Lighthouse y prestar atención a las oportunidades específicas que sugiera la auditoría.
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: