WooCommerce: удаление неиспользуемых CSS стилей для оптимизации загрузки сайта

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

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

• Google Chrome DevTools: вкладка Coverage (Coverage > Start instrumenting coverage and reload page) покажет процент использования CSS.
• Плагины для оптимизации, например, Clearfy Pro, имеют функции анализа и отключения неиспользуемых стилей.
• Плагины для кеширования и оптимизации (Autoptimize, Asset CleanUp) могут показать список подключаемых CSS.

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

Как запрограммировано отключить неиспользуемые CSS стили WooCommerce

Чтобы отключать стили, используйте хук wp_enqueue_scripts с приоритетом выше 20, так как WooCommerce подключает стили с приоритетом 20:

add_action('wp_enqueue_scripts', 'remove_woocommerce_styles', 15);
function remove_woocommerce_styles() {
    if (!is_woocommerce() && !is_cart() && !is_checkout() && !is_account_page()) {
        // Отключаем основные стили WooCommerce для всех страниц, кроме WooCommerce
        wp_dequeue_style('woocommerce-general');
        wp_dequeue_style('woocommerce-layout');
        wp_dequeue_style('woocommerce-smallscreen');
    }
}

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

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

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

function remove_woocommerce_extra_styles() {
    if (!is_woocommerce()) {
        wp_dequeue_style('wc-block-style'); // Стили блоков WooCommerce
        wp_dequeue_style('woocommerce_fancybox_styles'); // Если подключается Fancybox
    }
}
add_action('wp_enqueue_scripts', 'remove_woocommerce_extra_styles', 15);

Пошаговое решение для оптимизации CSS WooCommerce

1. Проанализируйте, какие страницы WooCommerce используются на сайте (магазин, корзина, оформление заказа, аккаунт).
2. Включите Chrome DevTools > Coverage, чтобы увидеть % использования CSS на разных страницах.
3. Добавьте код для отключения стилей на всех страницах, кроме необходимых (пример выше).
4. Проверьте, не ломается ли дизайн на страницах WooCommerce.
5. Если используются расширения WooCommerce, определите их CSS-хендлы и отключите ненужные.
6. Используйте плагин Clearfy Pro для дополнительного анализа и отключения дублей CSS.
7. Оптимизируйте загрузку оставшихся стилей с помощью Autoptimize или аналогов (минификация, объединение).

Как проверить, что решение сработало

• Откройте страницы, не относящиеся к WooCommerce, и убедитесь, что файлы woocommerce-*.css не подключаются (вкладка Network в DevTools).
• Проверьте, что на страницах магазина, корзины и оформления заказа стили загружаются корректно и внешний вид сохранён.
• Повторно запустите Coverage, чтобы убедиться, что процент неиспользуемого CSS снизился.
• Проверьте скорость сайта в PageSpeed Insights или GTmetrix — должна улучшиться загрузка CSS.

Частые ошибки при отключении CSS WooCommerce и как их исправить

• Удаление стилей на страницах WooCommerce: если забыть исключить нужные страницы, дизайн сломается. Проверьте условия is_woocommerce() и аналогичные.
• Неправильные хендлы стилей: используйте именно те имена, которые регистрирует WooCommerce, иначе стили не отключатся.
• Зависимости CSS: некоторые стили зависят друг от друга — отключение только одной части может привести к проблемам.
• Кеширование: после изменений очистите кеш браузера и сервера, чтобы увидеть результат.

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

• Отключение неиспользуемых CSS уменьшает поверхность атаки за счёт меньшего количества загружаемых файлов.
• Минимизируйте и объединяйте CSS с помощью Autoptimize или аналогичных плагинов после удаления неиспользуемых стилей.
• Используйте HTTP/2 для параллельной загрузки файлов, чтобы ускорить загрузку CSS.
• Регулярно обновляйте WooCommerce и тему, чтобы избежать конфликтов в стилях.
• При использовании Clearfy Pro можно дополнительно удалять дубли и оптимизировать базу данных для повышения скорости.

Сравнение вариантов отключения WooCommerce CSS