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

Автор: Павел Кузнецов | Опубликовано: 05.01.2026

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

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

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

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

Как определить неиспользуемые CSS и JS файлы

Для выявления неиспользуемых стилей и скриптов можно использовать инструменты разработчика в браузерах и онлайн-сервисы:

Google Chrome DevTools Coverage: откройте панель разработчика (F12), перейдите на вкладку Coverage, нажмите Reload и просмотрите, какой процент кода используется.
PageSpeed Insights: в отчете есть рекомендации по удалению неиспользуемого CSS и JS.
PurgeCSS: инструмент для анализа проекта и удаления неиспользуемого CSS.

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

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

Самый точный способ — использовать условные теги WordPress и функцию wp_dequeue_style и wp_dequeue_script. Пример:

function wpcoding_dequeue_unused_assets() {
    if (!is_page('contact')) { // Отключаем стили и скрипты на всех страницах, кроме контактов
        wp_dequeue_style('plugin-contact-form-css');
        wp_dequeue_script('plugin-contact-form-js');
    }
}
add_action('wp_enqueue_scripts', 'wpcoding_dequeue_unused_assets', 100);

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

Как найти идентификаторы стилей и скриптов

Для этого можно:

Посмотреть исходный код страницы и найти handle в атрибуте id у тегов <link> и <script>.
Изучить исходный код темы или плагина в функции wp_enqueue_style и wp_enqueue_script.

Плагины для автоматической оптимизации CSS и JS в WordPress

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

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

Например, с Clearfy Pro можно быстро настроить отключение ненужных скриптов без кода, что упрощает жизнь разработчикам и администраторам.

Как оптимизировать загрузку CSS и JS с помощью кода

Кроме удаления неиспользуемых файлов, можно улучшить загрузку важного CSS и JS:

Отложенная загрузка (defer) скриптов: позволяет браузеру загружать скрипты после загрузки основного контента.
Асинхронная загрузка (async) скриптов: скрипты загружаются параллельно с остальным контентом.
Инлайн-стили критического CSS: вставка минимального CSS прямо в <head> для ускорения рендеринга.

Пример добавления атрибута defer к скрипту:

function wpcoding_defer_scripts($tag, $handle, $src) {
    $defer_scripts = array('jquery', 'plugin-script');
    if (in_array($handle, $defer_scripts)) {
        return '<script src="' . $src . '" defer></script>';
    }
    return $tag;
}
add_filter('script_loader_tag', 'wpcoding_defer_scripts', 10, 3);

Этот код добавит атрибут defer к скриптам с указанными идентификаторами.

Как избежать проблем после отключения CSS и JS

После удаления или отключения ресурсов важно протестировать сайт на наличие ошибок и проблем с отображением. Рекомендуется:

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

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

Итоги и рекомендации

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

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