Знайомо: сайт на 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-файлів: вимкніть, зберіть, заміряйте швидкість. Швидше за все, одного цього вистачить, щоб вийти з помаранчевої зони в зелену.