Skip to content

Wszystko o WordPressie, tworzeniu stron — i nie tylko

⚡ Jak wyłączyć dashicons.min.css i przyspieszyć ładowanie strony na WordPress

⚡ Jak wyłączyć dashicons.min.css i przyspieszyć ładowanie strony na WordPress

Strona działa wolno, a PageSpeed Insights w milczeniu wskazuje na dashicons.min.css, 30 KB ikon, które nie są wyświetlane w żadnym widocznym elemencie. Nie instalował Pan tego pliku, nie podłączał go w motywie, ale jest on sumiennie ładowany każdemu odwiedzającemu. Skąd się bierze i jak się go pozbyć?

WordPress domyślnie wciąga dashicons na frontend w jednym, wąskim celu: pasek administracyjny dla zalogowanych użytkowników. Zwykły gość nie widzi paska administracyjnego, ale przeglądarka sumiennie ładuje CSS, parsuje go, buduje CSSOM i dopiero potem orientuje się, że żadna klasa nie była potrzebna. Na wolnym mobilnym internecie te 30 KB zamienia się w zbędne 300-400 ms blokującego ładowania, co wystarczy, by spaść w Core Web Vitals.

Poniżej trzy sposoby na wyłączenie dashicons: od ręcznego snippetu po jedno zaznaczenie we wtyczce optymalizacyjnej. Wszystkie metody są bezpieczne, odwracalne i sprawdzone na rzeczywistych instalacjach WordPressa.

💡 Szybki przegląd:

  • Proszę otworzyć DevTools lub PageSpeed Insights i upewnić się, że dashicons.min.css rzeczywiście ładuje się na Pana stronie
  • Proszę wybrać odpowiedni sposób wyłączenia, kod w functions.php lub gotową wtyczkę optymalizacyjną
  • Proszę ponownie przetestować szybkość i sprawdzić, czy plik zniknął z raportu
  • Proszę upewnić się, że pasek administracyjny administratora nadal działa bez błędów

Czym są dashicons i dlaczego ładują się na frontendzie

Dashicons to wbudowana czcionka ikon WordPressa, która pojawiła się w wersji 3.8. W panelu administracyjnym jest wszędzie: ikony sekcji menu, typów wpisów, przycisków paska narzędzi. Bez dashicons panel administracyjny zamienia się w goły tekst i WordPress nie może z nich zrezygnować.

Problem leży w mechanizmie rejestracji. Rdzeń rejestruje style dashicons globalnie i dodaje je do kolejki nie tylko dla panelu administracyjnego, ale i dla frontendu, z myślą o jednym scenariuszu: zalogowany użytkownik wchodzi na stronę i widzi czarny pasek administracyjny z ikonami. Gość nie otrzymuje paska administracyjnego, ale plik CSS otrzymuje. Przeglądarka parsuje go, stwierdza, że żaden selektor nie pasuje i wyrzuca do kosza, ale czas został już stracony.

PageSpeed Insights i GTmetrix odnotowują dashicons.min.css w rekomendacji „Remove unused CSS" i obniżają punktację. Jeden taki plik to drobiazg. Ale gdy dochodzą do niego style emoji WordPressa, CSS nieużywanych wtyczek i martwe bloki motywu, łączna oszczędność sięga 150-300 KB. Dla mobilnej wydajności jest to odczuwalne.

Raport PageSpeed Insights z ostrzeżeniem o nieużywanym CSS dashicons

Jak sprawdzić, czy dashicons ładują się na Pana stronie

Zanim cokolwiek Pan wyłączy, proszę upewnić się, że problem istnieje. Trzy sposoby, każdy poniżej minuty.

Chrome DevTools. Proszę otworzyć stronę w trybie incognito (aby pasek administracyjny nie wpływał na sprawdzenie), nacisnąć F12, zakładka Network, w polu filtra wpisać dashicons. Jeśli widzi Pan plik ze statusem 200 i rozmiarem około 30 KB, ładuje się on dla wszystkich odwiedzających.

PageSpeed Insights. Proszę wkleić URL w pagespeed.web.dev i uruchomić test. Proszę rozwinąć rekomendację „Remove unused CSS", dashicons.min.css będzie na liście ze wskazaniem rozmiaru i potencjalnej oszczędności w kilobajtach.

GTmetrix. Zakładka Waterfall, filtr po dashicons. Plik w łańcuchu ładowania z oznaczeniem „Low" lub „Lowest" i tak blokuje renderowanie i ciągnie ocenę w dół.

Jeśli żaden sposób nie pokazał pliku, motyw lub wtyczka optymalizacyjna już wyłączyły dashicons, artykuł można zamknąć. Jeśli Pan wykrył, idziemy dalej.

Sposób 1: wyłączamy przez kod w functions.php

Najłatwiejsza i najbardziej przejrzysta metoda, jeden snippet w functions.php aktywnego motywu. Kod usuwa dashicons z rejestracji dla wszystkich odwiedzających bez uprawnień administratora. Tym, którzy administrują stroną, zostawiamy, pasek administracyjny w panelu nie ucierpi.

Proszę dodać ten kod do functions.php motywu potomnego lub przez wtyczkę Code Snippets (bezpieczniej, przetrwa zmianę motywu):

1/**
2 * Отключаем dashicons.min.css на фронтенде для всех,
3 * кроме пользователей с правами администратора.
4 */
5function sdstudio_disable_dashicons_frontend() {
6 if ( current_user_can( 'update_core' ) ) {
7 return;
8 }
9 wp_deregister_style( 'dashicons' );
10}
11add_action( 'wp_enqueue_scripts', 'sdstudio_disable_dashicons_frontend' );

Hook wp_enqueue_scripts uruchamia się podczas formowania kolejki stylów na frontendzie. current_user_can('update_core') sprawdza uprawnienie do aktualizacji rdzenia, domyślnie mają je tylko administratorzy. Dla zwykłych odwiedzających sprawdzenie nie przechodzi i wp_deregister_style('dashicons') całkowicie usuwa plik z kolejki.

Dlaczego deregister, a nie dequeue. wp_dequeue_style usuwa styl z kolejki, ale pozostawia go zarejestrowanym, inna wtyczka może ponownie dodać dashicons do wyjścia. wp_deregister_style całkowicie znosi rejestrację i przywrócić plik można tylko jawnym wywołaniem wp_register_style. Dla dashicons to właściwy wybór: nie chcemy, by wtyczka mediów społecznościowych lub galerii przypadkowo przywróciła je na frontend.

Środki ostrożności. Błąd w functions.php kładzie stronę białym ekranem. Przed edycją proszę skopiować plik do functions.php.bak dla szybkiego przywrócenia. Proszę używać motywu potomnego lub Code Snippets. Proszę sprawdzić składnię: każdy nawias i średnik na swoim miejscu.

Sposób 2: wtyczki optymalizacyjne, jedno zaznaczenie zamiast kodu

Jeśli nie chce Pan dotykać PHP, to samo zadanie rozwiązują wtyczki wydajnościowe.

Perfmatters. W sekcji General → Options jest przełącznik „Disable Dashicons". Jedno kliknięcie i plik znika z frontendu. Perfmatters wyklucza również dashicons z Used CSS w funkcji Remove Unused CSS, czyli problem jest zamykany podwójnym konturem. Wtyczka jest płatna, ale rozwiązuje dziesiątki innych wąskich gardeł wydajności, od wyłączenia stylów emoji po zarządzanie heartbeat API.

WP Rocket. W sekcji File Optimization → Optimize CSS Delivery proszę włączyć „Remove Unused CSS". WP Rocket przeanalizuje strony i wytnie nieużywane style, w tym dashicons.min.css. Działa automatycznie dla całej strony. Jeśli Remove Unused CSS koliduje z inną optymalizacją, proszę dodać dashicons.min.css do listy wyjątków, WP Rocket opóźni jego ładowanie zamiast całkowitego usunięcia.

Asset CleanUp (darmowy). Wtyczka Asset CleanUp pozwala selektywnie wyłączać CSS i JS na poziomie poszczególnych stron i typów treści. Proszę wejść w CSS/JS Manager, znaleźć dashicons.min.css i wyładować go dla całej strony. Darmowa wersja wystarcza do podstawowego czyszczenia.

Który sposób wybrać? Jeśli ma Pan już zainstalowany Perfmatters lub WP Rocket, proszę użyć wbudowanej funkcjonalności, nie mnożyć kodu w functions.php. Jeśli strona działa na minimalnym zestawie wtyczek i czuje się Pan komfortowo w PHP, snippet ze sposobu 1 jest lżejszy i nie ciągnie zależności.

Sprawdzamy rezultat

Po wyłączeniu dashicons proszę otworzyć stronę w trybie incognito i powtórzyć sprawdzenie z drugiego rozdziału. Plik dashicons.min.css powinien zniknąć z listy załadowanych zasobów w DevTools. Proszę uruchomić ponowny test w PageSpeed Insights, wskaźnik „Remove unused CSS" zmniejszy się, a potencjalna oszczędność transferu wzrośnie o te same 30 KB.

Rzeczywisty przyrost punktów zależy od stosu technologicznego. Na lekkich stronach z jednym-dwoma problemami CSS wyłączenie dashicons dodaje 1-3 punkty w mobilnym PageSpeed. Na rozdętych stronach z dziesiątkami nieużywanych stylów to kropla, ale właściwa: każdy kilobajt się liczy i takie „krople" w sumie dają odczuwalny rezultat.

Koniecznie proszę sprawdzić pasek administracyjny: proszę zalogować się jako administrator i upewnić się, że czarny pasek na górze wyświetla się normalnie, a ikony w nim są na swoim miejscu. Kod ze sposobu 1 i przełącznik w Perfmatters pozostawiają dashicons dla administratorów nietknięte, nie zauważy Pan różnicy.

⁉️🤔 Często zadawane pytania

Czy wyłączenie dashicons wpłynie na wygląd strony?

Jeśli Pana motyw używa dashicons do ikon na frontendzie, strzałek slidera, krzyżyków zamykania, menu-hamburgera, wyłączenie je zepsuje. Sprawdzić jest prosto: proszę wyłączyć plik i przejść się po stronach. Ikony zniknęły, motyw opiera się na dashicons. W tym przypadku proszę użyć agresywnego cache'owania przez Cloudflare lub wtyczkę cache: 30 KB z cache przeglądarki nie jest krytyczne.

Czy metoda działa z motywami blokowymi (FSE)?

W motywach blokowych, Twenty Twenty-Four, Ollie i analogicznych, dashicons najczęściej nie ładują się na frontendzie. Edytor blokowy używa własnych ikon SVG i rdzeń nie podłącza czcionki ikon dla odwiedzających. Proszę sprawdzić przez DevTools: najprawdopodobniej pliku tam nie ma. Jeśli Pan wykrył, kod ze sposobu 1 działa tak samo dla klasycznych i blokowych motywów.

Czy można wyłączyć dashicons tylko dla części stron?

Tak, przez tagi warunkowe WordPressa. Na przykład, zostawić dashicons tylko na stronie głównej:

1function sdstudio_conditional_dashicons() {
2 if ( is_front_page() ) {
3 return;
4 }
5 if ( current_user_can( 'update_core' ) ) {
6 return;
7 }
8 wp_deregister_style( 'dashicons' );
9}
10add_action( 'wp_enqueue_scripts', 'sdstudio_conditional_dashicons' );

Wszystkie dostępne tagi warunkowe są opisane w dokumentacji WordPressa. Wśród nich is_single dla pojedynczych wpisów, is_page dla stron, is_archive dla archiwów i is_home dla strony głównej.

Wtyczka cache już przyspiesza stronę, czy i tak wyłączać dashicons?

Wtyczka cache przyspiesza ponowne ładowania, ale pierwsza zimna wizyta i tak ciągnie dashicons.min.css. PageSpeed Insights podczas każdego testu emuluje czysty cache, dlatego plik będzie w raporcie niezależnie od cache na serwerze. Wyłączenie dashicons zmniejsza objętość przesyłanych danych na poziomie źródła, widzą to zarówno metryki, jak i realni odwiedzający podczas pierwszego wejścia.

Czy wyłączenie dashicons wystarczy do dobrej oceny PageSpeed?

Nie, to tylko jeden krok z dziesiątek. Główną poprawę dają zazwyczaj optymalizacja obrazów (kompresja, nowoczesne formaty, lazy load), opóźnione ładowanie JavaScript i cache'owanie serwerowe. Proszę traktować wyłączenie dashicons jako minimum higieniczne: szybko, bezpiecznie i z mierzalnym efektem. Od tego wygodnie jest zacząć czyszczenie frontendu.

Który sposób wyłączenia dashicons wybrać do Pana zadania

Krótkie podsumowanie trzech sposobów i konkretne scenariusze.

Jeśli pracuje Pan z kodem i strona jest na lekkim stosie, proszę wziąć snippet ze sposobu 1. Dwie minuty na wstawienie do functions.php lub Code Snippets i sprawa zamknięta na zawsze. Żadnych dodatkowych wtyczek, żadnego obciążenia panelu administracyjnego.

Jeśli już płaci Pan za Perfmatters lub WP Rocket, proszę włączyć gotową opcję i nie tworzyć zbędnych bytów. Te wtyczki przy okazji rozwiązują jeszcze kilkanaście problemów wydajnościowych, a dodatkowy kod w motywie tylko skomplikuje utrzymanie.

Jeśli potrzebuje Pan darmowego narzędzia bez edycji PHP, Asset CleanUp poradzi sobie w dwa kliknięcia. Odpowiednie dla początkujących i tych, którzy nie chcą ryzykować z functions.php.

Ogólna zasada: dashicons same w sobie nie spowalniają strony. Są one jednak częścią szumu tła, który w sumie z nieużywanymi stylami wtyczek, ciężkimi fontami i niezoptymalizowanymi obrazami zapycha kanał i hamuje renderowanie. Usunięcie dashicons to szybkie zwycięstwo, od którego wygodnie jest zacząć planową optymalizację.

Po wyłączeniu proszę napisać w komentarzach, o ile punktów wzrósł PageSpeed. Jeśli znalazł Pan jeszcze jeden sposób, niewymieniony w artykule, również proszę się podzielić.