Как использовать функции для удаления стилей и скриптов в отдельных страницах WordPress

Диагностика проблемы: когда и зачем удалять стили и скрипты на отдельных страницах

Одной из частых проблем при разработке тем и плагинов WordPress является избыточная загрузка CSS и JS-файлов на страницах, где они не нужны. Это ведёт к замедлению загрузки сайта, ухудшению показателей Core Web Vitals и излишней нагрузке на сервер и браузер.

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

Чтобы выявить лишние CSS и JS, воспользуйтесь инструментами браузера (Chrome DevTools, вкладка Network) и плагинами типа Clearfy Pro для анализа подключений.

Пошаговое решение: как удалить стили и скрипты на конкретных страницах через functions.php

WordPress позволяет с помощью хуков wp_enqueue_scripts управлять подключением ресурсов. Удалять стили и скрипты нужно функцией wp_dequeue_style и wp_dequeue_script.

Пример: отключаем стили и скрипты плагина слайдера на всех страницах, кроме главной.

function custom_dequeue_assets() {
    if (!is_front_page()) {
        wp_dequeue_style('slider-style');
        wp_dequeue_script('slider-script');
    }
}
add_action('wp_enqueue_scripts', 'custom_dequeue_assets', 20);

Объяснение:

• is_front_page() — проверка, что мы на главной странице;
• wp_dequeue_style('slider-style') — удаляет зарегистрированный стиль с идентификатором slider-style;
• wp_dequeue_script('slider-script') — удаляет скрипт slider-script.

Чтобы узнать идентификаторы стилей и скриптов, смотрите в код темы и плагинов, или используйте wp_print_scripts и wp_print_styles для дебага.

Удаление стилей WooCommerce на страницах без магазина

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

function dequeue_woocommerce_styles_scripts() {
    if (!is_woocommerce() && !is_cart() && !is_checkout()) {
        wp_dequeue_style('woocommerce-general');
        wp_dequeue_script('wc-cart-fragments');
    }
}
add_action('wp_enqueue_scripts', 'dequeue_woocommerce_styles_scripts', 99);

Это уменьшит нагрузку на страницы блога и другие разделы.

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

Чтобы убедиться, что лишние стили и скрипты удалены:

• Откройте страницу, где вы отключаете ресурсы (например, внутреннюю страницу блога);
• Откройте Chrome DevTools, вкладку Network, отфильтруйте по CSS и JS;
• Проверьте, что идентификаторы и URL отключённых файлов не загружаются;
• Проверьте визуально и функционально, что сайт работает корректно без этих ресурсов;
• Для точного контроля можно использовать плагины типа Query Monitor.

Частые ошибки и как их исправить

• Ошибка: неправильный идентификатор стиля или скрипта.
  Решение: проверьте точное имя в wp_enqueue_style или wp_enqueue_script в исходном коде темы/плагина.
• Ошибка: деактивация ресурсов до их регистрации.
  Решение: ставьте приоритет хука не ниже 20, чтобы гарантировать, что ресурсы уже добавлены.
• Ошибка: удаление скриптов, которые необходимы для работы страницы.
  Решение: тестируйте функционал после отключения, при необходимости откатывайте изменения.
• Ошибка: конфликт с кэшированием.
  Решение: очистите кэш браузера и кэш плагинов, если используются.

Практические советы по безопасности и производительности

• Используйте wp_dequeue_style/script только для ресурсов, зарегистрированных через WordPress API, не пытайтесь удалять сторонние подключения напрямую в шаблонах.
• Старайтесь не отключать глобальные стили, если не уверены, что это не сломает внешний вид.
• Для оптимизации кэшируйте результаты проверки условий (например, для сложных условий страниц).
• Если много ресурсов нужно отключать, рассмотрите использование специализированных плагинов или Clearfy Pro с возможностью управления подключениями.

Сравнение способов удаления стилей и скриптов