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

Отложенная загрузка JavaScript-скриптов (defer или async) — важный приём оптимизации производительности сайта на WordPress. Она позволяет улучшить скорость загрузки страниц и повысить оценку в Google PageSpeed и других сервисах, что положительно влияет на SEO и пользовательский опыт.

Зачем нужна отложенная загрузка скриптов в WordPress

По умолчанию WordPress загружает скрипты синхронно, то есть браузер останавливает обработку HTML, пока не загрузит и не выполнит скрипт. Это может замедлять отображение контента, особенно если на сайте много JavaScript-плагинов.

Отложенная загрузка позволяет браузеру сначала отрисовать HTML и CSS, а выполнение скриптов происходит после загрузки страницы или в фоновом режиме. В результате страница становится быстрее и отзывчивее.

Есть два основных атрибута для отложенной загрузки:

• defer — скрипты выполняются после полной загрузки HTML, сохраняют порядок выполнения.
• async — скрипты выполняются сразу после загрузки, порядок не гарантируется.

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

WordPress использует функцию wp_enqueue_script для подключения скриптов. Начиная с версии 5.7 появилась возможность добавлять атрибуты defer и async через фильтры.

Рассмотрим пример, как добавить атрибут defer для определённого скрипта:

function wpqa_defer_script( $tag, $handle, $src ) {
    // Укажите хендлы скриптов, для которых нужен defer
    $defer_scripts = array('wp-embed', 'my-custom-script');

    if ( in_array( $handle, $defer_scripts ) ) {
        // Добавляем defer
        return str_replace( ' src', ' defer src', $tag );
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'wpqa_defer_script', 10, 3 );

В этом примере мы фильтруем HTML-тег скрипта и добавляем атрибут defer только для скриптов с хендлами wp-embed и my-custom-script. Для остальных скриптов тег остаётся без изменений.

Если вы хотите добавить async, замените строку на return str_replace( ' src', ' async src', $tag );.

Автоматический defer для всех скриптов, кроме jQuery

Часто полезно применить defer ко всем скриптам, кроме jQuery, чтобы избежать проблем с зависимостями:

function wpqa_defer_all_scripts_except_jquery( $tag, $handle, $src ) {
    if ( 'jquery-core' !== $handle && 'jquery-migrate' !== $handle ) {
        return str_replace( ' src', ' defer src', $tag );
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'wpqa_defer_all_scripts_except_jquery', 10, 3 );

Использование плагинов для отложенной загрузки скриптов

Если не хочется править код, есть несколько популярных плагинов, которые позволяют отложить загрузку JS автоматически:

• Clearfy Pro (https://wpshop.ru/plugins/clearfy-pro/?utm_source=wpqa.ru&utm_medium=article&utm_campaign=kak-sdelat-otlozhennuyu-zagruzku-dlya-scriptov-v-wordpress) — мощный плагин оптимизации с функцией отложенной загрузки скриптов и стилей. Позволяет гибко настраивать исключения и порядок загрузки.
• Async JavaScript — бесплатный плагин, который добавляет async или defer ко всем скриптам, можно настраивать исключения.
• WP Rocket — коммерческий плагин кеширования с функцией отложенной загрузки JS, отлично подходит для комплексной оптимизации.

Проблемы и особенности отложенной загрузки скриптов

При использовании defer и async важно помнить об особенностях JavaScript:

• Скрипты с defer выполняются в том порядке, в котором они подключены, после загрузки HTML.
• Скрипты с async выполняются сразу после загрузки, порядок не гарантируется, что может вызвать ошибки, если есть зависимости.
• Некоторые скрипты, например jQuery, должны загружаться синхронно, иначе может сломаться работа плагинов.
• Если скрипты изменяют DOM сразу при загрузке, defer может повлиять на отображение сайта.

Поэтому обязательно тестируйте сайт после внедрения отложенной загрузки. Для сложных проектов можно применять комбинированный подход: defer для большинства скриптов и исключения для ключевых библиотек.

Отложенная загрузка для плагина WPGPT

Если на сайте используется плагин WPGPT, можно добавить для его скриптов defer следующим образом:

function wpqa_defer_wpgpt_scripts( $tag, $handle, $src ) {
    if ( strpos( $handle, 'wpgpt' ) !== false ) {
        return str_replace( ' src', ' defer src', $tag );
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'wpqa_defer_wpgpt_scripts', 10, 3 );

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

Советы по тестированию и отладке

Для проверки эффективности отложенной загрузки используйте инструменты:

• Google PageSpeed Insights — покажет, какие скрипты блокируют рендеринг.
• Chrome DevTools (Network и Performance) — позволит увидеть порядок загрузки и время выполнения скриптов.
• Проверка консоли браузера — убедитесь, что нет ошибок JavaScript после изменений.

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