TBT
Total Blocking Time (TBT) - это важная лабораторная метрика, которая измеряет общее время в миллисекундах, в течение которого основной поток браузера был заблокирован выполнением длительных задач и не мог реагировать на действия пользователя в период между первой отрисовкой контента (First Contentful Paint, FCP) и моментом, когда страница становится полностью интерактивной (Time to Interactive, TTI).
В отличие от полевой метрики INP, TBT предназначена для диагностики и воспроизводится в контролируемой лабораторной среде, например, в Lighthouse или WebPageTest.
Как рассчитывается TBT
[править]Основой для TBT являются «длинные задачи» (Long Tasks). Любая задача на главном потоке, которая выполняется дольше 50 миллисекунд, считается длинной.
Формула проста: Для каждой длинной задачи, время её выполнения, превышающее 50 мс, суммируется. Полученная сумма и есть TBT.
Пример расчёта: Предположим, в критический период после FCP выполнились три задачи:
- Задача A: 90 мс (превышение = 90 - 50 = 40 мс)
- Задача B: 250 мс (превышение = 250 - 50 = 200 мс)
- Задача C: 40 мс (не превышает 50 мс, не считается блокирующей)
TBT = 40 мс + 200 мс = 240 мс.
Почему TBT важен
[править]Высокий TBT означает, что страница, даже если она визуально загрузилась, долгое время остаётся «замороженной» и не реагирует на клики, нажатия клавиш или касания экрана. Это напрямую ухудшает восприятие пользователя и увеличивает вероятность того, что он закроет вкладку.
Для SEO TBT критичен, так как он является основным прокси-метрикой для полевого показателя INP и составляет 30% от общей оценки производительности в Lighthouse.
Основные причины высокого TBT
[править]- Большое количество неоптимизированного JavaScript, который загружается и выполняется синхронно.
- Тяжёлые сторонние скрипты (чат-боты, пиксели трекинга, виджеты).
- Неэффективный код фреймворков или библиотек.
- Сложные вычисления, выполняемые на стороне клиента.
Как снизить TBT
[править]Оптимизация TBT - это, по сути, оптимизация главного потока.
- Разделение кода (Code Splitting): Загружать только тот JavaScript, который необходим для текущей страницы.
- Удаление неиспользуемого кода: Анализировать бандл с помощью инструментов вроде Webpack Bundle Analyzer и удалять «мёртвый» код и неиспользуемые библиотеки.
- Оптимизация сторонних скриптов: Загружать их с атрибутами async или defer, а ещё лучше - отложить их загрузку до полной загрузки основного контента страницы.
- Разбиение длинных задач: Искусственно разбивать тяжёлые синхронные операции на более мелкие асинхронные части, используя, например, setTimeout или scheduler.yield(), чтобы дать браузеру возможность отреагировать на действия пользователя между ними.
Целевые значения
[править]- Хорошо: Менее 150 мс (для мобильных устройств)
- Требует улучшения: 150-350 мс
- Плохо: Более 350 мс.
