Что такое ТБТ?
Метрика «Общее время блокировки» (TBT) измеряет общее количество времени после первой контентной отрисовки (FCP), когда основной поток был заблокирован на достаточно долгое время, чтобы предотвратить реакцию ввода.
По умолчанию 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 во втором случае количественно характеризует худшие впечатления.
Этот пример показывает, почему TBT часто является лучшим показателем, чем TTI, поскольку он менее подвержен выбросам. Это происходит даже в том случае, когда TTI используется в качестве конечной точки для TBT.
Как измерить ТБТ
ТБТ – это показатель, который следует измерять в лаборатории . Лучший способ измерить TBT — провести аудит производительности Lighthouse на вашем сайте. Подробности использования см. в документации Lighthouse по TBT .
Лабораторные инструменты
Что такое хороший показатель TBT?
Чтобы обеспечить хорошее взаимодействие с пользователем, сайты должны стремиться к тому, чтобы общее время блокировки составляло менее 200 миллисекунд при тестировании на среднем мобильном оборудовании .
Подробную информацию о том, как TBT вашей страницы влияет на показатель производительности Lighthouse, см. в разделе «Как Lighthouse определяет ваш показатель TBT».
Как улучшить ТБТ
Чтобы узнать, как улучшить TBT для конкретного сайта, вы можете запустить аудит производительности Lighthouse и обратить внимание на любые конкретные возможности, которые предлагает аудит.
Чтобы узнать, как улучшить TBT в целом (для любого сайта), обратитесь к следующим руководствам по производительности: