В современных сайтах на WordPress часто накапливаются десятки и даже сотни CSS и JavaScript файлов, которые подключаются автоматически темами и плагинами. Многие из них не используются на всех страницах, что ведёт к замедлению загрузки сайта, увеличению времени ответа и ухудшению пользовательского опыта. В этом материале разберём, как эффективно определить и удалить неиспользуемые CSS и JS в WordPress, а также приведём примеры кода и полезные плагины для решения этой задачи.
Почему важно удалять неиспользуемые стили и скрипты
Когда WordPress загружает лишние CSS и JS-файлы, браузер тратит дополнительное время на их скачивание, парсинг и выполнение. Это влияет на скорость рендеринга страницы, увеличивает её вес и может негативно сказаться на рейтингах в поисковых системах.
Удаление лишних ресурсов помогает:
- Сократить время загрузки страниц;
- Уменьшить количество HTTP-запросов;
- Повысить оценку в Google PageSpeed и других сервисах;
- Снизить нагрузку на сервер;
- Улучшить отзывчивость интерфейса.
Особенно важно это для сайтов с большим количеством плагинов и сложными темами, где скрипты и стили могут подключаться глобально, даже если необходимы только на отдельных страницах.
Определяем неиспользуемые CSS и JS. Инструменты и методы
Первый шаг — это определить, какие именно файлы не нужны на конкретных страницах. Для этого можно использовать несколько подходов:
1. Инструменты браузера Chrome DevTools
Откройте вкладку Coverage (Покрытие) в Chrome DevTools (Ctrl+Shift+P → введите "Coverage"), затем обновите страницу. Инструмент покажет, какой процент каждой CSS и JS-файла используется, а какой — нет.
Этот способ помогает визуально увидеть, какие файлы можно оптимизировать или убрать.
2. Плагины для анализа и оптимизации
Существуют плагины, которые помогают выявить и отключить ненужные CSS и JS:
- Asset CleanUp: позволяет отключать скрипты и стили на отдельных страницах вручную.
- Perfmatters: предлагает удобный интерфейс для деактивации ресурсов и другие оптимизации.
- Clearfy Pro: ускоряет сайт и имеет функции отключения лишних скриптов, рекомендую для комплексной оптимизации (подробнее на wpshop.ru).
3. Логика подключения стилей и скриптов в коде темы и плагинов
Иногда проще вручную проверить, где и как подключаются ресурсы, и вынести условие, чтобы подключать их только там, где нужно.
Удаление неиспользуемых CSS и JS программно: примеры кода
Рассмотрим, как написать функцию для условного отключения стилей и скриптов в WordPress. Допустим, тема или плагин подключают глобально файл example-style.css и скрипт example-script.js, которые нужны только на главной странице.
function wptalk_dequeue_unused_assets() {
if ( !is_front_page() ) {
wp_dequeue_style('example-style');
wp_deregister_style('example-style');
wp_dequeue_script('example-script');
wp_deregister_script('example-script');
}
}
add_action('wp_enqueue_scripts', 'wptalk_dequeue_unused_assets', 100);
Объяснение:
wp_dequeue_styleиwp_dequeue_scriptснимают подключение стилей и скриптов;wp_deregister_styleиwp_deregister_scriptудаляют регистрацию, чтобы исключить повторное подключение;- Функция срабатывает на хук
wp_enqueue_scriptsс низким приоритетом (100), чтобы выполнение было после регистрации всех ресурсов.
Таким образом, эти файлы будут загружаться только на главной странице, а на остальных — отключаться.
Использование плагина Asset CleanUp для управления загрузкой ресурсов
Asset CleanUp — отличный инструмент для детального контроля загрузки стилей и скриптов без правки кода.
Как пользоваться:
- Установите и активируйте плагин из репозитория WordPress.
- Перейдите на любую страницу админки, где редактируется пост или страница.
- Внизу или в боковой панели вы увидите список всех подключённых CSS и JS.
- Отметьте те, которые не нужны на данной странице, чтобы отключить их.
Плагин также позволяет массово отключать ресурсы для всего сайта или по типам страниц. Это очень удобно для тонкой настройки и ускорения сайта.
Оптимизация загрузки CSS и JS через отложенную загрузку и объединение
Удаление неиспользуемых ресурсов — это только часть оптимизации. Чтобы ещё больше повысить производительность, можно применять техники:
Отложенная загрузка JavaScript
Используйте атрибуты defer или async для скриптов, чтобы не блокировать рендеринг страницы. Например, с помощью фильтра WordPress можно добавить defer:
function wptalk_add_defer_attribute($tag, $handle) {
if ('example-script' === $handle) {
return str_replace(' src', ' defer src', $tag);
}
return $tag;
}
add_filter('script_loader_tag', 'wptalk_add_defer_attribute', 10, 2);
Объединение и минификация CSS и JS
Плагины кеширования и оптимизации, например, WP Rocket, Autoptimize, позволяют объединять и минифицировать стили и скрипты, что уменьшает количество запросов и общий размер файлов.
Однако будьте осторожны с объединением, чтобы не вызвать конфликтов и не сломать функциональность.
Сложности и подводные камни при удалении неиспользуемых CSS и JS
Несмотря на очевидные плюсы, отключение ресурсов требует аккуратности:
- Некоторые скрипты нужны для работы элементов интерфейса, и их отключение может привести к ошибкам или сломанному дизайну;
- В темах и плагинах иногда сложно понять, где именно используется тот или иной файл;
- При обновлении темы или плагинов логика подключения может измениться, и потребуется повторно проверять настройки;
- Автоматические инструменты иногда не всегда точно определяют, что не используется, поэтому рекомендуется тестировать сайт после изменений.
Рекомендуется сначала делать изменения на тестовом сайте или использовать staging-среду.
Заключение: комплексный подход к удалению неиспользуемых CSS и JS
Для эффективного удаления неиспользуемых CSS и JS в WordPress лучше комбинировать несколько способов:
- Анализировать загрузку через DevTools и плагины;
- Использовать плагины, например, Asset CleanUp или Clearfy Pro (подробнее);
- Внедрять условное подключение ресурсов в коде с помощью
wp_dequeue_*; - Применять техники отложенной загрузки и объединения;
- Регулярно тестировать сайт после оптимизации.
Такой системный подход поможет значительно ускорить сайт, улучшить его поведенческие метрики и сохранить корректную работу всех элементов.