Оптимизация загрузки скриптов WordPress: отложенная и асинхронная загрузка

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

Почему важно оптимизировать загрузку скриптов WordPress

Когда браузер встречает тег <script> без атрибутов async или defer, он блокирует построение DOM, чтобы загрузить и выполнить скрипт. Это приводит к задержкам в отображении контента.

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

В WordPress многие скрипты подключаются через wp_enqueue_script без этих атрибутов, что негативно влияет на производительность.

Разница между defer и async

Async — скрипт загружается параллельно с HTML и выполняется сразу после загрузки. Порядок выполнения скриптов с async не гарантируется, поэтому этот метод подходит для независимых скриптов.

Defer — скрипт загружается параллельно, но выполняется только после полной загрузки HTML-документа, причём порядок сохранён. Хорошо подходит для скриптов, зависящих от DOM, и когда важен порядок выполнения.

Как добавить атрибут defer или async к скриптам в WordPress

WordPress по умолчанию не предоставляет параметров для установки этих атрибутов в wp_enqueue_script. Но можно использовать фильтр script_loader_tag, чтобы модифицировать теги скриптов.

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

add_filter('script_loader_tag', 'wpmoney_defer_scripts', 10, 3);
function wpmoney_defer_scripts($tag, $handle, $src) {
    // Перечислите здесь хэндлы скриптов, к которым хотим добавить defer
    $defer_scripts = array('jquery-core', 'wpmoney-custom-script');

    if (in_array($handle, $defer_scripts)) {
        return '<script src="' . esc_url($src) . '" defer></script>';
    }

    return $tag;
}

В этом примере мы добавляем defer к скриптам с хэндлами jquery-core и wpmoney-custom-script. Аналогично можно добавить async, заменив defer на async в теге.

Отложенная загрузка скриптов с помощью плагинов

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

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

Учет зависимостей скриптов при использовании defer и async

Очень важно учитывать зависимости. Если скрипт зависит от другого (например, плагин требует jQuery), то async может нарушить порядок выполнения, что приведёт к ошибкам.

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

Для проверки зависимостей в WordPress используйте функцию wp_script_is( 'handle', 'enqueued' ) и внимательно тестируйте изменение загрузки скриптов.

Пример комплексной функции для управления defer и async

add_filter('script_loader_tag', 'wpmoney_optimize_script_loading', 10, 3);
function wpmoney_optimize_script_loading($tag, $handle, $src) {
    // Скрипты для defer
    $defer_scripts = array('jquery-core', 'wpmoney-custom-script');
    // Скрипты для async
    $async_scripts = array('some-independent-lib');

    if (in_array($handle, $defer_scripts)) {
        return '<script src="' . esc_url($src) . '" defer></script>';
    } elseif (in_array($handle, $async_scripts)) {
        return '<script src="' . esc_url($src) . '" async></script>';
    }

    return $tag;
}

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

Отложенная загрузка пользовательских скриптов с помощью локального файла

Для собственных скриптов можно ещё отложить подключение, регистрируя их с параметром in_footer и используя inline-инициализацию после загрузки страницы.

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

function wpmoney_register_custom_script() {
    wp_register_script('wpmoney-delayed', get_template_directory_uri() . '/js/delayed.js', array(), null, true);
    wp_enqueue_script('wpmoney-delayed');
}
add_action('wp_enqueue_scripts', 'wpmoney_register_custom_script');

Параметр true в конце означает, что скрипт загрузится в футере, что уже улучшает скорость загрузки.

Выводы и практические советы

• Обязательно тестируйте сайт после добавления defer/async — ошибки JS могут привести к неработоспособности функционала.
• Используйте defer для скриптов с зависимостями и async для независимых.
• Для комплексной оптимизации рекомендуем плагины Clearfy Pro или WP Rocket.
• Для кастомных скриптов обязательно ставьте in_footer=true.
• Обратите внимание на совместимость с кеширующими и оптимизирующими плагинами, чтобы избежать конфликтов.

Оптимизация загрузки скриптов — один из мощных способов ускорить сайт WordPress без серьёзных изменений в коде. Используйте представленные методы и примеры для повышения скорости и улучшения пользовательского опыта.