Brzmi znajomo: strona na WordPress gotowa, zbudowana, wtyczki porozmieszczane na swoich miejscach. Uruchamia Pan PageSpeed Insights, a tam pomarańczowy. Albo czerwony. Winowajca jest prawie zawsze ten sam: CSS. Dziesiątki plików stylów od wtyczek i motywu ustawiają się w kolejce i blokują renderowanie. Strona zwalnia nie dlatego, że jest ciężka, tylko dlatego, że przeglądarka czeka.

Problem jest głębszy, niż się wydaje. Wtyczka podłącza swój style.css na każdej stronie serwisu, nawet tam, gdzie jej funkcjonalność nie jest używana. Formularz kontaktowy wisi tylko na stronie kontaktowej, a jego style ładują się wszędzie. Slider stoi na głównej, a jego cztery pliki CSS wiszą na wszystkich URL-ach bez wyjątku. To dziesiątki zbędnych kilobajtów i zapytań przy każdym odsłonie.

Zbędne style można wyłączyć bez instalowania dodatkowych wtyczek, przez functions.php. I nie jest to proteza, tylko standardowy mechanizm WordPressa, który działa od wersji 2.6. Poniżej pełny poradnik: od znalezienia identyfikatora po asynchroniczne ładowanie scalonego pliku.

💡 Szybki przegląd:

• Jak znaleźć identyfikator (handle) dowolnego pliku CSS wtyczki przez atrybut id w kodzie źródłowym strony
• Jak wyłączyć style przez parę wp_dequeue_style + wp_deregister_style z właściwym priorytetem
• Jak zebrać wyłączone style w jeden plik i podłączyć go asynchronicznie przez media print, bez utraty wyglądu i bez blokowania renderowania

Jak ustalić identyfikator pliku CSS wtyczki

WordPress przypisuje każdemu podłączanemu plikowi stylów unikalny identyfikator, handle. Właśnie on jest potrzebny funkcjom wp_dequeue_style (dokumentacja) i wp_deregister_style (kodeks). Bez poprawnego handle nic się nie wyłączy.

Jest tylko jeden naprawdę niezawodny sposób: zajrzeć do kodu HTML strony. Żadne „zgadywanki" po nazwie wtyczki nie działają, twórca wtyczki nazywa handle jak chce, a logika bywa tam nieoczywista.

Proszę otworzyć kod źródłowy strony (Ctrl+U lub view-source: przed URL-em) i znaleźć tag <link>, który podłącza CSS potrzebnej wtyczki. Na przykład dla Elementora wygląda on tak:

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">

Proszę spojrzeć na atrybut id. WordPress tworzy go według schematu: **handle wtyczki + przyrostek **-css. W przykładzie powyżej id="elementor-animations-css", zatem handle to elementor-animations. Proszę odrzucić -css z końca wartości id, a otrzyma Pan dokładny handle do wyłączenia. Działa to dla dowolnych wtyczek i motywów.

Zdarzają się przypadki, gdy twórca w ogóle nie podaje id w <link>. Wtedy proszę znaleźć sąsiednie elementy z id lub sprawdzić <script> tej samej wtyczki: skrypty mają przyrostek -js, a handle często pokrywa się z tym od stylów. Jeśli się nie uda, proszę otworzyć kod źródłowy wtyczki w /wp-content/plugins/... i znaleźć wywołanie wp_enqueue_style(): pierwszy argument to właśnie handle.

Wyłączanie stylów: wp_dequeue_style i wp_deregister_style

WordPress daje dwie funkcje do zarządzania stylami. Różnica jest zasadnicza:

W praktyce obu funkcji używa się razem: funkcja wp_dequeue_style zdejmuje z kolejki, a zaraz potem wp_deregister_style w kodeksie gwarantuje, że tego handle nikt nie podłączy ponownie w łańcuchu zależności.

Podstawowy kod dla functions.php

Poniższy kod wyłącza style dwóch wtyczek: full-screen-search i prettyPhoto. Wysoki priorytet 9999 gwarantuje, że wyłączenie zadziała PO tym, jak wtyczka zarejestruje i doda swoje style do kolejki. Bez podwyższonego priorytetu funkcja może wykonać się wcześniej niż wtyczka i nie będzie po prostu czego wyłączać.

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 );

Co ważne: hook wp_enqueue_scripts to właściwe miejsce dla tej operacji. Nie wp_head, nie init, nie wp_loaded. Właśnie na wp_enqueue_scripts WordPress zbiera kolejkę stylów i należy je wyłączać w tym samym miejscu, ale później niż wtyczki.

Dlaczego priorytet 9999, a nie 11 czy 99

Wtyczki rejestrują style z domyślnym priorytetem 10. Jednak niektóre ustawiają 20, 50, a nawet 100, gdy mają złożony łańcuch zależności. Priorytet 9999 pokrywa praktycznie każdy realny scenariusz. Jedyna wada: jeśli dwa Pana własne snippety mają ten sam priorytet 9999, kolejność ich wykonania jest nieokreślona. W praktyce to rzadkość, a wartość 11 regularnie zawodzi przy „opornych" wtyczkach.

Dodatkowo można zarejestrować wyłączenie na hooku wp_head z tym samym priorytetem, jako zabezpieczenie dla stylów, które wtyczka podłącza z pominięciem wp_enqueue_scripts bezpośrednio w <head>:

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

Jest to jednak fallback. Zazwyczaj wystarczy jeden wp_enqueue_scripts.

Jak wyłączyć WSZYSTKIE style konkretnej wtyczki

Wiele wtyczek ma nie jeden plik CSS, a kilka. Contact Form 7, WooCommerce, Elementor, każda ciągnie po 3-5 plików stylów. Wyłączanie ich pojedynczo to rutyna. Proszę przeskanować kod strony i zebrać wszystkie handle z tym samym prefiksem: zazwyczaj są zgrupowane.

Przykład dla Elementor, typowy zestaw handle: elementor-frontend, elementor-animations, elementor-icons oraz elementor-pro. Wszystkie cztery, w jednym wywołaniu:

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 );

Co zrobić z wyłączonymi stylami

Wyłączenie to połowa sukcesu. Jeśli po prostu wytnie Pan CSS wtyczki, na stronie wszystko się rozsypie: formularze się przekrzywią, slidery rozpadną, ikony znikną. Style są potrzebne, ale nie kosztem blokowania renderowania.

Właściwe podejście: zebrać wyłączone style w JEDEN kompaktowy plik i załadować go bez blokowania. Algorytm:

• Wyłączył Pan style wtyczek przez wp_dequeue_style + wp_deregister_style.
• Proszę skopiować zawartość KAŻDEGO wyłączonego pliku CSS. Należy brać z folderu wtyczki, a nie z inspektora przeglądarki, tam jest już zminifikowana wersja, z którą niewygodnie się pracuje.
• Połączyć w jeden plik, na przykład /wp-content/themes/ваша-тема/css/dequeued-plugins.css.
• Podłączyć z atrybutem media="print" oraz onload="this.media='all'". Przeglądarka załaduje plik asynchronicznie, nie blokując renderowania, i zastosuje style po załadowaniu.

Kod podłączenia zbiorczego pliku

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 );

Priorytet 1 nie jest tu przypadkowy: zbiorczy plik musi trafić do kolejki ZANIM wykonają się funkcje wyłączania z priorytetem 9999. W przeciwnym razie WordPress może nie rozpoznać zależności i całkowicie usunąć style z kolejki.

Asynchroniczne ładowanie bez wtyczki

Aby przeglądarka nie czekała na plik CSS przed wyświetleniem strony, proszę dodać atrybuty media="print" oraz onload przez filtr 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 );

Mechanika jest prosta: przeglądarka widzi media="print" i nie blokuje renderowania, typ medium „druk" nie wpływa na ekran. Po załadowaniu pliku uruchamia się onload, przełącza media na all i style są stosowane natychmiast. Użytkownik widzi ostylowaną stronę bez opóźnienia na starcie.

Kiedy NIE wyłączać stylów przez functions.php

Metoda z wp_dequeue_style jest potężna, ale nie uniwersalna. Oto trzy przypadki, kiedy jest albo bezradna, albo szkodliwa:

• Style zostały osadzone inline przez wp_add_inline_style. Takie style znajdują się wewnątrz znacznika <style>, nie mają osobnego uchwytu (handle). Wyłączenie będzie wymagało użycia wp_deregister_script dla skryptu nadrzędnego lub znalezienia haka, którym wtyczka dodaje style inline.

• Wtyczka wstawia CSS bezpośrednio do <head> przez echo. Manewr obchodzący system, stosowany przez niektóre starsze wtyczki. Tutaj pomoże tylko znalezienie konkretnego haka lub, w ostateczności, buforowanie wyjścia.

• Pracują Państwo z obcym motywem, który sam zarządza zależnościami. Niektóre motywy, zwłaszcza z segmentu premium, używają własnego loadera zasobów z pominięciem WP_Styles. Zanim napiszą Państwo kod, proszę zajrzeć do header.php motywu: jeśli widzą Państwo bezpośrednie echo '<link...', system deregister nie zadziała.

W tych przypadkach lepiej użyć specjalistycznych wtyczek, takich jak Asset CleanUp lub Perfmatters, które działają na poziomie URL i wyłączają zasoby dla poszczególnych stron, bez zagłębiania się w haki.

Proszę obejrzeć poradnik wideo dotyczący wyłączania stylów: cały proces od znalezienia uchwytu (handle) do weryfikacji wyniku w 8 minut.

⁉️🤔 Często zadawane pytania

Czy trzeba wyłączać style CSS panelu administracyjnego (*/wp-admin/*)?

Nie. Style podłączane przez hak admin_enqueue_scripts nie wpływają na frontend i nie wymagają wyłączania. Co więcej, próba deregister stylów administracyjnych przez wp_enqueue_scripts nie przyniesie żadnego efektu, są one rejestrowane oddzielnie. Jeśli panel administracyjny działa wolno, problem zwykle leży gdzie indziej: ciężkie skrypty analityczne w kokpicie, zewnętrzne czcionki Google Fonts lub Heartbeat API.

Czy bezpiecznie* jest usuwać -css z atrybutu id, aby uzyskać uchwyt (handle)? Czy ta reguła zawsze działa?*

Tak, sufiks -css jest dodawany przez rdzeń WordPress w metodzie WP_Dependencies::enqueue() od wersji 2.6, to niezmienny mechanizm. Jest jednak pewien niuans: jeśli twórca wtyczki ręcznie przypisał znacznikowi <link> niestandardowe id, sufiksu może nie być. W takim przypadku uchwyt (handle) to drugi argument wywołania wp_enqueue_style() w kodzie źródłowym wtyczki. Reguła z -css pokrywa zdecydowaną większość przypadków.

Czy można wyłączyć style tylko na wybranych stronach?

Tak i jest to prawidłowe podejście produkcyjne. Proszę opakować wywołanie wp_dequeue_style w warunkowy tag WordPress: is_front_page() dla strony głównej, is_single() dla wpisów, is_page() dla stron, is_archive() dla archiwów. Do wykluczania według ID wpisu proszę użyć ! is_single(123). Warunkowe usuwanie z kolejki na konkretnych URL-ach zmniejsza obciążenie w całej witrynie, a nie tylko tam, gdzie wtyczka nie jest potrzebna.

Co się stanie, jeśli wywołają Państwo wp_dequeue_style dla uchwytu (handle), który nie jest zarejestrowany?

Nic. Funkcja zakończy się po cichu, bez błędów, powiadomień PHP i ostrzeżeń. To bezpieczne. Nie należy jednak polegać na tym jako na strategii: proszę zbierać uchwyty (handle) tylko z rzeczywistych stron, w przeciwnym razie kod obrasta „martwymi" liniami, które nic nie robią i tylko zaśmiecają functions.php.

Jak sprawdzić, czy styl naprawdę został wyłączony, a nie po prostu przestał działać z powodu pamięci podręcznej?

Proszę otworzyć kod źródłowy strony (Ctrl+U), a nie panel dewelopera. Proszę znaleźć <link> z uchwytem (handle) wtyczki lub jej id. Jeśli znacznika nie ma, styl jest wyłączony. Pamięć podręczna przeglądarki nie ma wpływu na kod źródłowy, w przeciwieństwie do zakładki Network w DevTools. Dodatkowo można wyczyścić pamięć podręczną WordPress: dowolna wtyczka buforująca → Purge All.

Co warto zapamiętać o wyłączaniu CSS w WordPress

Trzy główne wnioski z całego poradnika:

• Uchwyt (handle) to klucz do wszystkiego. Bez prawidłowego identyfikatora żadna funkcja nie zadziała. Zawsze proszę szukać uchwytu (handle) przez atrybut id w kodzie źródłowym strony. Reguła z odrzucaniem -css działa praktycznie zawsze, a dla wyjątków, kod źródłowy wtyczki.

• Dequeue + Deregister to standardowa para. Pierwsza funkcja zdejmuje styl z kolejki, druga gwarantuje, że nie wypłynie on ponownie przez łańcuch zależności. Priorytet 9999 zabezpiecza przed wszelkimi „upartymi" wtyczkami, a hak wp_enqueue_scripts to jedyne właściwe miejsce dla tej operacji.

• Wyłączone style nie powinny znikać. Proszę zebrać je w jeden plik i podłączyć asynchronicznie przez media="print" + onload. Użytkownik otrzymuje ostylowaną stronę, a przeglądarka nie czeka na CSS przed renderowaniem.

Proszę spróbować dziś na jednej lub dwóch wtyczkach. Kilka minut w functions.php i wynik od razu widać w PageSpeed Insights. Proszę zacząć od najcięższej wtyczki, która ma najwięcej plików CSS: wyłączyć, zebrać, zmierzyć prędkość. Najprawdopodobniej samo to wystarczy, aby przejść ze strefy pomarańczowej do zielonej.