Как отложить загрузку требующих ресурсов в WordPress для ускорения сайта

Одной из важных задач оптимизации скорости сайта на WordPress является правильное управление загрузкой тяжелых ресурсов: скриптов, стилей, веб-шрифтов. Часто эти ресурсы блокируют отображение контента и увеличивают время загрузки страницы, что негативно влияет на UX и показатели Core Web Vitals.

Почему важно отложить загрузку тяжелых ресурсов

Браузер по умолчанию загружает и выполняет все подключенные CSS и JS в порядке, предусмотренном темой и плагинами. Если скрипты или стили большие или загружаются с внешних источников, они могут блокировать отрисовку страницы. Это приводит к тому, что пользователь видит пустой экран дольше, чем нужно.

Отложенная загрузка (defer, async, lazy load) позволяет загружать такие ресурсы после основного контента, чтобы страница стала интерактивной быстрее, а загрузка скриптов и стилей не мешала первому отображению.

Кроме того, оптимизированная загрузка снижает нагрузку на сервер и уменьшает количество одновременных запросов, что особенно важно на слабых хостингах.

Как отложить загрузку JS и CSS в WordPress средствами кода

Для управления загрузкой ресурсов в WordPress используется функция wp_enqueue_script и wp_enqueue_style. Чтобы отложить выполнение JavaScript, можно использовать параметры defer и async. Однако штатных опций в WordPress для этого нет, поэтому добавим их через фильтры.

Пример функции для добавления атрибута defer к нужным скриптам:

function wpspeed_add_defer_attribute($tag, $handle) {
    // Список скриптов, которым нужен defer
    $defer_scripts = ['example-script', 'jquery-core'];
    if (in_array($handle, $defer_scripts)) {
        return str_replace(' src', ' defer src', $tag);
    }
    return $tag;
}
add_filter('script_loader_tag', 'wpspeed_add_defer_attribute', 10, 2);

Так мы указываем браузеру не блокировать отрисовку, а запустить скрипт после загрузки страницы.

Для CSS отложить загрузку сложнее, поскольку браузеры блокируют отрисовку, пока не загрузится CSS. Однако можно использовать технику media="print" и переключать на media="all" после загрузки окна:

function wpspeed_defer_css($html, $handle) {
    $defer_styles = ['example-style'];
    if (in_array($handle, $defer_styles)) {
        $html = str_replace("media='all'", "media='print' onload=\"this.media='all'\"", $html);
    }
    return $html;
}
add_filter('style_loader_tag', 'wpspeed_defer_css', 10, 2);

Отложенная загрузка веб-шрифтов в WordPress

Шрифты часто загружаются с внешних сервисов (Google Fonts и др.) и замедляют первую отрисовку текста (FOIT/FOUT). Чтобы избежать этого, применяют разные техники:

• Подключение шрифтов через preload и font-display: swap; для ускорения их загрузки и предотвращения блокировки.
• Отложенная загрузка шрифтов через JavaScript после загрузки основного контента.
• Использование плагинов, которые оптимизируют загрузку шрифтов.

Пример добавления font-display: swap; для Google Fonts через фильтр style_loader_tag:

function wpspeed_add_font_display_swap($html, $handle) {
    if (strpos($html, 'fonts.googleapis.com') !== false) {
        $html = str_replace("rel='stylesheet'", "rel='stylesheet' media='print' onload=\"this.media='all'\"", $html);
    }
    return $html;
}
add_filter('style_loader_tag', 'wpspeed_add_font_display_swap', 10, 2);

Плагины для отложенной загрузки ресурсов в WordPress

Если хочется готовое решение, стоит обратить внимание на эти популярные плагины:

• Clearfy Pro — многофункциональный плагин для оптимизации, включая управление загрузкой скриптов и стилей. Позволяет выборочно отключать или отложить ресурсы, снижая нагрузку и ускоряя загрузку.
• WP Rocket — платный, но один из лучших плагинов кэширования с возможностью отложенной загрузки JS, оптимизации CSS и шрифтов.
• Async JavaScript — плагин для простого добавления атрибутов async и defer для скриптов.

Рекомендуется тестировать влияние каждого плагина на свой сайт, чтобы избежать конфликтов и ошибок.

Как проверить эффективность отложенной загрузки

После внедрения отложенной загрузки ресурсов важно провести тесты:

• PageSpeed Insights — покажет, ушли ли блокирующие ресурсы и улучшился ли показатель «Speed Index».
• WebPageTest — детально показывает цепочку загрузки и время блокировки.
• Chrome DevTools — во вкладке Network можно увидеть, когда и как загружаются скрипты и стили.

Если вы видите, что основные ресурсы загружаются быстрее и страница становится интерактивной раньше, значит оптимизация сработала.

Советы для эффективной отложенной загрузки на WordPress

Чтобы получить максимальный эффект, придерживайтесь таких рекомендаций:

• Отложите только тяжелые и не критичные скрипты. Критичные — например, скрипты каруселей, навигации, лучше загружать сразу.
• Проверяйте, чтобы deferred скрипты не ломали функциональность сайта — иногда порядок загрузки важен.
• Используйте системный кэш и CDN — это ускорит загрузку ресурсов дополнительно.
• Собирайте и минимизируйте CSS и JS, чтобы уменьшить количество файлов.
• Используйте плагины типа Clearfy Pro для комплексной оптимизации загрузки.

Применение отложенной загрузки — это важный шаг к ускорению WordPress и улучшению пользовательского опыта. С помощью рассмотренных примеров кода и плагинов вы сможете реализовать гибкую и эффективную оптимизацию ресурсов на сайте.