Czasami 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:
Wejdź na stronę, którą chcesz przeanalizować.
Kliknij w dowolnym miejscu prawy przycisk myszy i wybierz Inspect. W ten sposób uruchomiłeś pakiet narzędzi Chrome Developer Tools
Naciśnij kombinację klawiszy Ctrl-Shift-P (Cmd-Shift-P na macu)
W konsoli, która się otworzy, wpisz Coverage.
Wybierz Drawer Show Coverage:
Drawer – show coverage
Kliknij przycisk record (kółko):
Panel Coverage w Chrome DevTools – przycisk record
Powinieneś zobaczyć ekran podobny do tego:
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.
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
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
Twój sposób na wyszukiwanie nieużywanych klas?
A może ty znasz jakiś inny sposób na wyszukiwanie nieużywanych klas?
Comentarios