TBT свыше 300 мс на мобильных устройствах снижает конверсию в среднем на 7-12%, так как пользователь видит контент, но не может с ним взаимодействовать. В WordPress основной причиной блокировки основного потока (Main Thread) становятся тяжелые JS-скрипты плагинов, которые занимают до 70% времени выполнения CPU при загрузке.
Анатомия TBT: почему JS блокирует поток
Total Blocking Time (TBT) измеряет суммарное время, в течение которого страница не реагирует на ввод пользователя. В WordPress критической точкой становятся «длинные задачи» (Long Tasks) — любые скрипты, выполняющиеся более 50 мс. Если у вас установлены тяжелые конструкторы типа Elementor или обилие виджетов, время выполнения JS может достигать 2-4 секунд на устройствах среднего сегмента (например, Moto G4 в тестах PageSpeed).
Практический кейс: при аудите интернет-магазина на WooCommerce мы обнаружили, что скрипты чата и аналитики создавали блокировку в 800 мс. После их переноса в режим отложенного запуска TBT снизился до 150 мс, что напрямую коррелирует с улучшением Core Web Vitals для WordPress: пошаговый разбор показателей LCP, FID и CLS в контексте конверсии.
Экспертный вывод: бороться нужно не с объемом JS в килобайтах, а с временем его выполнения. Сжатие (minification) дает прирост в 2-5%, тогдая как изменение стратегии загрузки — до 80%.
Метод Defer против Async: технические различия
Многие путают атрибуты defer и async, хотя они работают по-разному. Async загружает скрипт в фоновом режиме, но исполняет его сразу по завершении загрузки, что может привести к внезапной блокировке потока в самый неудачный момент. Defer же гарантирует выполнение скрипта строго после парсинга HTML, но до события DOMContentLoaded.
- Async: подходит для независимых скриптов (рекламные пиксели, счетчики), где порядок выполнения не важен.
- Defer: идеален для функциональных скриптов темы и плагинов, которые зависят от структуры DOM.
На практике использование defer для всех второстепенных скриптов сокращает TBT на 200-400 мс на типичном сайте с 20+ плагинами. Мой опыт показывает, что слепая установка async на тяжелые библиотеки (например, Slider Revolution) часто приводит к ошибкам инициализации интерфейса.
Экспертный вывод: используйте defer для всего, что влияет на функционал страницы, и async только для внешних метрик.
Стратегия Delay JavaScript Execution: радикальный метод
Самый эффективный способ обнулить TBT — отложенное выполнение (Delay JS). Скрипты не загружаются вообще до первого взаимодействия пользователя с экраном (скролл, клик, касание). Это позволяет PageSpeed Insights фиксировать идеальный показатель интерактивности, так как основной поток свободен до момента реального действия пользователя.
Сравнение сценариев: при стандартном defer скрипты начинают работать сразу после загрузки DOM, создавая пик нагрузки. При Delay JS нагрузка распределяется: пользователь сначала видит страницу, а через 1-2 секунды (или после скролла) подгружаются тяжелые модули. В результате TBT падает с 600 мс до 0-50 мс.
Экспертный вывод: это «золотой стандарт» для WordPress. Однако будьте осторожны с критическими элементами (мобильное меню, формы захвата) — их нужно добавлять в исключения (exclusion list), иначе пользователь увидит «мертвую» кнопку в первые секунды.
Оптимизация сторонних скриптов и API
Сторонние JS-ресурсы (Google Maps, Facebook Pixel, Recaptcha) — главные «пожиратели» ресурсов. Например, стандартная загрузка Google Maps может добавить до 500 мс к TBT. Решением является замена тяжелых API на статические изображения-заглушки, которые заменяются на интерактивную карту только при наведении курсора или клике.
Пример оптимизации: замена стандартного Google Recaptcha v3 на более легкие альтернативы или загрузку через API только в момент фокуса в поле ввода сокращает время блокировки на 300-700 мс. Это критически важно, если вы проводите SEO аудит сайта: оптимизация скорости загрузки страниц для повышения конверсии с помощью Google PageSpeed Insights (для WordPress).
Экспертный вывод: любой внешний скрипт должен быть либо в defer, либо в режиме Delay. Если скрипт нельзя отложить (например, критический трекинг конверсий), минимизируйте количество событий, которые он отслеживает.
Вывод
Для радикального снижения TBT в WordPress я рекомендую связку: Defer для системных скриптов + Delay JavaScript Execution для всех сторонних сервисов и тяжелых плагинов. Избегайте простых плагинов-минификаторов, которые не умеют управлять порядком выполнения. Начинайте с анализа вкладки «Performance» в Chrome DevTools, чтобы выявить конкретные Long Tasks. Оптимальный стек инструментов сегодня — это WP Rocket или LiteSpeed Cache с настроенным списком исключений для критического JS, что позволяет удерживать TBT в зеленой зоне (до 200 мс) даже при обилии функционала.