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

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

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

Чтобы убедиться в этом, откройте любую страницу на вашем сайте и в инструментах разработчика браузера (Chrome DevTools, вкладка Network) посмотрите, какие CSS и JS-файлы загружаются. Если вы видите файлы с префиксом woocommerce или wc-, значит WooCommerce загружает свои ресурсы.

Как выбрать скрипты и стили для удаления

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

Основные ресурсы WooCommerce, которые часто отключают:

• woocommerce-general – базовые стили WooCommerce
• woocommerce-layout – стили для расположения элементов
• woocommerce-smallscreen – адаптивные стили
• wc-cart-fragments – AJAX обновление корзины
• woocommerce – основной скрипт
• wc-add-to-cart – скрипт добавления в корзину
• jquery-blockui – блокировка UI при AJAX

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

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

add_action('wp_enqueue_scripts', 'custom_dequeue_woocommerce_assets', 99);
function custom_dequeue_woocommerce_assets() {
    // Проверяем, что мы не на страницах WooCommerce
    if (!is_woocommerce() && !is_cart() && !is_checkout() && !is_account_page()) {
        // Стили
        wp_dequeue_style('woocommerce-general');
        wp_dequeue_style('woocommerce-layout');
        wp_dequeue_style('woocommerce-smallscreen');

        // Скрипты
        wp_dequeue_script('wc-cart-fragments');
        wp_dequeue_script('woocommerce');
        wp_dequeue_script('wc-add-to-cart');
        wp_dequeue_script('jquery-blockui');
    }
}

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

Как расширить логику отключения

Если у вас есть кастомные страницы с элементами WooCommerce, добавьте их проверки в условие if. Например, для кастомной страницы с товарами:

if (!is_woocommerce() && !is_cart() && !is_checkout() && !is_account_page() && !is_page('custom-shop')) {
    // отключаем ресурсы
}

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

1. Откройте страницу, где не должно быть стилей и скриптов WooCommerce (например, главную или блог).

2. В инструментах разработчика (Chrome DevTools) перейдите на вкладку Network и обновите страницу. Убедитесь, что ресурсы с названиями, начинающимися на woocommerce и wc-, не загружаются.

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

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

• Ошибка: Сломалась кнопка «Добавить в корзину» на страницах магазина.
  Причина: Скрипты wc-add-to-cart и woocommerce отключены там, где нужны.
  Решение: Проверьте условие в коде, добавьте проверку is_product() для страниц товаров.
• Ошибка: Корзина не обновляется без перезагрузки страницы.
  Причина: Отключен скрипт wc-cart-fragments, который отвечает за AJAX обновление.
  Решение: Не отключайте этот скрипт на страницах с корзиной и оформления заказа.
• Ошибка: Адаптивные стили WooCommerce не применяются на мобильных устройствах.
  Причина: Отключен стиль woocommerce-smallscreen.
  Решение: Включите этот стиль на страницах магазина и товарах.

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

• Кэширование: После изменений очистите кэш браузера и кэш плагинов (если используются), чтобы увидеть эффект.
• Минификация: После отключения ненужных стилей и скриптов, используйте плагины типа Clearfy Pro для дополнительной оптимизации и удаления дублирующих ресурсов.
• Тестирование: Всегда тестируйте на staging-сайте перед выкатыванием изменений на продакшен.
• Безопасность: Отключение скриптов не влияет на безопасность, но следите, чтобы не отключать важные скрипты, иначе пользовательский опыт ухудшится.

Сравнение методов удаления скриптов и стилей WooCommerce