Оптимизация WooCommerce: удаление CSS стилей ненужных модулей

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

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

Как проверить, какие стили загружает WooCommerce

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

Также можно использовать плагин Query Monitor, который покажет, какие стили и скрипты подключаются на странице, и их источники.

Пошаговое решение: удаление ненужных CSS стилей WooCommerce

Шаг 1. Определите, где нужны стили WooCommerce

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

Шаг 2. Отключение CSS с помощью функции wp_dequeue_style

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

function wpskins_remove_woocommerce_styles() {
    if ( function_exists( 'is_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' );
        }
    }
}
add_action( 'wp_enqueue_scripts', 'wpskins_remove_woocommerce_styles', 99 );

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

Шаг 3. Проверка дополнительных стилей плагинов и расширений

Если вы используете дополнительные модули WooCommerce (например, платёжные шлюзы, подписки, отзывы), они могут подключать свои CSS. Чтобы найти их идентификаторы, используйте Query Monitor или просмотрите исходный код страницы для стилей с префиксом плагина. Для отключения используйте аналогичный wp_dequeue_style с нужным идентификатором.

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

1. Очистите кэш сайта и браузера.
2. Повторно откройте страницы, где отключали стили.
3. В режиме разработчика проверьте вкладку Network > CSS, убедитесь, что файлы woocommerce-*.css не загружаются на страницах, где мы их отключили.
4. Проверьте визуально, что оформление страницы не сломано, а функционал WooCommerce работает корректно.
5. Используйте инструменты Google PageSpeed Insights или GTmetrix, чтобы заметить улучшения скорости загрузки.

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

• Ошибка: отключение стилей на страницах, где они нужны.
  Причина: неправильная проверка условий is_woocommerce() и других функций.
  Исправление: внимательно проверьте подключаемые страницы, протестируйте все варианты, добавьте проверки is_cart(), is_checkout(), is_account_page().
• Ошибка: стили плагинов WooCommerce остаются и замедляют сайт.
  Причина: идентификаторы стилей не найдены или не отключены.
  Исправление: используйте Query Monitor для поиска handle стилей и отключайте их через wp_dequeue_style.
• Ошибка: стили отключены, но внешний вид сломан.
  Причина: зависит от темы или кастомных стилей.
  Исправление: создайте минимальные стили, чтобы компенсировать отключённые, или отключайте стили поэтапно, чтобы выявить проблемные.

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

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

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

Пример кода для отключения стилей конкретного плагина WooCommerce

function wpskins_remove_custom_plugin_styles() {
    if ( ! is_woocommerce() ) {
        wp_dequeue_style( 'plugin-custom-style-handle' );
    }
}
add_action( 'wp_enqueue_scripts', 'wpskins_remove_custom_plugin_styles', 100 );

Замените plugin-custom-style-handle на настоящий идентификатор стиля, найденный через Query Monitor или просмотр исходного кода.