Как удалить ненужные стили и скрипты WordPress без потери функциональности

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

Почему важно удалять лишние стили и скрипты WordPress

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

• увеличению времени загрузки страниц;
• увеличению количества HTTP-запросов;
• перегрузке памяти браузера;
• возможным конфликтам между скриптами и стилями.

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

Как определить, какие стили и скрипты можно удалить

Для начала необходимо выявить, какие ресурсы загружаются на каждой странице. Для этого используйте инструменты разработчика в браузере (например, вкладка Network в Chrome DevTools) или специальные плагины:

• Query Monitor — показывает все подключённые скрипты и стили, а также их источник.
• Asset CleanUp — позволяет наглядно отключать стили и скрипты на страницах.

Проанализируйте, какие из ресурсов относятся к функционалу, не нужному на текущей странице, и приступайте к их отключению.

Удаление стилей и скриптов с помощью кода в functions.php

Самый надёжный способ очистить загрузку — использовать функцию wpcorp_dequeue_scripts_styles в файле functions.php вашей темы или в плагине-логике. Рассмотрим пример:

function wpcorp_dequeue_scripts_styles() {
    if ( !is_page('kontakt') ) { // Если не страница контактов
        wp_dequeue_style('contact-form-7'); // Отключаем стили Contact Form 7
        wp_dequeue_script('contact-form-7'); // Отключаем скрипты Contact Form 7
    }

    if ( !is_single() ) { // Если не страница записи
        wp_dequeue_style('wp-block-library'); // Отключаем стили Gutenberg
    }
}
add_action('wp_enqueue_scripts', 'wpcorp_dequeue_scripts_styles', 100);

В этом примере мы отключаем ресурсы Contact Form 7 на всех страницах, кроме страницы с ярлыком "kontakt". Также отключаем стили Gutenberg на всех страницах, кроме записей блога.

Обратите внимание, что при отключении ресурсов нужно точно знать, какой идентификатор (handle) у стиля или скрипта. Его можно найти через Query Monitor или в исходниках темы/плагина.

Пример отключения стилей WooCommerce на страницах без магазина

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

function wpcorp_dequeue_woocommerce_assets() {
    if ( !is_woocommerce() && !is_cart() && !is_checkout() ) {
        wp_dequeue_style('woocommerce-general');
        wp_dequeue_style('woocommerce-layout');
        wp_dequeue_style('woocommerce-smallscreen');
        wp_dequeue_script('wc-cart-fragments');
    }
}
add_action('wp_enqueue_scripts', 'wpcorp_dequeue_woocommerce_assets', 99);

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

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

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

• Asset CleanUp: Page Speed Booster — позволяет отключать CSS и JS на уровне отдельных страниц и постов. Очень удобный визуальный интерфейс.
• Perfmatters — коммерческий плагин с расширенными возможностями управления скриптами и стилями, а также дополнительной оптимизацией.
• Plugin Organizer — для комплексного управления активацией плагинов и их ресурсов.

Однако даже с плагинами полезно понимать, что именно отключается, чтобы не сломать работу сайта.

Как тестировать и избегать поломок после удаления ресурсов

После отключения стилей и скриптов обязательно тщательно проверьте работу сайта:

• Проверьте отображение всех элементов интерфейса, особенно форм, кнопок, слайдеров.
• Проверьте функциональность интерактивных элементов.
• Откройте сайт в разных браузерах и на мобильных устройствах.

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

Автоматизация удаления неиспользуемых стилей и скриптов

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

function wpcorp_conditional_dequeue() {
    if ( is_front_page() ) {
        wp_dequeue_style('some-plugin-style');
        wp_dequeue_script('some-plugin-script');
    } elseif ( is_singular('product') ) {
        // Оставляем все ресурсы для страницы продукта
    } else {
        // Деактивируем ресурсы, которые нужны только на странице продукта
        wp_dequeue_style('product-plugin-style');
    }
}
add_action('wp_enqueue_scripts', 'wpcorp_conditional_dequeue', 100);

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