Что означает эта проблема
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 только если нужен опциональный разбор одной находки.
Как проверить исправление
После 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. |
Частые вопросы
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 создаёт rule-based developer-ready task из данных отчёта без AI-кредитов.