Total Blocking Time — это лабораторный показатель отзывчивости, который измеряет, как долго главный поток браузера был занят и не мог обработать действия пользователя. Отсчёт идёт в окне между First Contentful Paint и Time to Interactive, а суммируются не сами задачи, а их части сверх порога в 50 мс.
Метрика собирается в синтетических условиях: Lighthouse, PageSpeed Insights, DevTools. Норма для мобильной эмуляции — TBT ≤ 200 мс в зоне Хорошо, 200–600 мс требует внимания, свыше 600 мс — плохо. Причина высоких значений почти всегда одна — длинные задачи JavaScript, которые держат поток дольше 50 мс.
§ 01Что показывает
Время блокировки главного потока отражает, сколько миллисекунд страница физически не реагировала на клик, тап или ввод с клавиатуры. Пока поток занят разбором и исполнением скрипта, браузер откладывает обработку событий. Показатель считает только тот отрезок, что превышает 50 мс: задача на 120 мс добавляет 70 мс, задача на 45 мс — ноль. Так метрика отделяет короткие безопасные операции от тех, что реально ощущаются как зависание.
§ 02Как считается
Суммарная задержка потока складывается из блокирующих частей всех long tasks в измеряемом окне. Long task — задача дольше 50 мс. Из каждой вычитается 50 мс, остаток идёт в сумму. Пример: три задачи по 70, 90 и 200 мс дают 20 + 40 + 150 = 210 мс. Окно замера начинается на FCP и заканчивается на TTI, поэтому скрипты, отработавшие до первой отрисовки, в расчёт не попадают.
TBT 620 → 180 мс — Интернет-магазин косметики на Shopify вынес сторонние скрипты чата и аналитики в отложенную загрузку через defer и facade-паттерн. TBT снизился с 620 до 180 мс за 5 недель. Замер через Lighthouse и PSI на CrUX-75th, отказы упали на 11%.
TBT 480 → 150 мс — B2B SaaS-дашборд на React с MRR $250k разбил тяжёлый JS-бандл через code-splitting и убрал long tasks длиннее 50 мс. TBT упал с 480 до 150 мс за 8 недель. Динамика по WebPageTest и полю CrUX, INP вышел в зелёную зону.
§ 03Как измерить
Лабораторный показатель отзывчивости доступен в отчёте Lighthouse — вкладка Performance, блок метрик. То же значение выдаёт PageSpeed Insights в разделе лабораторных данных. Для разбора по задачам подойдёт панель Performance в DevTools: длинные задачи помечены красным треугольником. Важно: в полевых данных CrUX этой метрики нет — вместо неё пользовательский отклик оценивает INP. С чего начать: прогнать URL через PageSpeed Insights на мобильном профиле.
§ 04Что делать с плохим значением
Значение выше 600 мс лечится разбивкой длинных задач JavaScript. Рабочие приёмы:
- разделять тяжёлые функции через
setTimeoutилиrequestIdleCallback; - откладывать сторонние скрипты аналитики и виджетов атрибутами
deferиasync; - убирать неиспользуемый JS и дробить бандл на чанки;
- переносить вычисления в Web Worker, освобождая главный поток.
Метрика напрямую связана с INP: сокращая блокировку в лаборатории, снижаешь задержку отклика у реальных пользователей.