Как использовать WPspeed Async JS для ускорения WordPress

Что такое асинхронная загрузка JavaScript и зачем она нужна

JavaScript-файлы часто блокируют отрисовку страницы, замедляя загрузку сайта и ухудшая пользовательский опыт. Асинхронная загрузка позволяет браузеру загружать скрипты без блокировки отображения контента. В результате страница становится интерактивной быстрее, что положительно сказывается на Core Web Vitals и SEO.

В WordPress множество тем и плагинов подключают JS без оптимизации, что замедляет сайт. Плагин WPspeed Async JS помогает решить эту проблему, позволяя легко настроить асинхронную загрузку и улучшить скорость.

В этом руководстве мы подробно рассмотрим, как правильно настроить WPspeed Async JS, чтобы получить максимальную пользу без сбоев на сайте.

Установка и базовая настройка WPspeed Async JS

Для начала установите плагин через админку WordPress или вручную:

wp plugin install wpspeed-async-js --activate

После активации перейдите в Настройки > WPspeed Async JS. Здесь есть основные опции:

• Включить асинхронную загрузку — переключатель для активации оптимизации.
• Исключения — список скриптов, которые нужно загрузить синхронно для предотвращения конфликтов.
• Метод загрузки — async или defer, подробнее о них ниже.

Рекомендуется сначала включить async-загрузку для всех скриптов, затем постепенно добавлять исключения, если что-то ломается на сайте.

Разница между async и defer: что выбрать для WordPress

Параметры async и defer задают разные способы загрузки JS:

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

Для WordPress чаще безопаснее использовать defer, чтобы избежать ошибок из-за зависимостей между скриптами. WPspeed Async JS позволяет переключаться между этими режимами.

Как найти и правильно добавить исключения для скриптов

Некоторые скрипты, например jQuery, Google Maps или сторонние виджеты, могут не работать с async/defer. Чтобы выявить проблемные скрипты:

1. Включите асинхронную загрузку без исключений и проверьте сайт на ошибки (консоль браузера, визуальные сбои).
2. В консоли разработчика найдите названия скриптов, вызывающих ошибки.
3. Добавьте их в поле исключений в настройках WPspeed Async JS, например: jquery.js, google-maps.js.

Исключения пишутся через запятую, можно использовать часть имени файла.

Пример кода для программного подключения с поддержкой async/defer

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

function wpspeed_enqueue_async_script() {
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom.js', array('jquery'), null, true);
    add_filter('wpspeed_async_js_attributes', function($attributes, $handle) {
        if ($handle === 'custom-script') {
            $attributes['defer'] = true; // или 'async' => true
        }
        return $attributes;
    }, 10, 2);
}
add_action('wp_enqueue_scripts', 'wpspeed_enqueue_async_script');

Этот пример показывает, как задать defer для конкретного скрипта. Плагин WPspeed Async JS должен поддерживать такой фильтр (проверьте документацию).

Дополнительные советы по оптимизации JavaScript в WordPress

Минификация и объединение скриптов

Асинхронная загрузка не отменяет необходимости минимизировать и объединять JS. Используйте плагины, например Autoptimize или Fast Velocity Minify, чтобы уменьшить размер и количество запросов.

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

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

Работа с inline-скриптами

Асинхронная загрузка внешних файлов не влияет на inline-скрипты. Но если inline-скрипт зависит от загруженного JS, убедитесь, что порядок выполнения сохраняется. Иногда помогает перенос таких скриптов в footer или обертка в событие DOMContentLoaded.

Как проверить эффективность WPspeed Async JS

После настройки плагина проверьте сайт с помощью:

• Google PageSpeed Insights — смотрите улучшения в разделе "Время до интерактивности" и "Использование JavaScript".
• GTmetrix — анализ задержек и блокирующих ресурсов.
• Консоль браузера — отсутствие JS-ошибок и предупреждений.

Если после включения async/defer появились ошибки, возвращайтесь к списку исключений и корректируйте его.

Выводы и рекомендации по использованию WPspeed Async JS

WPspeed Async JS — мощный инструмент для ускорения WordPress-сайтов за счет оптимизации загрузки JavaScript. Важно:

• Начинать с базовой настройки и постепенно добавлять исключения.
• Выбирать defer для сохранения порядка выполнения скриптов.
• Комбинировать с минификацией и ленивой загрузкой.
• Тестировать сайт после каждого изменения.

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