Total Blocking Time

Total Blocking Time (TBT) — это один из ключевых показателей производительности веб-страницы, оцениваемый инструментом Lighthouse. Он измеряет суммарное время, в течение которого основной поток страницы был заблокирован настолько, что пользователь не мог взаимодействовать с интерфейсом. TBT напрямую влияет на воспринимаемую отзывчивость страницы и является критическим параметром для оценки UX.

Определение и измерение TBT

TBT вычисляется как сумма всех промежутков между событиями First Contentful Paint (FCP) и Time to Interactive (TTI), когда задачи в основном потоке превышают 50 миллисекунд. Каждая задача, длительность которой больше 50 мс, считается блокирующей, а излишек времени (длительность задачи минус 50 мс) добавляется к TBT.

Пример расчёта:

  • Задача 1: 70 мс → блокирующее время = 70 - 50 = 20 мс
  • Задача 2: 100 мс → блокирующее время = 100 - 50 = 50 мс
  • Задача 3: 30 мс → блокирующее время = 0 мс

TBT = 20 + 50 + 0 = 70 мс

Влияние на производительность

TBT тесно связан с Time to Interactive (TTI). Длительные задачи блокируют главный поток, что препятствует обработке пользовательских событий, таких как клики, скроллинг или ввод текста. Высокий TBT сигнализирует о том, что страница может быть визуально готова к отображению, но остаётся «неотзывчивой» для пользователя.

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

Основные причины высокого TBT

  1. Длинные JavaScript-операции Большие блоки кода или вычислительно тяжёлые функции выполняются в основном потоке, блокируя обработку событий.

  2. Синхронная загрузка скриптов Скрипты, подключённые без атрибутов async или defer, останавливают рендеринг и блокируют основной поток.

  3. Непроизводительные сторонние библиотеки Рекламные сети, виджеты или аналитика могут добавлять тяжёлые задачи, которые не оптимизированы для асинхронного исполнения.

  4. Манипуляции с DOM Частые или массивные изменения DOM вызывают перерасчёт стилей и повторный рендер, увеличивая нагрузку на поток.

Способы снижения TBT

  1. Разделение кода (Code Splitting) Разбивка больших скриптов на модули позволяет загружать и выполнять только необходимые части, уменьшая длительность задач.

  2. Асинхронная загрузка JavaScript Использование async и defer минимизирует блокировку рендеринга и позволяет выполнять скрипты после отображения контента.

  3. Оптимизация вычислений Перенос тяжёлых операций в Web Workers или использование requestIdleCallback снижает нагрузку на основной поток.

  4. Минимизация и упаковка скриптов Сжатие кода уменьшает количество байт и ускоряет парсинг, снижая время выполнения задач.

  5. Избегание лишних рендеров и Reflow Использование виртуальных DOM-структур, batch-операций и CSS-анимаций вместо JavaScript-анимаций помогает уменьшить блокирующие операции.

Практический пример анализа TBT с Lighthouse

Запуск Lighthouse в Chrome DevTools позволяет получить детальный отчёт о TBT и связанных с ним задачах. В разделе Opportunities отображаются скрипты, которые блокируют поток, а вкладка Diagnostics показывает задачи с длительностью больше 50 мс.

Типичный подход к исправлению:

  • Определить скрипты, вызывающие длинные задачи.
  • Перенести вычисления в Web Worker.
  • Заменить синхронные сетевые запросы на асинхронные.
  • Использовать ленивую загрузку компонентов, которые не критичны для первичного рендеринга.

Метрики, связанные с TBT

  • First Input Delay (FID): TBT коррелирует с FID, так как блокирующие задачи увеличивают задержку реакции на ввод пользователя.
  • Time to Interactive (TTI): Высокий TBT замедляет достижение состояния полной интерактивности страницы.
  • Long Tasks: В Lighthouse отдельные задачи длительностью >50 мс отображаются как Long Tasks, которые прямо влияют на TBT.

Итоговая формула TBT

TBT = Σ (длительность задач - 50 мс), для всех задач с длительностью > 50 мс между FCP и TTI

TBT является одним из самых точных индикаторов отзывчивости страницы и требует системного подхода к оптимизации фронтенд-кода. Оптимизация TBT напрямую повышает пользовательский опыт и улучшает показатели Core Web Vitals.

Оглавление