Что такое ТБТ?
Метрика «Общее время блокировки» (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 миллисекунд | |
Как ТБТ связан с ИЯФ?
TBT появился раньше INP и полезен в качестве индикатора проблем INP, особенно в лабораторных условиях, где измерение INP сложнее. Однако TBT может сигнализировать о потенциальных проблемах, если у пользователей их нет, если они в это время не взаимодействуют. И он также может пропустить проблемы, вызванные взаимодействиями при измерении в лабораторной среде. Мы рекомендуем измерять INP в полевых условиях как меру реальных проблем с реагированием, с которыми сталкиваются пользователи. TBT может быть разумным косвенным показателем INP для лаборатории, но сам по себе он не является заменой INP.
Как ТБТ соотносится с 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 в полевых условиях можно, но мы не рекомендуем этого делать, поскольку взаимодействие с пользователем может повлиять на TBT вашей страницы таким образом, что это приведет к большим различиям в ваших отчетах. Вместо этого мы советуем обратить внимание на новый API-интерфейс Long Animations Frame, если вы хотите выйти за рамки одного взаимодействия INP.
Лабораторные инструменты
Что такое хороший показатель TBT?
Чтобы обеспечить хорошее взаимодействие с пользователем, сайты должны стремиться к тому, чтобы общее время блокировки составляло менее 200 миллисекунд при тестировании на среднем мобильном оборудовании .
Подробную информацию о том, как TBT вашей страницы влияет на показатель производительности Lighthouse, см. в разделе «Как Lighthouse определяет ваш показатель TBT».
Как улучшить ТБТ
В целом мы рекомендуем оптимизировать INP вместо TBT, поскольку мы рекомендуем использовать TBT как прокси-показатель INP в лаборатории (где INP обычно невозможно точно измерить). Поэтому, чтобы улучшить TBT, ознакомьтесь с нашим руководством по оптимизации INP .
Если вы рассматриваете конкретно TBT, вы можете провести аудит эффективности Lighthouse и обратить внимание на любые конкретные возможности, которые предлагает аудит.
В целом улучшение TBT для сайта предполагает уменьшение количества блокирующих скриптов, что означает либо их оптимизацию для уменьшения блокирования, либо уменьшение количества скриптов в целом. См. следующие руководства по производительности: