Total Blocking Time

Total Blocking Time — это Метрика производительности, измеряющая суммарное время, в течение которого основной Поток браузера был заблокирован длинными задачами JavaScript между моментом первой отрисовки контента (FCP) и полной интерактивностью страницы (TTI). В интернет-маркетинге этот показатель является ключевым компонентом Core Web Vitals, напрямую влияющим на ранжирование сайта в поисковой выдаче Google и качество пользовательского опыта. Высокий TBT сигнализирует о «зависаниях» интерфейса, что ведет к росту отказов и падению конверсий.

Главное

Метрика рассчитывается как сумма времени всех задач, превышающих Порог 50 мс, после FCP и до TTI.
Значение менее 200 мс считается хорошим, диапазон 200–600 мс требует оптимизации, более 600 мс — критическим.
TBT заменяет устаревший показатель FID в инструментах аудита, так как легче измеряется синтетически.
Основная причина высоких значений — неэффективный или блокирующий JavaScript-код на основном потоке.

Как работает Total Blocking Time

Этот параметр вычисляется путем агрегации времени «избыточной» загрузки всех длительных задач на главном потоке выполнения. Браузер обрабатывает события ввода пользователя только тогда, когда код JavaScript завершен; если Скрипт выполняется дольше 50 миллисекунд, он блокирует интерфейс. Значение сверх этого порога добавляется к общему итогу Метрики. Например, задача длительностью 150 мс внесет вклад в размере 100 мс (150 минус 50) в общий Счетчик. Отсчет начинается сразу после того, как Пользователь видит первый Контент (FCP), и прекращается, когда Страница становится полностью отзывчивой (TTI).

Зачем нужен Total Blocking Time

Этот инструмент необходим для объективной оценки отзывчивости Веб-интерфейса в контролируемых лабораторных условиях, где невозможно эмулировать реальные действия тысяч пользователей. Маркетологи используют его для прогнозирования влияния скорости на бизнес-показатели: медленная Реакция кнопок и форм увеличивает вероятность отказа посетителя. Разработчики применяют данные для выявления конкретных скриптов, вызывающих зависания, и приоритизации работ по их декомпозиции или асинхронной загрузке. Без этой Метрики сложно количественно оценить ущерб, наносимый сложной логикой фронтенда базовой навигации.

Какие бывают виды Total Blocking Time

В практике Веб-разработки различают два основных подхода к измерению показателя: лабораторный (синтетический) и полевой (Реальный трафик). Лабораторный вариант рассчитывается инструментами вроде Lighthouse на эмулируемом устройстве с заданной скоростью процессора, обеспечивая воспроизводимость тестов. Полевой анализ невозможен напрямую через стандартные API браузера, поэтому маркетологи часто используют косвенные данные из Chrome User Experience Report (CrUX) или PageSpeed Insights, которые агрегируют реальные ощущения пользователей. Также показатели могут сегментироваться по типам устройств, поскольку мобильные процессоры чаще становятся узким местом при тяжелых вычислениях.

Где используется Total Blocking Time

Показатель активно применяется в SEO-аудитах и системах мониторинга производительности, таких как Google Search Console и PageSpeed Insights. Поскольку Google учитывает Core Web Vitals как Фактор ранжирования, высокие значения этого параметра могут снижать позиции сайта в органической выдаче. Разработчики используют данные для настройки Code Splitting и ленивой загрузки ресурсов, чтобы разбить тяжелые пакеты кода на более мелкие фрагменты. Кроме того, Метрика включается в технические отчеты для заказчиков, демонстрируя Прогресс в улучшении качества продукта перед релизом новых функций.

Пример: установка и чтение Total Blocking Time

Для получения точных данных о блокировке потока необходимо использовать инструменты Chrome DevTools, конкретно вкладку Performance. При записи профиля страницы можно увидеть временную шкалу, где задачи, превышающие Порог 50 мс, подсвечиваются красным цветом. Ниже приведен пример конфигурации запуска профилировщика через командную строку Node.js, которая позволяет автоматизировать сбор метрик в CI/CD пайплайне.

JavaScript

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

// Запуск аудита производительности
const options = {
  formFactor: 'mobile',
  throttling: { cpuSlowdownMultiplier: 4 }
};

const result = await lighthouse('https://example.com', options);
const tbt = result.audits.'total-blocking-time'.displayValue;
console.log(`TBT: ${tbt} ms`);

Для минимизации влияния на метрику используйте атрибут defer или async для внешних скриптов, чтобы не блокировать парсинг HTML-документа браузером.

Часто задаваемые вопросы Total Blocking Time

Часто задаваемые вопросы

Чем TBT отличается от First Input Delay?

FID измеряет реальную задержку реакции на первое действие пользователя, но его сложно собрать в лабораторных условиях. TBT является прокси-метрикой, которая оценивает потенциальную блокировку потока на основе длительности всех задач после FCP, что делает её более стабильной для синтетического тестирования.

Что считается длинной задачей?

Любая задача JavaScript, выполняющаяся на основном потоке дольше 50 миллисекунд, классифицируется как длинная. Время, превышающее этот порог, суммируется для формирования итогового значения метрики.

Как снизить значение метрики?

Необходимо разбивать тяжелые функции на более мелкие части с помощью requestAnimationFrame или setTimeout, использовать Web Workers для фоновых вычислений и удалять неиспользуемый код (tree-shaking).

Влияет ли TBT на SEO?

Да, поскольку показатель входит в набор Core Web Vitals, Google использует его как сигнал качества страницы. Сайты с высоким TBT могут занимать более низкие позиции в результатах поиска по сравнению с конкурентами.

Итоги

Total Blocking Time служит критическим индикатором отзывчивости интерфейса, фиксируя время потери контроля над браузером пользователем.

Метрика суммирует избыточное время задач свыше 50 мс в период между FCP и TTI.
Она заменила FID в качестве стандарта оценки интерактивности в лабораторных тестах.
Хорошим результатом считается значение менее 200 миллисекунд.
Оптимизация включает внедрение асинхронной загрузки скриптов и использование воркеров.
Высокие показатели негативно сказываются на удержании аудитории и позициях в поиске.
Инструменты вроде Lighthouse позволяют автоматически выявлять проблемные участки кода.