Как удалить неиспользуемые стили и скрипты в теме WordPress

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

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

• Уменьшить количество HTTP-запросов;
• Сократить общий вес страницы;
• Улучшить показатели Core Web Vitals;
• Снизить нагрузку на сервер.

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

Как выявить неиспользуемые CSS и JS в WordPress

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

• Chrome DevTools Coverage: в панели разработчика во вкладке Coverage можно просмотреть, какая часть CSS и JS загружается и используется на странице.
• Плагины для анализа производительности: например, Query Monitor показывает подключаемые скрипты и стили.
• Онлайн-сервисы типа WebPageTest или GTmetrix помогают увидеть время загрузки и проблемы с ресурсами.

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

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

Отключение через functions.php с проверкой условия страницы

Самый надёжный и простой способ — использовать условные теги WordPress для отключения скриптов и стилей там, где они не нужны. Например, отключим стили и скрипты плагина Contact Form 7 на всех страницах, кроме страницы контактов:

function wpthemes_dequeue_unused_assets() {
    if ( ! is_page('kontakty') ) {
        wp_dequeue_style('contact-form-7');
        wp_dequeue_script('contact-form-7');
    }
}
add_action('wp_enqueue_scripts', 'wpthemes_dequeue_unused_assets', 100);

Здесь мы используем приоритет 100, чтобы убедиться, что скрипты уже подключены к моменту отключения. Аналогично можно отключать любые другие скрипты и стили, идентификаторы которых можно узнать через инспектор кода или плагины.

Удаление стилей и скриптов, подключаемых темой

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

function wpthemes_manage_theme_scripts() {
    wp_dequeue_script('theme-main');
    if ( is_front_page() ) {
        wp_enqueue_script('theme-main');
    }
}
add_action('wp_enqueue_scripts', 'wpthemes_manage_theme_scripts', 100);

При этом в functions.php нужно убедиться, что скрипт зарегистрирован с идентификатором 'theme-main' через wp_register_script.

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

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

• Asset CleanUp — удобный инструмент для отключения CSS и JS на отдельных страницах.
• Gatsby Deactivate Scripts — простой плагин для выборочного управления скриптами.

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

Особенности удаления стилей и скриптов из популярных тем и фреймворков

Многие темы и фреймворки подключают стили и скрипты глобально. Рассмотрим пример с темой Reboot от WpShop.ru:

• Reboot использует свои стили и скрипты, зарегистрированные с префиксом reboot-. Чтобы отключить их на определённых страницах, используйте в functions.php следующее:

function wpthemes_dequeue_reboot_assets() {
    if ( ! is_singular('post') ) {
        wp_dequeue_style('reboot-style');
        wp_dequeue_script('reboot-script');
    }
}
add_action('wp_enqueue_scripts', 'wpthemes_dequeue_reboot_assets', 100);

Так вы экономите ресурсы и загружаете нужные файлы только там, где они нужны.

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

При оптимизации важно соблюдать несколько правил:

• Тестируйте после отключения – проверяйте, что не сломалась верстка и функционал;
• Создавайте дочернюю тему – чтобы изменения не потерялись при обновлении;
• Используйте условные теги как is_page(), is_singular(), is_front_page() для точного контроля;
• Минимизируйте количество подключаемых библиотек – иногда проще заменить тяжелый плагин на более легкий;
• Кэшируйте и оптимизируйте оставшиеся скрипты и стили с помощью плагинов, например, Clearfy Pro (подробнее).

Пример универсальной функции для отключения стилей и скриптов по массиву

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

function wpthemes_conditional_dequeue_assets( $assets = array(), $condition = true ) {
    if ( $condition ) {
        foreach ( $assets as $handle ) {
            wp_dequeue_style( $handle );
            wp_dequeue_script( $handle );
        }
    }
}
// Использование: отключаем стили и скрипты на всех страницах кроме главной
add_action('wp_enqueue_scripts', function() {
    $assets_to_remove = array('contact-form-7', 'theme-main', 'reboot-style');
    wpthemes_conditional_dequeue_assets( $assets_to_remove, ! is_front_page() );
}, 100);

Этот подход упрощает управление и уменьшает дублирование кода.

Заключение

Удаление неиспользуемых стилей и скриптов — ключевой этап оптимизации темы WordPress. Используя условные теги, стандартные хуки и проверенные плагины, вы сможете существенно ускорить сайт, улучшить пользовательский опыт и повысить позиции в поисковой выдаче.

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