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

Проблема: избыточная загрузка стилей и скриптов WooCommerce

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

Диагностика проблемы

Для начала нужно точно определить, какие стили и скрипты WooCommerce грузятся на страницах, где магазин не используется. Это можно сделать с помощью инструментов разработчика браузера (Chrome DevTools, Firefox Developer Tools):

• Откройте любую не-магазинную страницу сайта.
• В панели Network отфильтруйте по типу «JS» и «CSS».
• Посмотрите, загружаются ли файлы с путём /woocommerce/assets/ или похожие.

Если да — это подтверждает избыточную загрузку.

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

1. Отключение стилей WooCommerce

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

add_filter('woocommerce_enqueue_styles', '__return_empty_array');

Это полностью отключит стандартные стили WooCommerce.

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

Для отключения скриптов на страницах без магазина используем хук wp_enqueue_scripts с приоритетом 99:

function wpaction_disable_woocommerce_scripts() {
    if (!is_woocommerce() && !is_cart() && !is_checkout() && !is_account_page()) {
        wp_dequeue_script('wc-cart-fragments');
        wp_dequeue_script('woocommerce');
        wp_dequeue_script('wc-checkout');
        wp_dequeue_script('wc-add-to-cart');
        wp_dequeue_script('wc-single-product');
        wp_dequeue_script('wc-cart');
        wp_dequeue_script('jquery-blockui');
        wp_dequeue_script('jquery-placeholder');
        wp_dequeue_script('fancybox');
        wp_dequeue_script('flexslider');
        wp_dequeue_script('photoswipe-ui-default');
        wp_dequeue_script('photoswipe');
        wp_dequeue_style('woocommerce-general');
        wp_dequeue_style('woocommerce-layout');
        wp_dequeue_style('woocommerce-smallscreen');
    }
}
add_action('wp_enqueue_scripts', 'wpaction_disable_woocommerce_scripts', 99);

3. Отключение стилей WooCommerce на уровне стилей

Если нужно selectively отключать стили, например, оставить на страницах магазина, но убрать на всех остальных, используйте условные теги, как показано выше.

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

• Очистите кеш сайта (если используете кэш-плагины).
• Обновите страницу на не-магазинной части сайта.
• В инструментах разработчика проверьте, что CSS и JS файлы WooCommerce не загружаются.
• На страницах магазина проверьте, что стили и скрипты работают корректно и функционал не сломан.

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

• Проблема: Отключили стили и скрипты на страницах магазина — страница выглядит сломанной.
  Решение: Проверьте условные теги в коде, убедитесь, что is_woocommerce(), is_cart(), is_checkout(), is_account_page() включены в условие и правильно работают.
• Проблема: Скрипты все равно грузятся на всех страницах.
  Решение: Убедитесь, что ваш код добавлен в правильный файл (functions.php дочерней темы или плагина) и приоритет 99 используется, чтобы перекрыть другие enqueue.
• Проблема: Конфликты с другими плагинами, которые требуют стили WooCommerce.
  Решение: Проверьте, какие плагины подключают стили, при необходимости отключайте на конкретных страницах с учетом их функционала.

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

• Используйте условные теги максимально точно, чтобы не отключать нужные скрипты на страницах магазина.
• Регулярно проверяйте консоль браузера на наличие JS ошибок после отключения скриптов.
• Кэшируйте страницы и используйте CDN для ускорения доставки статики.
• Обновляйте WooCommerce и тему, чтобы избежать проблем совместимости с отключением ресурсов.

Сравнение вариантов отключения стилей и скриптов WooCommerce