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

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

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

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

Диагностика: как определить, какие скрипты WooCommerce грузятся лишние

1. Откройте любую страницу сайта в режиме инкогнито.
2. Включите инструменты разработчика (F12) и перейдите во вкладку Network.
3. Отфильтруйте запросы по типу JS.
4. Найдите скрипты с путями, содержащими woocommerce или wc-.

Например:

wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js
wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js

5. Определите, нужны ли эти скрипты именно на данной странице. Корзина и оформление заказа чаще всего нужны только на соответствующих страницах.

Пошаговое решение: отложенная загрузка скриптов WooCommerce

1. Отключаем ненужные скрипты на страницах без WooCommerce

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

function disable_woocommerce_scripts_on_non_wc_pages() {
    if ( function_exists('is_woocommerce') && !is_woocommerce() && !is_cart() && !is_checkout() ) {
        wp_dequeue_script('wc-cart-fragments');
        wp_dequeue_script('woocommerce');
        wp_dequeue_script('wc-add-to-cart');
        wp_dequeue_style('woocommerce-general');
        wp_dequeue_style('woocommerce-layout');
        wp_dequeue_style('woocommerce-smallscreen');
    }
}
add_action('wp_enqueue_scripts', 'disable_woocommerce_scripts_on_non_wc_pages', 99);

Этот код отключит загрузку основных скриптов и стилей WooCommerce на всех страницах, кроме магазина, корзины и оформления заказа.

2. Добавляем отложенную загрузку для нужных скриптов

Чтобы отложить загрузку скриптов, используем фильтр script_loader_tag:

function add_defer_attribute_to_wc_scripts($tag, $handle) {
    $defer_scripts = [
        'woocommerce',
        'wc-cart-fragments',
        'wc-add-to-cart'
    ];
    if (in_array($handle, $defer_scripts)) {
        return str_replace(' src', ' defer src', $tag);
    }
    return $tag;
}
add_filter('script_loader_tag', 'add_defer_attribute_to_wc_scripts', 10, 2);

Это позволит браузеру загружать скрипты параллельно и выполнять их после загрузки основного контента.

Проверка результата после внедрения

1. Снова откройте страницу в режиме инкогнито, откройте вкладку Network.
2. Убедитесь, что на не-WooCommerce страницах скрипты WooCommerce не загружаются.
3. На страницах магазина, корзины и оформления заказа проверьте, что скрипты грузятся с атрибутом defer (в колонке "Initiator" или в исходном коде страницы).

4. Проверьте функционал корзины и оформления заказа — кнопки добавления в корзину и обновления должны работать без ошибок в консоли.

Частые ошибки и как их исправить

• Ошибка: Скрипты отключены на странице корзины или оформления заказа.
  Причина: Неправильное условие в if — проверьте, что is_cart() и is_checkout() используются правильно.
• Ошибка: Функционал добавления товара не работает.
  Причина: Скрипты загружаются с async или неправильно отложены, что приводит к конфликтам.
  Решение: Используйте только defer, избегайте async для этих скриптов.
• Ошибка: Консоль браузера показывает ошибки JS.
  Причина: Конфликт с другими плагинами или тема тоже пытается управлять скриптами.
  Решение: Отключите другие оптимизаторы на время теста, проверьте совместимость.

Практические советы по безопасности и производительности

• Регулярно обновляйте WooCommerce и плагины, чтобы использовать актуальные версии скриптов с улучшенной производительностью.
• Используйте плагин Clearfy Pro из WPShop для удаления неиспользуемых функций и оптимизации базы данных (https://wpshop.ru/plugins/clearfy?utm_source=wprocket.ru&utm_medium=article&utm_campaign=optimizaciya-otlozhennoy-zagruzki-woocommerce-bes-problem).
• Проверьте совместимость с WP Rocket, если он установлен — в настройках WP Rocket отключите автоматическую оптимизацию скриптов WooCommerce, чтобы избежать двойной обработки.
• Используйте инструменты мониторинга производительности (например, Query Monitor) для отслеживания загрузки скриптов и задержек.

Сравнение вариантов оптимизации отложенной загрузки WooCommerce