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

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

Почему важен отложенный запуск JavaScript

По умолчанию браузер при встрече с тегом <script> останавливает парсинг HTML и загружает скрипт, что приводит к задержкам в отображении контента. Отложенный запуск и асинхронная загрузка позволяют избежать этой проблемы:

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

Для большинства скриптов, влияющих на структуру страницы (например, jQuery), лучше использовать defer, чтобы сохранить порядок выполнения. Асинхронная загрузка подходит для аналитики и виджетов.

Как реализовать отложенную загрузку JavaScript в WordPress

В WordPress скрипты подключаются с помощью функции wp_enqueue_script. Чтобы добавить атрибуты defer или async, нужно использовать фильтр script_loader_tag.

Добавление атрибута defer с помощью фильтра

Ниже пример функции, которая добавляет атрибут defer для определённых скриптов, зарегистрированных в WordPress. Функция названа с префиксом домена wpupgrade_:

function wpupgrade_add_defer_attribute($tag, $handle) {
    $scripts_to_defer = array('jquery-core', 'wpupgrade-custom-js'); // указать хендлы скриптов
    if (in_array($handle, $scripts_to_defer)) {
        return str_replace(' src', ' defer src', $tag);
    }
    return $tag;
}
add_filter('script_loader_tag', 'wpupgrade_add_defer_attribute', 10, 2);

В этом примере скрипты с хендлами jquery-core и wpupgrade-custom-js будут загружаться с атрибутом defer. Такой подход позволяет гибко управлять загрузкой без изменения исходного кода шаблона.

Добавление атрибута async

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

function wpupgrade_add_async_attribute($tag, $handle) {
    $scripts_to_async = array('google-analytics');
    if (in_array($handle, $scripts_to_async)) {
        return str_replace(' src', ' async src', $tag);
    }
    return $tag;
}
add_filter('script_loader_tag', 'wpupgrade_add_async_attribute', 10, 2);

Использование плагина Clearfy Pro для автоматической оптимизации загрузки скриптов

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

Clearfy Pro умеет автоматически анализировать скрипты и оптимизировать их загрузку без конфликтов. Особенно полезно при большом количестве сторонних скриптов.

Советы и нюансы при использовании defer и async

Несмотря на преимущества, есть важные моменты:

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

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

Чтобы подключить кастомный скрипт с отложенной загрузкой, используйте следующий код в functions.php вашей темы:

function wpupgrade_enqueue_custom_script() {
    wp_enqueue_script('wpupgrade-custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'wpupgrade_enqueue_custom_script');

После этого примените фильтр из примера выше, чтобы добавить defer:

add_filter('script_loader_tag', 'wpupgrade_add_defer_attribute', 10, 2);

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

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

Используйте фильтр script_loader_tag для тонкой настройки или плагин Clearfy Pro для автоматизации процесса. Обязательно тестируйте сайт после оптимизации, чтобы избежать сбоев в работе скриптов.