Удаление CSS и JS из отдельных страниц WordPress для ускорения загрузки

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

Почему важно отключать ненужные CSS и JS на отдельных страницах

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

• Увеличению времени загрузки страниц;
• Росту количества HTTP-запросов;
• Ухудшению показателей Core Web Vitals;
• Потере позиций в поисковых системах из-за медленной скорости.

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

Метод программного отключения CSS и JS на отдельных страницах

Для отключения скриптов и стилей в WordPress используется функция wp_dequeue_script и wp_dequeue_style. Важный момент — отключать нужно после того, как они были зарегистрированы или поставлены в очередь, поэтому обычно такой код помещают в хук wp_enqueue_scripts с приоритетом больше 20.

Рассмотрим пример, как отключить скрипт и стиль для всех страниц, кроме страницы с ID 42:

function wpdevelop_dequeue_assets() {
    if (!is_page(42)) {
        wp_dequeue_style('plugin-style-handle');
        wp_dequeue_script('plugin-script-handle');
    }
}
add_action('wp_enqueue_scripts', 'wpdevelop_dequeue_assets', 25);

Здесь plugin-style-handle и plugin-script-handle — это идентификаторы стилей и скриптов, которые нужно отключить. Их можно узнать в коде плагина или темы, либо через консоль браузера.

Как узнать handle стилей и скриптов

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

function wpdevelop_list_enqueue() {
    global $wp_scripts, $wp_styles;
    error_log('Scripts:');
    foreach ($wp_scripts->queue as $handle) {
        error_log($handle);
    }
    error_log('Styles:');
    foreach ($wp_styles->queue as $handle) {
        error_log($handle);
    }
}
add_action('wp_enqueue_scripts', 'wpdevelop_list_enqueue', 100);

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

Как отключать CSS и JS по условию — примеры

Отключение на страницах архивов и главной

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

function wpdevelop_conditional_dequeue() {
    if (is_home() || is_archive()) {
        wp_dequeue_style('style-handle');
        wp_dequeue_script('script-handle');
    }
}
add_action('wp_enqueue_scripts', 'wpdevelop_conditional_dequeue', 25);

Отключение для определённых типов постов

Иногда стили нужны только для определённого типа записей:

function wpdevelop_dequeue_for_post_type() {
    if (!is_singular('product')) {
        wp_dequeue_style('product-style');
        wp_dequeue_script('product-script');
    }
}
add_action('wp_enqueue_scripts', 'wpdevelop_dequeue_for_post_type', 25);

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

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

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

Практические советы по отключению CSS/JS без ошибок

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

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

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

Заключение

Удаление ненужных CSS и JS из отдельных страниц — важный шаг в оптимизации WordPress сайта. Это снижает нагрузку на сервер, уменьшает количество запросов и ускоряет загрузку. Используйте функции wp_dequeue_style и wp_dequeue_script с условными тегами, либо удобные плагины, например, Asset CleanUp или Clearfy Pro. Главное — тщательно тестировать и не отключать критичные для сайта скрипты.