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

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

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

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

Отложенная загрузка скриптов позволяет браузеру сначала загрузить и отобразить контент, а уже затем выполнить JavaScript. Это улучшает восприятие скорости сайта и положительно влияет на SEO.

Для WordPress часто используются плагины, которые автоматизируют этот процесс, но они могут усложнять сайт или конфликтовать с другими решениями. Поэтому полезно знать, как реализовать отложенную загрузку вручную.

Способы отложить загрузку скриптов в WordPress без плагинов

Использование атрибутов defer и async при регистрации скриптов

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

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

function wpsource_add_defer_attribute($tag, $handle) {
    // Замените 'my-script-handle' на нужный хэндл скрипта
    if ('my-script-handle' === $handle) {
        return str_replace(' src', ' defer src', $tag);
    }
    return $tag;
}
add_filter('script_loader_tag', 'wpsource_add_defer_attribute', 10, 2);

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

Регистрация и подключение скриптов с defer

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

function wpsource_enqueue_scripts() {
    wp_register_script('my-script-handle', get_template_directory_uri() . '/js/my-script.js', array(), null, true);
    wp_enqueue_script('my-script-handle');
}
add_action('wp_enqueue_scripts', 'wpsource_enqueue_scripts');

Значение true в последнем параметре означает загрузку в футере, что уже помогает оптимизировать загрузку. Добавив фильтр из предыдущего примера, мы дополнительно применим defer.

Как выбрать между defer и async

Атрибут defer гарантирует, что скрипт загрузится параллельно с HTML, но выполнится только после полной загрузки документа. Это хорошо для скриптов, которые зависят от DOM.

Атрибут async запускает выполнение скрипта сразу после загрузки, не дожидаясь парсинга страницы. Это подходит для независимых скриптов, например, аналитики.

Для WordPress часто рекомендуется использовать defer, чтобы избежать проблем с зависимостями между скриптами.

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

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

function wpsource_add_defer_attribute_multiple($tag, $handle) {
    $scripts_to_defer = array('my-script-handle', 'another-script-handle', 'jquery');
    if (in_array($handle, $scripts_to_defer)) {
        return str_replace(' src', ' defer src', $tag);
    }
    return $tag;
}
add_filter('script_loader_tag', 'wpsource_add_defer_attribute_multiple', 10, 2);

Важно исключать скрипты, которые не совместимы с defer (например, inline-скрипты, зависящие от определённого порядка загрузки).

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

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

Рекомендуется не применять defer к скриптам WooCommerce, а также плагинам, которые требуют строгого порядка загрузки.

Для исключения таких скриптов из defer используйте условие:

function wpsource_defer_except_woocommerce($tag, $handle) {
    $exclude = array('woocommerce', 'wc-cart');
    if (in_array($handle, $exclude)) {
        return $tag;
    }
    return str_replace(' src', ' defer src', $tag);
}
add_filter('script_loader_tag', 'wpsource_defer_except_woocommerce', 10, 2);

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

Если вы используете Clearfy Pro, то в нем есть встроенный функционал для отложенной загрузки JS и CSS. Это даёт удобный интерфейс для управления оптимизацией без ручного кода.

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

Заключение по отложенной загрузке скриптов без плагинов

Реализация отложенной загрузки с помощью фильтра script_loader_tag — простой и эффективный способ оптимизировать скорость WordPress-сайта без установки плагинов. Главное — внимательно тестировать сайт после изменений, чтобы не сломать функциональность.

Комбинируйте defer с загрузкой скриптов в футере, исключайте критичные для работы плагины и темы, и ваш сайт станет заметно быстрее.