Total Blocking Time

Total Blocking Time (TBT) – это лабораторный показатель Lighthouse, который суммирует, сколько времени при загрузке страницы основной поток браузера был занят длинными задачами и не мог ответить на клик, касание или нажатие клавиши. Хорошим результатом на мобильной проверке считается до 200 мс.

Страница на телефоне вроде бы загрузилась: текст на месте, картинки видны. Вы нажимаете на меню, и ничего. Через секунду оно всё-таки открывается. В эту секунду браузер выполнял JavaScript: виджет чата, слайдер, счётчики, код шаблона. Пока скрипт работает, браузер глух к действиям человека. TBT считает, сколько таких глухих периодов набралось за время загрузки.

Как из длинных задач складывается TBT

Браузер выполняет работу задачами в основном потоке. Задача дольше 50 мс считается длинной. Всё, что сверх 50 мс, и есть время блокировки этой задачи. TBT складывает время блокировки всех длинных задач между первой отрисовкой контента (FCP) и моментом, когда страница стала стабильно отзывчивой.

Условный расчёт для страницы с чатом и счётчиком:

Короткие задачи до 50 мс в TBT не попадают совсем, даже если их сотня. А одна задача на 320 мс сразу добавляет 270 мс.

Какой TBT нормальный и как он связан с INP

В оценке производительности Lighthouse 10 у TBT самый большой вес, 30%. Поэтому именно он чаще всего тянет общий балл PageSpeed Insights вниз, особенно на мобильной проверке, где Lighthouse имитирует медленный процессор. Ориентируйтесь на неё, а не на проверку с компьютера: мобильная ближе к тому, что видят посетители.

В Core Web Vitals отзывчивость измеряет INP, и считается он по реальным посетителям. В лаборатории никто не кликает, поэтому там смотрят TBT как косвенный признак. Связь не прямая:

• высокий TBT может не мешать людям, если в момент блокировки они ещё ничего не нажимают;
• хороший TBT не гарантирует хороший INP: тяжёлый обработчик клика по фильтру сработает уже после загрузки, и TBT его не увидит.

Практическое правило: TBT нужен, чтобы найти и проверить исправления, а итоговую оценку даёт полевой INP.

Как найти, что блокирует поток

1. Прогоните страницу в PageSpeed Insights в мобильном режиме и включите в диагностике фильтр по TBT. TBT заметно колеблется, так что сравнивайте «до» и «после» по трём-пяти прогонам, а не по одному.
2. Посмотрите пункты о времени выполнения JavaScript, работе основного потока, длинных задачах и стороннем коде. Там перечислены конкретные файлы и сколько времени они заняли.
3. Для подробностей откройте в Chrome DevTools вкладку Performance, включите замедление процессора и запишите загрузку. Длинные задачи на дорожке основного потока помечены красной штриховкой.
4. Разделите виновников на свои скрипты и сторонние. Со своими работает разработчик, по сторонним решают, нужны ли они на этой странице.

Проверяйте сайт в режиме инкогнито. Если вы вошли в админку 1С-Битрикс, на странице подгружается панель управления со своими скриптами, и замер получается хуже, чем у посетителей.

Как снизить TBT, не теряя чат и аналитику

• Убрать неиспользуемый JavaScript и загружать на странице только нужный ей код. Готовые шаблоны часто грузят везде код слайдеров, галерей и калькуляторов, которых на странице нет.
• Отложить сторонние виджеты: чат, квиз, отзывы, коллтрекинг загружать после первого действия посетителя или через несколько секунд. Сюда же относятся скрипты из системы тегов: каждый новый пиксель, добавленный без контроля, отнимает время у основного потока.
• Разбить длинные задачи на части, тяжёлые вычисления вынести из основного потока.
• Облегчить страницу: огромный DOM требует долгого расчёта стилей и вёрстки, а это тоже работа основного потока.

Вернёмся к условному расчёту. Если виджет чата загружать после первого действия посетителя, его 270 мс уходят за пределы загрузки. Остаются 130 мс от кода шаблона и 10 мс от счётчика, итого 140 мс, и страница попадает в зелёную зону. Чат при этом никуда не делся.

Атрибуты async и defer у тега script помогают не всегда. Они не дают скрипту задерживать разбор HTML, и первая отрисовка наступает раньше. Но когда скрипт всё-таки выполняется, он занимает основной поток так же, как раньше. Если файл тяжёлый, длинная задача никуда не исчезнет, она просто сдвинется по времени.

Скрипты, которые тормозят сайт, мы находим в техническом аудите, а убираем или откладываем при доработке сайта.

Чужие скрипты, время JavaScript и мобильная проверка: вопросы о TBT

Документация Lighthouse и web.dev по TBT

• Chrome for Developers: Lighthouse, «Total Blocking Time»
• web.dev: «Total Blocking Time (TBT)»
• Chrome for Developers: Lighthouse, «Performance scoring»

См. также: Core Web Vitals, PageSpeed Insights, Скорость сайта, Speed Index.