Одной из важных задач оптимизации производительности сайта на WordPress является удаление ненужных CSS и JavaScript файлов, которые загружаются на страницах без необходимости. Это уменьшает объём загружаемых данных, сокращает время отклика и улучшает пользовательский опыт.
Почему важно удалять лишние стили и скрипты
Современные темы и плагины часто подключают большое количество стилей и скриптов, которые нужны только для определённых страниц или функций. Например, стили слайдера на странице блога, но не на главной, или скрипты формы обратной связи, которые загружаются на всех страницах, хотя форма есть только на одной.
Удаление таких ресурсов позволяет:
- Сократить время загрузки страницы;
- Уменьшить количество HTTP-запросов;
- Избавиться от конфликтов CSS и JS;
- Снизить нагрузку на сервер и улучшить SEO.
Однако важно делать это аккуратно, чтобы не сломать функциональность сайта.
Как определить, какие стили и скрипты можно удалить
Для начала нужно понять, какие стили и скрипты загружаются на странице. Для этого можно использовать инструменты разработчика в браузере (Google Chrome DevTools, Firefox Developer Tools) или плагины:
- Asset CleanUp — позволяет визуально отключать загрузку скриптов и стилей на страницах;
- Plugins Gone Wild — помогает выявлять плагины, которые грузят лишние ресурсы;
- Встроенные консоли разработчика показывают список подключенных CSS и JS и их размер.
После анализа нужно составить список ресурсов, которые можно отключить на определённых страницах.
Динамическое удаление скриптов и стилей через код в functions.php
Самый надёжный и точный способ — использовать хуки WordPress для отключения загрузки ресурсов. Для этого применяется хук wp_enqueue_scripts с приоритетом, например, 100, чтобы гарантированно удалить после регистрации.
Пример функции для удаления стилей и скриптов на определённых страницах:
function wpdo_deregister_assets() {
if (is_front_page()) {
// Отключаем стили и скрипты, которые не нужны на главной
wp_dequeue_style('plugin-slider-style');
wp_deregister_style('plugin-slider-style');
wp_dequeue_script('plugin-slider-script');
wp_deregister_script('plugin-slider-script');
}
if (is_page('contacts')) {
// Отключаем скрипты, которые не нужны на странице контактов
wp_dequeue_script('some-other-script');
wp_deregister_script('some-other-script');
}
}
add_action('wp_enqueue_scripts', 'wpdo_deregister_assets', 100);В этом примере мы проверяем, на какой странице находимся и отключаем ресурсы плагинов или тем, которые не нужны.
Обратите внимание, что для удаления нужно знать точные имена (handle) стилей и скриптов — их можно узнать через исходный код страницы или функцию wp_print_scripts().
Как найти handle стилей и скриптов
Если вы не знаете, как называется handle нужного стиля или скрипта, можно вывести в лог все зарегистрированные ресурсы:
function wpdo_list_all_scripts_and_styles() {
global $wp_scripts, $wp_styles;
error_log('--- Список скриптов ---');
foreach ($wp_scripts->registered as $handle => $script) {
error_log($handle);
}
error_log('--- Список стилей ---');
foreach ($wp_styles->registered as $handle => $style) {
error_log($handle);
}
}
add_action('wp_enqueue_scripts', 'wpdo_list_all_scripts_and_styles', 0);Логи можно увидеть в debug.log при включённом WP_DEBUG_LOG.
Особенности удаления ресурсов плагина Clearfy Pro
Если вы используете Clearfy Pro, то в нём есть удобные настройки для отключения ненужных скриптов и стилей без кода. В разделе оптимизации можно настроить отключение стилей и скриптов на выбранных страницах.
Это особенно удобно для пользователей, не желающих писать код, но желающих быстро оптимизировать загрузку.
Удаление Gutenberg-стилей на фронтенде
По умолчанию WordPress загружает стили редактора Gutenberg на всех страницах, даже если блоки редактора не используются. Чтобы отключить их, добавьте в functions.php:
function wpdo_remove_block_library_css() {
if (!is_admin()) {
wp_dequeue_style('wp-block-library');
wp_dequeue_style('wp-block-library-theme');
wp_dequeue_style('wc-block-style'); // Если установлен WooCommerce
}
}
add_action('wp_enqueue_scripts', 'wpdo_remove_block_library_css', 100);Это легко уменьшит вес страницы, если вы не используете блоки Гутенберга на фронтенде.
Автоматизация через плагин WPRemark для управления скриптами
Плагин WPRemark позволяет не только массово управлять комментариями, но и облегчить контроль за подключением скриптов, внедряя правила по страницам и ролям пользователей.
Можно настроить отключение скриптов для гостей, ускоряя загрузку для новых посетителей.
Практические советы и рекомендации
- Всегда тестируйте сайт после отключения стилей и скриптов, чтобы не сломать дизайн и функционал.
- Используйте условные теги WordPress (
is_page(),is_single(),is_front_page()и др.) для точечной оптимизации. - Если скрипты грузятся через inline-код или непосредственно в шаблонах — рассмотрите возможность их перемещения в отдельные файлы и последующего отключения.
- Регулярно проверяйте новые плагины на предмет лишних подключений.
- Используйте профайлеры и инструменты мониторинга скорости (GTmetrix, PageSpeed Insights).
Пример комплексной функции для удаления стилей и скриптов
function wpdo_deregister_unneeded_assets() {
// Отключаем слайдер на всех страницах, кроме главной
if (!is_front_page()) {
wp_dequeue_style('plugin-slider-style');
wp_deregister_style('plugin-slider-style');
wp_dequeue_script('plugin-slider-script');
wp_deregister_script('plugin-slider-script');
}
// Отключаем стили форума на страницах без форума
if (!is_page('forum')) {
wp_dequeue_style('forum-style');
wp_deregister_style('forum-style');
wp_dequeue_script('forum-script');
wp_deregister_script('forum-script');
}
// Убираем Gutenberg стили на фронтенде
if (!is_admin()) {
wp_dequeue_style('wp-block-library');
wp_dequeue_style('wp-block-library-theme');
}
}
add_action('wp_enqueue_scripts', 'wpdo_deregister_unneeded_assets', 100);