TBT (Total Blocking Time) — важный показатель Core Web Vitals, особенно для сайтов на WordPress, где каждый плагин может добавлять десятки запросов. Этот показатель отражает, сколько времени главный поток браузера был заблокирован выполнением JavaScript, не давая странице реагировать на действия пользователя.
WordPress часто грузит:
jQuery, даже если он не используется;defer или async;<head>, которые блокируют отрисовку страницы.Мы добавляем defer ко всем скриптам, кроме:
jquery и jquery-core — их часто используют другие скрипты, и они должны загружаться синхронно;is_admin()), чтобы не нарушить работу интерфейса администратора.Код:
add_filter('script_loader_tag', function ($tag, $handle) {
// Не добавляем defer к jQuery
if (in_array($handle, ['jquery', 'jquery-core'])) return $tag;
// Не добавляем defer в админке
if (is_admin()) return $tag;
// Добавляем defer ко всем остальным
return str_replace(' src', ' defer src', $tag);
}, 10, 2);Это откладывает выполнение скриптов до полной загрузки DOM и уменьшает блокировку основного потока.
Стили блокируют отрисовку страницы, если загружаются синхронно. Для второстепенных CSS (например, библиотек) можно применить media="print" и onload, чтобы отложить их:
// Оптимизация CSS: отложенная загрузка неключевых стилей
add_filter('style_loader_tag', function($tag, $handle) {
// Массив стилей, которые можно загружать с отложенной активацией
$defer_styles = ['swiper', 'fancybox'];
// Если текущий стиль есть в списке, применяем отложенную загрузку
if (in_array($handle, $defer_styles)) {
// Заменяем media="all" на media="print" и активируем стиль через onload
return str_replace("media='all'", "media='print' onload=\"this.media='all'\"", $tag);
}
// Для всех остальных стилей возвращаем оригинальный тег без изменений
return $tag;
}, 10, 2);
Так стили подключаются не сразу, а после загрузки страницы. Это снижает TBT.
style.css, base.css, adaptive.css?Потому что:
Если отложить их загрузку — пользователь увидит «голую» страницу без стилей, а иногда и с «прыгающим» контентом. Это ухудшает CLS (Cumulative Layout Shift) и UX.
Почему мы не трогаем style.css, base.css, adaptive.css?
Сайт: superceilings.ru
Задача: оптимизация показателя TBT (Total Blocking Time)
Результат:
До оптимизации:
Общая длительность загрузки всех стилей и скриптов до начала отрисовки страницы составляла 7 740 мс.
По оценке Google, потенциал сокращения блокирующих запросов — не менее 1 540 мс.
После оптимизации:
Удалось сократить длительность до 900 мс, а возможная экономия теперь составляет всего 80 мс.
Это стало возможным благодаря:
defer к неключевым скриптам;swiper, fancybox);style.css, base.css, adaptive.css) для сохранения корректной отрисовки.Итог: снижение TBT в 8,5 раза и полное устранение блокирующих загрузку скриптов.
Сайт стал быстрее реагировать на действия пользователя, что положительно скажется на UX и позициях в поиске.
На WordPress оптимизация TBT требует точечного подхода:
defer и async только для JS, не критичных для первого рендера.style.css, base.css, adaptive.css.Низкий TBT — важный показатель для оценки скорости сайта и удобства взаимодействия.
Но при оптимизации не всегда имеет смысл гнаться за минимальными значениями: если отложенная загрузка критичных стилей приводит к «голой» странице или визуальным сбоям — это наносит больший вред, чем высокая метрика.
Оптимизировать нужно осознанно:
P.S.: Текст оформлен при помощи нейросети. Авторский опыт, выводы и позиция — личные.