Web Design Blog / Programowanie:

Usuwanie nieużywanego kodu CSS

Data publikacji: 6 lipca 2019

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?

  1. Notatnik – osobiście polecam profesjonalny edytor Notepad++ ale może być także inny „bardziej modny” np. Brackets albo Visual Studio Code 😉
  2. 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.

Te instrukcje, które nie zostały wykorzystane po prostu usuwany za pomocą notatnika.

#2: Deminifikacja kodu CSS

Aby cały proces był wygodniejszy kod CSS należy zdeminifikować, czyli odwrócić proces minifikacji polegający na usunięciu znaków formatowania. W Notepad++ dokonamy tego za pomocą podmiany każdego znaku } na } ze znakiem nowej linii (\n) oraz kropki na kropkę z dwoma znakami nowej linii (\n\n). Można też użyć narzędzi online o nazwie Prettify CSS.

#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:

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.

Usuwanie nieużywanego kodu CSS
4.7 (93.33%) głosów: 3


Komentarze

Brak komentarzy.

Dodaj swój komentarz