Знакомо: сайт на WordPress готов, свёрстан, плагины расставлены по местам. Запускаете PageSpeed Insights, а там оранжевый. Или красный. Виновник почти всегда один и тот же, CSS. Десятки файлов стилей от плагинов и темы выстраиваются в очередь и блокируют рендеринг. Страница тормозит не потому, что она тяжёлая, а потому что браузер ждёт.

Проблема глубже, чем кажется. Плагин подключает свой style.css на каждой странице сайта, даже там, где его функционал не используется. Форма обратной связи висит только на странице контактов, а её стили грузятся везде. Слайдер стоит на главной, а четыре его CSS-файла висят на всех URL без исключения. Это десятки лишних килобайт и запросов на каждом просмотре.

Отключить лишние стили можно без установки дополнительных плагинов, через functions.php. И это не костыль, а штатный механизм WordPress, который работает с версии 2.6. Ниже, полное руководство: от поиска идентификатора до асинхронной загрузки сборного файла.

💡 Быстрый обзор:

• Как найти идентификатор (handle) любого CSS-файла плагина через атрибут id в исходном коде страницы
• Как отключить стили через связку wp_dequeue_style + wp_deregister_style с правильным приоритетом
• Как собрать отключённые стили в один файл и подключить его асинхронно через media print, без потери оформления и без блокировки рендеринга

Как определить идентификатор CSS-файла плагина

WordPress назначает каждому подключаемому файлу стилей уникальный идентификатор, handle. Именно он нужен функциям wp_dequeue_style (документация) и wp_deregister_style (кодекс). Без правильного handle ничего не отключится.

Способ надёжнее всего один: смотреть в HTML-код страницы. Никакие «угадайки» по названию плагина не работают, разработчик плагина называет handle как хочет, и логика там бывает неочевидной.

Откройте исходный код страницы (Ctrl+U или view-source: перед URL) и найдите тег <link>, который подключает CSS нужного плагина. Например, для Elementor он выглядит так:

1
<link href="/wp-content/plugins/elementor/assets/lib/animations/animations.min.css"
2
      id="elementor-animations-css" media="all" rel="stylesheet" type="text/css">

Смотрите на атрибут id. WordPress формирует его по схеме: **handle плагина + суффикс **-css. В примере выше id="elementor-animations-css", значит handle равен elementor-animations. Отбросьте -css с конца значения id, и получите точный handle для отключения. Работает для любых плагинов и тем.

Бывают случаи, когда разработчик вообще не указывает id у <link>. Тогда найдите соседние элементы с id или проверьте <script> того же плагина: у скриптов суффикс -js, а handle часто совпадает со стилевым. Не нашли, откройте исходный код плагина в /wp-content/plugins/... и найдите вызов wp_enqueue_style(): первый аргумент и есть handle.

Отключение стилей: wp_dequeue_style и wp_deregister_style

WordPress даёт две функции для управления стилями. Разница принципиальная:

На практике обе функции используют вместе: функция wp_dequeue_style снимает с очереди, а следом wp_deregister_style в кодексе гарантирует, что этот handle никто не подключит повторно по цепочке зависимостей.

Базовый код для functions.php

Код ниже отключает стили двух плагинов: full-screen-search и prettyPhoto. Высокий приоритет 9999 гарантирует, что отключение сработает ПОСЛЕ того, как плагин зарегистрирует и добавит свои стили в очередь. Без повышенного приоритета функция может выполниться раньше плагина, и отключать будет просто нечего.

1
/**
2
 * Отключаем CSS-файлы конкретных плагинов.
3
 * Приоритет 9999 — выполняется последним в цепочке wp_enqueue_scripts.
4
 */
5
function sdstudio_dequeue_plugin_styles() {
6
    // Снимаем с очереди
7
    wp_dequeue_style( 'full-screen-search' );
8
    wp_dequeue_style( 'prettyPhoto' );
9
 
10
    // Удаляем регистрацию — чтобы никто не подключил повторно
11
    wp_deregister_style( 'full-screen-search' );
12
    wp_deregister_style( 'prettyPhoto' );
13
}
14
add_action( 'wp_enqueue_scripts', 'sdstudio_dequeue_plugin_styles', 9999 );

Что важно: хук wp_enqueue_scripts, правильное место для этой операции. Не wp_head, не init, не wp_loaded. Именно на wp_enqueue_scripts WordPress собирает очередь стилей, и отключать их нужно здесь же, но позже плагинов.

Почему приоритет 9999, а не 11 или 99

Плагины регистрируют стили с приоритетом по умолчанию 10. Но некоторые ставят 20, 50 или даже 100, когда у них сложная цепочка зависимостей. Приоритет 9999 перекрывает практически любой реальный сценарий. Единственный минус: если два ваших собственных сниппета имеют одинаковый приоритет 9999, порядок их выполнения не определён. На практике это редкость, а ставка 11 регулярно подводит с «упрямыми» плагинами.

Дополнительно можно зарегистрировать отключение на хуке wp_head с тем же приоритетом, как страховку для стилей, которые плагин подключает в обход wp_enqueue_scripts напрямую в <head>:

1
add_action( 'wp_head', 'sdstudio_dequeue_plugin_styles', 9999 );

Но это fallback. В норме хватает одного wp_enqueue_scripts.

Как отключить ВСЕ стили конкретного плагина

У многих плагинов не один CSS-файл, а несколько. Contact Form 7, WooCommerce, Elementor, каждый тащит по 3-5 файлов стилей. Отключать их по одному, рутина. Просканируйте код страницы и соберите все handle с одинаковым префиксом: они обычно группируются.

Пример для Elementor, типичный набор handle: elementor-frontend, elementor-animations, elementor-icons и elementor-pro. Все четыре, в один вызов:

1
function sdstudio_dequeue_elementor_styles() {
2
    $handles = [
3
        'elementor-frontend',
4
        'elementor-animations',
5
        'elementor-icons',
6
        'elementor-pro',
7
    ];
8
    foreach ( $handles as $handle ) {
9
        wp_dequeue_style( $handle );
10
        wp_deregister_style( $handle );
11
    }
12
}
13
add_action( 'wp_enqueue_scripts', 'sdstudio_dequeue_elementor_styles', 9999 );

Что делать с отключёнными стилями

Отключить, полдела. Если просто выпилить CSS плагина, на странице всё сломается: формы перекосятся, слайдеры развалятся, иконки пропадут. Стили нужны, но не ценой блокировки рендеринга.

Правильный подход: собрать отключённые стили в ОДИН компактный файл и загрузить его без блокировки. Алгоритм:

• Отключили стили плагинов через wp_dequeue_style + wp_deregister_style.
• Скопировали содержимое КАЖДОГО отключённого CSS-файла. Берите из папки плагина, а не из инспектора браузера, там уже минифицированная сборка, с которой неудобно работать.
• Объединили в один файл, например /wp-content/themes/ваша-тема/css/dequeued-plugins.css.
• Подключили с атрибутом media="print" и onload="this.media='all'". Браузер скачает файл асинхронно, не блокируя рендеринг, и применит стили после загрузки.

Код подключения сборного файла

1
/**
2
 * Подключаем сборный CSS-файл отключённых стилей асинхронно.
3
 */
4
function sdstudio_enqueue_dequeued_styles() {
5
    wp_enqueue_style(
6
        'sdstudio-dequeued',
7
        get_stylesheet_directory_uri() . '/css/dequeued-plugins.css',
8
        [],
9
        filemtime( get_stylesheet_directory() . '/css/dequeued-plugins.css' )
10
    );
11
}
12
add_action( 'wp_enqueue_scripts', 'sdstudio_enqueue_dequeued_styles', 1 );

Приоритет 1 здесь не случаен: сборный файл должен встать в очередь ДО того, как исполнятся отключающие функции с приоритетом 9999. Иначе WordPress может не распознать зависимость и выбросить стили из очереди полностью.

Асинхронная загрузка без плагина

Чтобы браузер не ждал CSS-файл перед отрисовкой страницы, добавьте атрибуты media="print" и onload через фильтр style_loader_tag:

1
/**
2
 * Меняем media="print" на onload-переключение для асинхронной загрузки CSS.
3
 */
4
function sdstudio_async_css( $html, $handle ) {
5
    if ( 'sdstudio-dequeued' !== $handle ) {
6
        return $html;
7
    }
8
    return str_replace(
9
        "media='all'",
10
        "media='print' onload=\"this.media='all'; this.onload=null;\"",
11
        $html
12
    );
13
}
14
add_filter( 'style_loader_tag', 'sdstudio_async_css', 10, 2 );

Механика простая: браузер видит media="print" и не блокирует рендеринг, печатный медиатип не влияет на экран. После загрузки файла срабатывает onload, переключает media на all, и стили применяются мгновенно. Пользователь видит оформленную страницу без задержки на старте.

Когда НЕ надо отключать стили через functions.php

Метод с wp_dequeue_style мощный, но не универсальный. Вот три случая, когда он либо бесполезен, либо вреден:

• Стили встроены инлайн через wp_add_inline_style. Такие стили живут внутри тега <style>, у них нет отдельного handle. Отключать придётся через wp_deregister_script родительского скрипта или искать хук, которым плагин добавляет инлайн-стили.

• Плагин вставляет CSS напрямую в <head> через echo. Обходной манёвр, который используют некоторые старые плагины. Здесь поможет только поиск конкретного хука или, в крайнем случае, буферизация вывода.

• Вы работаете с чужой темой, которая сама управляет зависимостями. Некоторые темы, особенно премиум-сегмента, используют собственный загрузчик ассетов в обход WP_Styles. Перед написанием кода загляните в header.php темы: если видите прямой echo '<link...', система deregister не сработает.

В этих случаях лучше использовать специализированные плагины вроде Asset CleanUp или Perfmatters, они работают на уровне URL и отключают ассеты постранично, без копания в хуках.

Посмотрите видео-руководство по отключению стилей: весь процесс от поиска handle до проверки результата за 8 минут.

⁉️🤔 Частые вопросы

Нужно ли отключать CSS-стили административной панели (*/wp-admin/*)?

Нет. Стили, подключаемые через хук admin_enqueue_scripts, не влияют на фронтенд и в отключении не нуждаются. Более того, попытка deregister'ить админ-стили через wp_enqueue_scripts ни на что не повлияет, они регистрируются отдельно. Если админка тормозит, проблема обычно в другом: тяжёлые скрипты аналитики в дашборде, внешние шрифты Google Fonts или Heartbeat API.

Безопасно* ли удалять -css из атрибута id для получения handle? Работает ли это правило всегда?*

Да, суффикс -css добавляется ядром WordPress в методе WP_Dependencies::enqueue() с версии 2.6, это неизменный механизм. Но есть нюанс: если разработчик плагина вручную присвоил тегу <link> кастомный id, суффикса может не быть. В таком случае handle, это второй аргумент вызова wp_enqueue_style() в исходном коде плагина. Правило с -css покрывает подавляющее большинство случаев.

Можно ли отключить стили только на определённых страницах?

Да, и это правильный production-подход. Оберните вызов wp_dequeue_style в условный тег WordPress: is_front_page() для главной, is_single() для записей, is_page() для страниц, is_archive() для архивов. Для исключения по ID поста используйте ! is_single(123). Условный dequeue на конкретных URL снижает нагрузку на всём сайте, а не только там, где плагин не нужен.

Что будет, если вызвать wp_dequeue_style для handle, который не зарегистрирован?

Ничего. Функция молча завершится без ошибок, PHP-нотисов и предупреждений. Это безопасно. Но не стоит полагаться на это как на стратегию: собирайте handle только с реальных страниц, иначе код обрастает «мёртвыми» строками, которые ничего не делают и только замусоривают functions.php.

Как проверить, что стиль действительно отключился, а не просто перестал применяться из-за кеша?

Откройте исходный код страницы (Ctrl+U), а не панель разработчика. Найдите <link> с handle плагина или его id. Если тега нет, стиль отключён. Кеш браузера на исходный код не влияет, в отличие от вкладки Network в DevTools. Дополнительно можно сбросить кеш WordPress: любой кеширующий плагин → Purge All.

Что важно запомнить про отключение CSS в WordPress

Три главных вывода из всего руководства:

• Handle, ключ ко всему. Без правильного идентификатора ни одна функция не сработает. Всегда ищите handle через атрибут id в исходном коде страницы. Правило с отбрасыванием -css работает практически всегда, а для исключений, исходный код плагина.

• Dequeue + Deregister, стандартная связка. Первая функция снимает стиль с очереди, вторая гарантирует, что он не всплывёт повторно через цепочку зависимостей. Приоритет 9999 страхует от любых «упрямых» плагинов, а хук wp_enqueue_scripts, единственно правильное место для этой операции.

• Отключённые стили не должны пропадать. Соберите их в один файл и подключите асинхронно через media="print" + onload. Пользователь получает оформленную страницу, а браузер не ждёт CSS перед отрисовкой.

Попробуйте на одном-двух плагинах сегодня. Пара минут в functions.php, и результат сразу виден в PageSpeed Insights. Начните с самого «тяжёлого» плагина, у которого больше всего CSS-файлов: отключите, соберите, замерьте скорость. Скорее всего, одного этого хватит, чтобы уйти из оранжевой зоны в зелёную.