Temat usuwania nieużywanego kodu CSS niejako wywołany został do tablicy poprzednim moim wpisem o testerze prędkości stron – Google Pagespeed Insights.

Pagespeed Insight bardzo często wśród wielu możliwości wskazuje, że na testowanej stronie znajduje się nieużywany kod CSS, który można usunąć.

Tak jak w tym przypadku, gdzie po optymalizacji możemy zyskać 3/4 sekundy:

Oraz znacząco zmniejszyć wielkość plików.

W poprzedniej wersji tester umożliwiał pobranie zoptymalizowanych plików CSS, niestety obecnie nie ma już takiej możliwości.

Jak więc sprawdzić, co jest potrzebne a co nie?

W pomocą przychodzi nam DevTools z przeglądarki Chrome.

Narzędzia deweloperskie są często przez nas wykorzystywane, wciskamy więc F12 będąc na stronie, którą chcemy przebadać.

W kolejnym kroku rozwijamy menu znajdujące się pod trzeba pionowymi kropkami

Rozwijamy listę „More Tools” gdzie wybieramy narzędzie „Coverage”.

Narzędzie to pozwala zidentyfikować nieużywane części plików CSS i JS. W celu zobaczenia wyników należy odświeżyć stronę.

Po szybkiej analizie otrzymujemy wynik w postaci informacji tekstowej i graficznej.

W kolejnym kroku możemy zobaczyć, które elemenenty arkusza styli nie są używane.

Kolor czerwony oznacza, że dany fragment nie jest wykorzystywany na testowanej stronie. Analogicznie drugim kolorem (morski? miętowy? jasno niebieski? :)) zaznaczone jest to co jest używane.

I w tym miejscu zaczynają się schody.

Tak przedstawiona informacja jest ważna ale tylko dla tej pojedynczej podstrony, która była testowana. W tym przypadku to strona główna.

Widać wyraźnie, że dwa pierwsze arkusze w większości zawierają informacje, które w tym miejscu nie są potrzebne. Ale nie wiemy czy na innej stronie nie będą wykorzystywane.
Dlatego optymalizacja tego czynnika nie jest rzeczą prostą.

Coverage analizuje pliki CSS i JS ale o ile optymalizacja CSS jest trudna to optymalizację JS trzeba zostawić specjalistom.

Jak więc może przebiegać optymalizacja plików CSS.

Musimy przeanalizować każdy typ strony w naszej witrynie.
Np stronę główną, kategorie, podkategorie, produkt, strony informacyjne, artykuły oraz strony z formularzami.
Po usunięciu niepotrzebnych rzeczy zawsze wszystkie te strony muszą być ponownie sprawdzone czy działają poprawnie.

Róbmy optymalizacje partiami, zawsze zostawiając poprzednie wersje plików. Wtedy będzie łatwiej przywrócić ją do poprawnego stanu.

Tego typu optymalizacje najłatwiej zrobić na prostych stronach np w HTML, dla stron z CMS`em optymalizacja na pewno będzie trudniejsza.

Warto też zwrócić uwagę na totalnie nieużywane CSS lub JS, czasami są to stare tematy, które niepotrzebnie się obecnie wczytują lub są potrzebne tylko na jednej czy kilku podstronach. Wtedy powinny być ładowane tylko tam gdzie są wykorzystywane.

Optymalizacja tego parametru jest szczególnie zalecana dla stron stworzonych na szablonach, takie strony mają najczęściej umieszczone w plikach CSS wszytko co może gdziekolwiek być użyte w szablonie. Tak jest w przypadku analizowanej witryny.
Warto też przeprowadzić ją dla witryny często zmienianych, wielokrotnie rozbudowywanych. Na takich stronach często można usunąć wiele elementów lub plików.

W sieci znajduje się kilka narzędzi online do analizy i optymalizacji plików CSS. Jednak nie znalazłem żadnego narzędzia, które sprawdzi witrynę całościowo i w podsumowaniu określi co nie było używane ani razu. Szkoda, bo mogłoby być to naprawdę pomocne.

Może tylko ja takiego narzędzia nie znalazłem, więc jeśli Ty je znasz to podziel się proszę linkiem w komentarzu.