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