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