Как добавить defer и async загрузку JS в WordPress для ускорения сайта

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

Почему важно использовать defer и async для JavaScript

По умолчанию браузеры блокируют рендеринг страницы, когда встречают тег <script> без атрибутов, загружая и выполняя скрипт сразу. Это замедляет отображение контента. Атрибуты defer и async позволяют загружать скрипты асинхронно, не блокируя рендеринг:

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

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

Как добавить defer и async в WordPress через wp_enqueue_script

Стандартный способ подключения скриптов в WordPress — функция wp_enqueue_script. К сожалению, она не поддерживает передачу атрибутов defer и async напрямую, но это можно решить с помощью фильтра script_loader_tag.

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

Добавим атрибут defer для скрипта с handle wpupgrade-script:

function wpupgrade_add_defer_attribute( $tag, $handle ) {
    if ( 'wpupgrade-script' === $handle ) {
        return str_replace( '<script ', '<script defer ', $tag );
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'wpupgrade_add_defer_attribute', 10, 2 );

Подключение скрипта с этим handle:

wp_enqueue_script('wpupgrade-script', get_template_directory_uri() . '/js/script.js', array(), null, true);

Добавление async аналогично

function wpupgrade_add_async_attribute( $tag, $handle ) {
    if ( 'wpupgrade-async-script' === $handle ) {
        return str_replace( '<script ', '<script async ', $tag );
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'wpupgrade_add_async_attribute', 10, 2 );

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

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

function wpupgrade_defer_all_scripts_except_jquery( $tag, $handle ) {
    if ( 'jquery' !== $handle ) {
        // Проверяем, что это скрипт, а не CSS
        if ( strpos( $tag, '<script' ) !== false ) {
            $tag = str_replace( '<script ', '<script defer ', $tag );
        }
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'wpupgrade_defer_all_scripts_except_jquery', 10, 2 );

Этот код поможет существенно улучшить скорость загрузки страниц.

Важные моменты и рекомендации

Перед массовым добавлением defer или async проверьте совместимость скриптов. Некоторые библиотеки (особенно старые) могут некорректно работать при отложенной загрузке.

Для отладки используйте инструменты браузера (DevTools) и профилировщики, чтобы убедиться, что скрипты выполняются в нужном порядке и без ошибок.

Если вы используете плагины кэширования и оптимизации, такие как Clearfy Pro или LiteSpeed Cache, возможно, они уже имеют опции для deferred/async загрузки скриптов — стоит проверить их настройки перед ручным вмешательством.

Полезные плагины для управления загрузкой JavaScript в WordPress

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

Все эти плагины можно найти и скачать на WPSHOP.RU с UTM-метками для удобства.

Вывод и лучшие практики

Добавление defer и async — эффективный способ ускорить сайт на WordPress. Рекомендуется:

• Использовать фильтр script_loader_tag для добавления атрибутов.
• Исключать из defer/async критичные скрипты, например jQuery.
• Тестировать сайт после изменений, чтобы избежать конфликтов.
• Использовать плагины оптимизации, чтобы автоматизировать процесс.

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