Jak znaleźć nieużywane klasy CSS na stronie i po co to robić

Jak znaleźć nieużywane klasy CSSCzasami nasza witryna czy motyw WordPressa ładuje ogromny plik CSS, a my korzystamy zaledwie z kilku podstawowych klas. Cała reszta niepotrzebnie zajmuje miejsce na serwerze, a ładowanie zbyt dużego pliku stylów spowalnia wczytywanie naszej strony.

Warto pozbyć się niewykorzystywanych klas. W wykryciu nieużywanych klas i innych reguł CSS pomoże nam panel Coverage pakietu Developer Tools wbudowany w przeglądarkę Chrome.

Sprawdź, jak tego używać.

Jak wykryć nieużywane reguły CSS na danej stronie – krok po kroku

W przeglądarce Chrome:

  1. Wejdź na stronę, którą chcesz przeanalizować.
  2. Kliknij w dowolnym miejscu prawy przycisk myszy i wybierz Inspect. W ten sposób uruchomiłeś pakiet narzędzi Chrome Developer Tools
  3. Naciśnij kombinację klawiszy Ctrl-Shift-P (Cmd-Shift-P na macu)
  4. W konsoli, która się otworzy, wpisz Coverage.
  5. Wybierz Drawer Show Coverage:

    Drawer - show coverage
    Drawer – show coverage
  6. Kliknij przycisk record (kółko):

    Panel Coverage w Chrome DevTools - przycisk record
    Panel Coverage w Chrome DevTools – przycisk record

Powinieneś zobaczyć ekran podobny do tego:

Wykorzystanie kodu CSS na stronie
Wykorzystanie kodu CSS na stronie
  • Po lewej stronie widzisz pliki CSS i JavaScript zaczytywane przez tę stronę.
  • Po prawej stronie widzisz czerwono-zielone paski:
    • na czerwono zaznaczono procent nieużywanego kodu
    • na zielono – procent kodu, który jest w użyciu.

Nas interesują tylko pliki CSS, więc możesz kliknąć na kolumnę Type, aby pliki CSS zobaczyć w pierwszej kolejności.

  1. Wybierz interesujący cię plik CSS, klikając na jego ścieżkę w pierwszej kolumnie (URL).

W panelu wyżej zobaczysz ponownie kolory czerwony i zielony, tym razem w formie pasków pionowych (zobacz obrazek). Czerwone paski pionowe pokazują linie, zawierające kod nie wykorzystany przez daną stronę. Zielone – reguły CSS, które są w użyciu.

Klasy nieużywane są oznaczone kolorem czerwonym, używane - zielonym
Klasy nieużywane są oznaczone kolorem czerwonym, używane – zielonym

I teraz już wiadomo, definicje których klas CSS są wykorzystywane, a które nie. Dzięki temu łatwo wyłapać pliki niepotrzebnie obciążające stronę, a potem je „odchudzić” (jak to robić , to temat na osobny wpis).

Na co należy zwrócić uwagę

  • Pamiętaj, że narzędzie Coverage przeglądarki Chrome analizuje pojedynczą stronę, tę na której jesteś. Oznacza to, że dana klasa może nie być używana na konkretnej podstronie, ale za to może być potrzebna na innej. Zobacz przykład z wykorzystaniem tabel pokazany na filmiku w minucie 5:17
  • Najlepiej przyjrzeć się plikom CSS ładującym duże biblioteki, takie jest Bootstrap czy Font Awesome.
  • Jeśli na liście Coverage nie widzisz pliku style.css ze swojego motywu, upewnij się, że plik CSS jest dołączany do twojej strony WordPressowej za pomocą funkcji wp_enqueue_style

Uwaga: Jeśli korzystasz z motywu potomnego, pamiętaj, że używanie dyrektywy @import do wczytania pliku stylów rodzica już nie jest zalecane. Pliki CSS rodzica i motywu potomnego dołączone za pomocą funkcji wp_enqueue_style, wczytują się szybciej, gdyż nowsze przeglądarki potrafią zrównoleglić ten proces.

Jak prawidłowo załączać pliki CSS w motywie potomnym
Jak prawidłowo załączać pliki CSS w motywie potomnym

Twój sposób na wyszukiwanie nieużywanych klas?

A może ty znasz jakiś inny sposób na wyszukiwanie nieużywanych klas?

4 przemyślenia nt. „Jak znaleźć nieużywane klasy CSS na stronie i po co to robić”

  1. W sumie fajny patent na ułatwienie sobie pracy przy robieniu prostych Landing Page opartych o BS bez ręcznego wycinania niepotrzebnego kodu 🙂

    A już szczególnie przydatny kiedy buduje się je pod jakiś system do automatyzacji marketingu pokroju SM.

    Wielkie dzięki.

    1. Hej Jarek, chodzi ci o to, że roboczo robisz sobie taki landing page przy załadowanym Bootstrapie, potem sprawdzasz, które klasy są na zielono i ostatecznie tylko ich używasz?

  2. Ja osobiście używam jeszcze „CSS Used” przydaje się do tego też celu – pokazuje kod, który jest używany na stronie lub elemencie.

    Tak, jednak trzeba trochę wprawy, aby z takich narzędzi korzystać w odpowiedni sposób 🙂 Jednakże jeżeli klient chce mieć Landing Page, który otwiera się w pół sekundy, ładnie wygląda i działa – to gra warta świeczki oraz pieniędzy za „Optymalizacje serwisu” 🙂

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *