Общее время блокировки (TBT)
Что такое TBT? #
Метрика Total Blocking Time (TBT) измеряет общее количество времени между FCP (Первой отрисовкой контента) и TTI (Временем до интерактивности). В данный период времени основной поток блокируется и не реагирует на действия пользователя.
Основной поток считается «заблокированным» каждый раз, когда возникает длительная задачазадача, которая выполняется в основном потоке более 50 миллисекунд (мс). Мы говорим, что основной поток «заблокирован», потому что браузер не может прервать выполняемую задачу. Если пользователь взаимодействует со страницей в середине длительной задачи, браузер ждет завершения задачи, прежде чем ответить на действия пользователя.
Если задача достаточно длительная (более 50 мс), вполне вероятно, что пользователь заметит задержку и воспримет страницу как «подвисающую» или «глючную».
Время блокировки данной длительной задачиэто ее продолжительность, превышающая 50 мс. И общее время блокировки для страницыэто сумма временных интервалов блокировок для каждой длительной задачи, возникающей между FCP и TTI.
Для примера рассмотрим следующую схему основного потока браузера во время загрузки страницы:
На временной шкале выше пять задач, три из которых являются длительными, так как их продолжительность превышает 50 мс. Следующая диаграмма показывает время блокировки для каждой из длительных задач:
Таким образом, хотя общее время, затрачиваемое на выполнение задач в основном потоке, составляет 560 мс, только 345 мс считаются временем блокировки.
| Продолжительность задачи | Время блокировки задачи | |
|---|---|---|
| Первая задача | 250 мс | 200 мс |
| Вторая задача | 90 мс | 40 мс |
| Третья задача | 35 мс | 0 мс |
| Четвертая задача | 30 мс | 0 мс |
| Пятая задача | 155 мс | 105 мс |
| Общее время блокировки | 345 мс | |
Как TBT соотносится с TTI? #
TBTотличный вспомогательный показатель для TTI, потому что он помогает количественно оценить степень неинтерактивности страницы до того, как она станет надежно интерактивной.
TTI считает страницу «надежно интерактивной», если в основном потоке не выполняются длительные задачи в течение как минимум пяти секунд. Это означает, что три задачи по 51 мс, распределенные на 10 секунд, могут отодвинуть TTI так же далеко, как и одна 10-секундная задача, но эти два сценария будут сильно отличаться для пользователя, пытающегося взаимодействовать со страницей.
В первом случае для трех задач по 51 мс значение TBT составит 3 мс. Тогда как для одиночной 10-секундной задачи TBT будет равно 9950 мс. Чем больше значение TBT во втором случае, тем хуже впечатления пользователя.
Как измерить TBT #
TBTэто показатель, который лучше всего измерять в лабораторных условиях. Оптимальный способ измерить TBTзапустить проверку производительности Lighthouse для вашего сайта. Подробнее об этом см. в документации Lighthouse по TBT.
Инструменты для измерения в лабораторных условиях #
Какое значение показателя TBT можно считать хорошим? #
Для обеспечения удобства работы пользователей сайты должны стремиться к тому, чтобы общее время блокировки не превышало 300 миллисекунд при тестировании на мобильных устройствах среднего уровня производительности.
Подробная информация о влиянии TBT страницы на показатель производительности в Lighthouse приводится в статье «Как Lighthouse определяет ваш показатель TBT».
Как улучшить показатель TBT #
Чтобы узнать, как улучшить TBT для конкретного сайта, можно запустить проверку производительности с помощью Lighthouse и обратить внимание на любые конкретные возможности улучшения, предлагаемые проверкой.
Чтобы узнать, как улучшить TBT в целом (для любого сайта), обратитесь к следующим руководствам по производительности:
- Уменьшение влияния стороннего кода
- Уменьшение времени выполнения JavaScript
- Минимизация работы основного потока
- Поддержание малого количества запросов и объемов передаваемых данных