Общее время блокировки (TBT)

Общее время блокировки (TBT)

Updated
Appears in: Metrics

Общее время блокировки (TBT)важный лабораторный показатель для измерения отзывчивости при загрузке, так как данный показатель помогает количественно оценить степень неинтерактивности страницы до того момента, как она станет надежно интерактивной. Низкое значение показателя 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 в полевых условиях, поскольку взаимодействие с пользователем может повлиять на TBT страницы таким образом, что это приведет к большим расхождениям со значениями в отчетах. Чтобы оценить интерактивность страницы в полевых условиях, следует измерить FID (Время ожидания до первого взаимодействия с контентом).

Какое значение показателя TBT можно считать хорошим? #

Для обеспечения удобства работы пользователей сайты должны стремиться к тому, чтобы общее время блокировки не превышало 300 миллисекунд при тестировании на мобильных устройствах среднего уровня производительности.

Подробная информация о влиянии TBT страницы на показатель производительности в Lighthouse приводится в статье «Как Lighthouse определяет ваш показатель TBT».

Как улучшить показатель TBT #

Чтобы узнать, как улучшить TBT для конкретного сайта, можно запустить проверку производительности с помощью Lighthouse и обратить внимание на любые конкретные возможности улучшения, предлагаемые проверкой.

Чтобы узнать, как улучшить TBT в целом (для любого сайта), обратитесь к следующим руководствам по производительности:

Last updated: Improve article