Как удалить CSS стили плагинов WordPress для оптимизации сайта

Лишние стили CSS, подключаемые плагинами WordPress, часто замедляют загрузку страниц и ухудшают производительность сайта. Особенно это актуально, если используется несколько плагинов с большими объемами CSS, которые не всегда нужны на всех страницах. В этой статье разберём, как эффективно удалить или отключить ненужные CSS стили плагинов, чтобы ускорить загрузку и повысить отзывчивость сайта.

Почему важно удалять лишние CSS стили плагинов

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

Избыточные CSS-файлы увеличивают вес страницы, увеличивают количество HTTP-запросов и замедляют рендеринг. Это негативно влияет на Core Web Vitals и общее впечатление пользователей от сайта.

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

Как определить, какие стили плагинов можно отключить

Первый шаг — определить, какие CSS стили подключает каждый плагин и на каких страницах они нужны.

• Откройте сайт в браузере и с помощью инструментов разработчика (F12) перейдите на вкладку Network — фильтруйте по CSS, чтобы увидеть подключаемые файлы.
• Используйте плагин Query Monitor для WordPress, чтобы увидеть список всех стилей и скриптов, подключаемых на странице.
• Определите, где именно на сайте используется функционал плагина — обычно это страницы с шорткодами, виджетами или настройками.

После этого можно настроить условное отключение стилей там, где они не нужны.

Удаление CSS плагинов через functions.php — пример кода

Самый простой способ — использовать функцию wp_dequeue_style в файле functions.php вашей темы или в отдельном плагине. Вот пример, который отключает стили плагина Contact Form 7 (обычно с handle contact-form-7) на всех страницах, кроме страницы с формой, у которой ID 42:

function wpskins_dequeue_cf7_css() {
    // Проверяем, что мы не на странице с ID 42
    if (!is_page(42)) {
        wp_dequeue_style('contact-form-7');
        wp_deregister_style('contact-form-7');
    }
}
add_action('wp_enqueue_scripts', 'wpskins_dequeue_cf7_css', 20);

Здесь важно использовать приоритет 20, чтобы функция сработала после того, как плагин подключит свои стили.

Подсказки по работе с handles стилей

Handle — это идентификатор стиля, который использует плагин при регистрации. Чтобы узнать, какой handle у нужного стиля, используйте Query Monitor или изучите исходники плагина.

Использование плагинов для оптимизации CSS

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

• Asset CleanUp — позволяет настраивать загрузку CSS и JS по страницам, отключая ненужное.
• Perfmatters — платный плагин с возможностью отключать стили и скрипты по условию.
• Clearfy Pro — расширенный инструмент для оптимизации, включая управление подключаемыми ресурсами.

На сайте Clearfy Pro можно найти много полезных функций для отключения лишних стилей и скриптов.

Как создать универсальную функцию для условного отключения стилей

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

function wpskins_dequeue_styles_conditionally() {
    // Массив стилей и условий отключения
    $styles_to_dequeue = array(
        'contact-form-7' => function() { return !is_page(42); },
        'plugin-slider-style' => function() { return !is_singular('product'); },
        // Добавьте свои стили и условия
    );

    foreach ($styles_to_dequeue as $handle => $condition) {
        if (is_callable($condition) && $condition()) {
            wp_dequeue_style($handle);
            wp_deregister_style($handle);
        }
    }
}
add_action('wp_enqueue_scripts', 'wpskins_dequeue_styles_conditionally', 20);

Такой подход упрощает поддержку кода и быстрое добавление новых правил.

Как отключить встроенные стили популярных плагинов

WooCommerce

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

function wpskins_dequeue_woocommerce_styles() {
    wp_dequeue_style('woocommerce-general');
    wp_dequeue_style('woocommerce-layout');
    wp_dequeue_style('woocommerce-smallscreen');
}
add_action('wp_enqueue_scripts', 'wpskins_dequeue_woocommerce_styles', 99);

Но будьте осторожны — проверьте, что стили не нарушают отображение магазина.

Contact Form 7

Стандартно подключается стиль contact-form-7. Для отключения на всех страницах кроме формы используйте код из предыдущих примеров.

Slider Revolution

Слайдеры часто грузят свои стили повсеместно. Для отключения можно использовать:

function wpskins_dequeue_revslider_css() {
    if (!is_front_page()) {
        wp_dequeue_style('revslider-settings');
    }
}
add_action('wp_enqueue_scripts', 'wpskins_dequeue_revslider_css', 20);

Советы по тестированию и отладке

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

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

Используйте инструменты производительности, например Lighthouse или PageSpeed Insights, чтобы измерять эффект от оптимизаций.

Выводы

Удаление ненужных CSS стилей плагинов — это простой и эффективный способ ускорить сайт на WordPress без изменения функционала. Используйте ручные методы через wp_dequeue_style для точечного контроля и удобные плагины для более гибкой настройки.

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