Usunięcie nieużywanego kodu CSS jest jedną z najtrudniejszych do zrealizowania technik optymalizacji wydajności stron internetowych. Nie trzeba dysponować żadnymi szczególnymi umiejętnościami ani narzędziami ale wymaga poświęcenia sporo uwagi i czasu.
Wykonanie całego procesu powinno się opłacać, ponieważ strona bez nadmiarowego kodu CSS działa szybciej – korzyść ta jest bardziej widoczna kiedy mówimy o urządzeniach mobilnych – przez to zwiększamy satysfakcję ich użytkowników i możemy polepszyć pozycję strony w wyszukiwarkach. Usunięcie redundantnego kodu CSS jest koniecznym krokiem w celu uzyskania zielonego wyniku i 100 punktów w PageSpeed Insights.
Narzędzia
Co nam jest potrzebne?
- Notatnik – osobiście polecam profesjonalny edytor Notepad++ ale może być także inny „bardziej modny” np. Brackets albo Visual Studio Code 😉
- Przeglądarka Google Chrome
#1: Wyszukanie nadmiarowego kodu CSS
Za pomocą klawisza F12 uruchomimy konsolę Google Chrome. Kiedy pojawi się z prawej strony ekranu wciskamy jednocześnie… Ctrl+Shift+P. W małym okienku wpisujemy „Coverage”. Klikamy komendę Show Coverage, dzięki temu pojawi się nowa zakładka służąca do audytu kodu CSS i jego utylizacji.
Następnie jeżeli mamy stronę typu Single-Page Application „surfujemy” po stronie internetowej. Wraz z przeglądaniem poszczególnych podstron stosunek nieużywanego kodu do używanego powinien maleć, kiedy odwiedzimy wszystkie podstrony w różnych wielkościach widoku możemy zakończyć surfowanie i przeglądać które instrukcje nie został wykorzystane.
Jeżeli mamy standardową stronę, w której podstrony ładują się synchronicznie, trzeba ręcznie pilnować które instrukcje na wszystkich podstronach i wielkościach widoku były zaznaczone jako nieużywane.
Jeżeli znajdziemy pliki CSS, które nie są w ogólne wykorzystywane (wszystko jest zaznaczone na czerwono), możemy je całkowicie usunąć ze strony lub wyzerować.
#2: Modyfikacja ręczna lub automatyczne wygenerowanie odchudzonych plików
Te instrukcje, które nie zostały wykorzystane można po prostu usunąć za pomocą notatnika lub wygenerować plik w Google Chrome. Wygenerowany plik zawierający tylko używane instrukcje można wyeksportować w Google Chrome za pomocą strzałeczki w lewym dolnym rogu. Plik JSON zawiera zawartość wszystkich stylów i skryptów po usunięciu nieużywanych instrukcji. Używane instrukcje można teraz zapisać jako pliki albo wkleić bezpośrednio do strony.
Małym mankamentem i niedopatrzeniem ze strony deweloperów jest fakt, że Coverage pomija wyrażenia zapytań medialnych:
Wystarczy „posegregować” plik według zapytań i dodać breakpointy. W praktyce będzie to dodanie od 3 do 5 linijek kodu z odpowiednimi klamerkami.
#3: Podmiana pliku ze stylem
Odchudzony plik można podmienić na stronie – najlepiej tymczasowo zmieniając jego nazwę. Jeżeli wszystkie pola wyglądają poprawnie możemy dokonać minimalizacji i ponownie zaktualizować plik.
#4: Inne metody optymalizacji CSS
Jeżeli interesuje cię temat wydajności stron internetowych i optymalizacji stylów CSS sprawdź czy wykorzystałeś wszystkie popularne techniki zasobów tekstowych:
- minifikacja kodu,
- kompresja GZIP,
- optymalne scalanie i wklejanie kodu CSS i JS,
- wykorzystanie CDN,
- zmniejszenie wartości TTFB.
#5: Narzędzia do automatyzacji
W sieci pojawiły się narzędzia, które starają się analizować kod i wygenerować gotowy plik złożonych tylko z potrzebnych instrukcji. Czy działają one prawidłowo. Oczywiście, że nie. Choć to może być zaskakujace, problem z nadmiarowymi instrukcjami CSS jest na ten moment niemożliwy do zautomatyzowania. Mimo, że istnieje wiele narzędzi online oraz modułów dla front-endowców, które starają się ten proces zautomatyzować, nigdy wygenerowany kod nie jest kompletny w stu procentach. Dlaczego?
Otóż, to, jakie instrukcje są potrzebne do wygenerowania potrzebnego kodu jest zależne zarówno od wygenerowanego drzewa DOM na podstawie kodu HTML oraz JavaScript. Wiele stylów ujawnia się dopiero po interakcji „żywego użytkownika” z jakimś elementem np. :hover, :active lub bardziej skomplikowanych, (np. rozwinięcie harmonijki lub kliknięcie w menu) nie mówiąc nic o ukrytych a potem wyskakujących pop-upach. Praktycznie niemożliwa jest symulacja wszystkich możliwych interakcji ze stroną, uwzględniającą w dodatku manipulowanie drzewem DOM za pomocą JavaScript.
Narzędzia online, które starają się wygenerować odchudzone pliki CSS to między innymi:
Narzędzia te można wykorzystać jako pomoc przy ręcznej optymalizacji plików. W praktyce, aby zachować poprawny wygląd strony, konieczne jest dopisane instrukcji z oryginalnego pliku, które narzędzie z różnych powodów usunęło. Najbardziej sprawdzony sposób to użycie przeglądarki Google Chrome.
Podsumowanie
Usuniecie nadmiarowego kodu CSS zwiększy wydajność strony, pozwoli uzyskać 100 punktów we wszelkiego rodzaju analizatorach wydajności stron WWW i oczywiście poprawić pozycje w wyszukiwarce. Im więcej osób korzysta z naszej strony przy pomocy urządzeń mobilnych tym zaprezentowane w tym wpisie działania są bardziej opłacalne.
Bart pisze: 
Odpowiedz lub skomentuj