Что означает эта проблема
TBT показывает работу, которая держит браузер занятым вместо быстрого paint и response.
Как уменьшить Total Blocking Time и диагностировать отзывчивость
Найдите JavaScript и main-thread work, из-за которых страница медленно реагирует во время загрузки.
Короткий ответ
Total Blocking Time — лабораторная метрика, показывающая блокировку main thread во время загрузки. INP — Core Web Vitals метрика отзывчивости, и это не то же самое. Но высокий TBT помогает найти JavaScript и long tasks, которые могут ухудшать responsiveness.
Почему это важно
Блокировка main thread делает страницу «зависшей»
Даже при видимом контенте пользователь может ждать реакции, если скрипты заняли браузер.
Как помогает ViewMend
Запустите проверку публичной страницы, изучите evidence, посмотрите приоритет проблемы и используйте ViewMend AI только если нужно объяснение, задача для разработчика или AI Fix Plan.
Как проверить исправление
После JS-изменений сравните TBT, long-task evidence и third-party findings.
Частые причины
TBT чаще всего связан с JavaScript
- Большие JS bundles.
- Hydration long tasks.
- Тяжёлые third-party scripts.
- Дорогие event handlers.
- Client-side rendering до interaction.
Что проверить сначала
Сначала найдите long tasks и лишние scripts
- Проверьте unused JavaScript.
- Найдите дорогие third-party scripts.
- Посмотрите hydration и bundle size.
- Проверьте long main-thread tasks.
- Особенно смотрите mobile.
Как исправить
Дайте браузеру время отвечать
- Разделите JS bundles.
- Отложите некритичные scripts.
- Lazy load features below the fold.
- Сократите hydration cost.
- Удалите или delay low-value third-party tags.
Как проверить исправление
Проверьте TBT и responsiveness evidence
После JS-изменений сравните TBT, long-task evidence и third-party findings.
Как это работает
Диагностика через свежий отчёт
- Введите URL публичной страницы.
- Запустите проверку производительности для mobile и desktop.
- Изучите метрику, скриншоты и технические данные по проблеме.
- Проверьте связанные проблемы, которые могут усиливать эффект.
- Создайте AI-объяснение или задачу только если это действительно нужно.
- После исправления запустите новую проверку и сравните отчёты.
Рабочий процесс
Проверьте страницу до догадок
ViewMend помогает проверить реальную публичную страницу, сравнить mobile и desktop evidence и решить, нужен ли AI-вывод.
Пример задачи для разработчика
Пример задачи для TBT
Разделить JavaScript bundles и уменьшить long main-thread tasks, чтобы браузер быстрее реагировал во время загрузки.
| Проблема | TBT показывает работу, которая держит браузер занятым вместо быстрого paint и response. |
|---|---|
| Предлагаемое исправление | Разделить JavaScript bundles и уменьшить long main-thread tasks, чтобы браузер быстрее реагировал во время загрузки. |
| Критерии приёмки | Новая лабораторная проверка показывает улучшение затронутой метрики, критичное поведение на mobile и desktop не сломано, а страница по-прежнему корректно отображается. |
| Повторная проверка | После JS-изменений сравните TBT, long-task evidence и third-party findings. |
Приоритеты исправлений
Проверки responsiveness
| Что проверить | Почему это важно | Следующее действие |
|---|---|---|
| Long tasks | Они блокируют main thread. | Разбить работу и отложить некритичную логику. |
| Unused JavaScript | Код всё равно скачивается и компилируется. | Удалить, split или lazy load bundles. |
| Third-party scripts | External tags конкурируют за main thread. | Delay, remove или load after consent. |
FAQ
Частые вопросы
TBT — это то же самое, что INP?
Нет. TBT — lab metric про blocking during load, INP — Core Web Vitals responsiveness metric.
Что вызывает высокий TBT?
Heavy JavaScript, hydration, long tasks и дорогой third-party code.
Как JavaScript влияет на responsiveness?
JavaScript работает на main thread и может задерживать реакцию браузера.
Нужно удалить все third-party scripts?
Нет. Нужно оценить ценность и стоимость, затем отложить или удалить низкоценные.
ViewMend может создать задачу по TBT?
Да, ViewMend AI создаёт developer-ready task по явному запросу.