TBT

Как работает

Всё, что делает JavaScript на странице, выполняется в главном потоке браузера — там же, где обрабатываются клики и отрисовка. Пока поток занят, страница не реагирует на действия пользователя. Задачу дольше 50 мс браузер считает длинной. Total Blocking Time складывает только «лишнюю» часть каждой длинной задачи — всё, что сверх 50 мс:

Задача 1:  70 мс  → блокировка 20 мс
Задача 2:  40 мс  → блокировка  0 мс (короче порога)
Задача 3: 150 мс  → блокировка 100 мс
--------------------------------------
TBT = 120 мс

TBT считают в отрезке между первой отрисовкой контента (FCP) и моментом, когда страница становится стабильно интерактивной. Для мобильной проверки в Lighthouse хорошим считается TBT до 200 мс. В оценке производительности Lighthouse у TBT один из самых больших весов, и тяжёлый JavaScript заметнее всего снижает итоговый балл.

Почему важно для SEO

TBT не входит в Core Web Vitals и не учитывается в ранжировании напрямую: это лабораторная метрика, у реальных пользователей её не собирают. Её роль — заранее показать проблему, которая в поле проявится как плохой INP. INP измеряет задержку реальных взаимодействий за весь визит, TBT — блокировку потока только во время загрузки в тестовых условиях. Высокий TBT обычно предупреждает, что и с INP будут проблемы. Низкий TBT хорошего INP не гарантирует: тяжёлый обработчик клика на фильтре в каталоге TBT не заметит.

Главные источники блокировки — большие бандлы JavaScript, которые парсятся и выполняются целиком, гидрация фреймворка, сторонние скрипты аналитики, чатов и рекламы.

Частые ошибки

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

Как проверить

TBT показывают Lighthouse во вкладке DevTools и лабораторная часть PageSpeed Insights. Конкретные длинные задачи видно во вкладке Performance в DevTools: они помечены красным уголком, а по клику видно, какой скрипт их запустил.

Чтобы снизить TBT, сначала уберите лишнее: неиспользуемый код и скрипты, без которых страница работает. Оставшееся откладывайте и дробите. Сторонние скрипты подключайте с defer или async, а длинную обработку разбивайте на части, давая браузеру паузу:

async function processAll(items) {
  for (let i = 0; i < items.length; i++) {
    handle(items[i]);
    if (i % 50 === 49) {
      await new Promise((r) => setTimeout(r, 0)); // отдаём поток браузеру
    }
  }
}

Вывод

TBT показывает, насколько JavaScript занимает браузер при загрузке. Держите его в пределах 200 мс на мобильной проверке, режьте и откладывайте скрипты, а результат сверяйте с полевым INP — именно его учитывает Google.