Как оптимизировать загрузку скриптов и стилей WooCommerce для ускорения сайта

Диагностика проблемы: почему WooCommerce замедляет загрузку страниц

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

Как понять, что проблема именно в скриптах WooCommerce

• Используйте панель разработчика браузера (F12) на обычных страницах — проверьте вкладки Network и Performance.
• Обратите внимание на загрузку файлов с префиксом woocommerce или связанных с ним.
• Воспользуйтесь плагинами типа Query Monitor для анализа запросов и ресурсов.
• Проверьте скорость страниц с помощью Google PageSpeed Insights — часто там указывается блокировка рендеринга из-за CSS/JS WooCommerce.

Пошаговое решение: отключаем ненужные скрипты и стили WooCommerce

Самый эффективный способ — условно отключать загрузку ресурсов WooCommerce на страницах, где он не нужен. Для этого добавим код в functions.php вашей темы или в отдельный плагин.

1. Отключение стилей и скриптов WooCommerce на не товарных страницах

function wpaction_dequeue_woocommerce_assets() {
    if ( function_exists( 'is_woocommerce' ) ) {
        if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() && ! is_account_page() ) {
            // Отключаем стили WooCommerce
            wp_dequeue_style( 'woocommerce-general' );
            wp_dequeue_style( 'woocommerce-layout' );
            wp_dequeue_style( 'woocommerce-smallscreen' );

            // Отключаем скрипты WooCommerce
            wp_dequeue_script( 'wc-cart-fragments' );
            wp_dequeue_script( 'woocommerce' );
            wp_dequeue_script( 'wc-add-to-cart' );
            wp_dequeue_script( 'jquery-blockui' );
            wp_dequeue_script( 'jquery-cookie' );
            wp_dequeue_script( 'wc-cart' );
        }
    }
}
add_action( 'wp_enqueue_scripts', 'wpaction_dequeue_woocommerce_assets', 99 );

2. Дополнительный контроль для страниц с AJAX и корзиной

Некоторые скрипты важны для корректной работы корзины и AJAX-запросов. Если вы отключаете их на страницах, где корзина или мини-корзина используется, функционал может сломаться. Для этого используйте условие is_cart(), is_checkout() и is_account_page() — как показано выше.

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

• Обновите страницу, где не используется WooCommerce (например, блог).
• Откройте инструменты разработчика (F12) и убедитесь, что скрипты и стили WooCommerce не загружаются в Network.
• Измерьте скорость загрузки страницы через Google PageSpeed Insights или GTmetrix — должно быть заметное улучшение.
• Проверьте функционал WooCommerce на страницах магазина, корзины и оформления заказа — все должно работать без ошибок и с необходимыми скриптами.

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

• Сломался AJAX в корзине или не обновляется количество товаров
  Причина — отключены скрипты wc-cart-fragments или wc-cart на страницах с корзиной. Решение — не отключать их на страницах is_cart() и is_checkout().
• Пользовательские стили или скрипты зависят от WooCommerce и перестали работать
  Проверьте зависимости и подключение. Возможно, нужно условно подключать ваши скрипты только там, где есть WooCommerce.
• Кэш браузера или кеширующие плагины показывают старые данные
  После отключения ресурсов очистите кэш плагинов (например, WP Rocket, W3 Total Cache) и браузера.

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

• Отключение ненужных скриптов не только ускоряет загрузку, но и уменьшает потенциальные точки атаки.
• Регулярно проверяйте обновления WooCommerce — иногда меняются названия скриптов и стилей.
• Используйте локальное хранение мини-корзины или оптимизируйте AJAX-запросы для снижения нагрузки.
• Для дополнительной оптимизации используйте плагины типа Clearfy Pro (https://wpshop.ru/plugins/clearfy?utm_source=wpaction.ru&utm_medium=article&utm_campaign=kak-optimizirovat-zagruzku-skriptov-i-stilej-woocommerce) — они помогают убрать лишний код и оптимизировать WooCommerce автоматически.

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