6 lipca 2019
Aktualizacja: 17 lipca 2020

Usuwanie nieużywanego kodu CSS

Kategoria: Programowanie
Tagi: dla profesjonalistów,
Autor: Paweł Mansfeld

Usuwanie nieużywanego kodu CSS

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.

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: 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). Jeżeli nie mamy fachowego notatnika, 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:

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

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.

Oceń artykuł na temat: Usuwanie nieużywanego kodu CSS
Średnia : 4.5 , Maksymalnie : 5 , Głosów : 26


 

Odpowiedz lub skomentuj

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




Komentarze

Bart

5 lutego 2020

Hej Paweł, jak wyszukać nadmiarowy kod na Mozilli?

Paweł Mansfeld

5 lutego 2020

Mozilla nie ma takiej funkcjonalności - tak jak wielu innych, ma za to inne których nie ma w Chrome ;)

Rafał

8 czerwca 2020

Witaj, a jak zielony wynik i 100% przekłada się na pozycje? Sporo moich stron ma właśnie taki wskaźnik lecz jestem ciekawy, czy to coś konkretnego daje. Z drugiej strony jest masa stron z czerwonym wskaźnikiem, które są w TOP 3.

Paweł Mansfeld

8 czerwca 2020

Wyszukiwarka zwraca wyniki możliwie najbardziej trafne dotyczące zapytania użytkownika. Jeżeli jest strona na jakiś temat i nie ma ona konkurencji to może ona się znajdować w TOPach - na zasadzie: "lepsza wolna strona niż żadna". Jeżeli mamy dwie konkurujące ze sobą strony to ta szybsza będzie miała lepszą pozycję. Zaś, nieatrakcyjna strona ze słabą jakością mimo uzyskania wyniku 100/100 we wszelkich analizatorach nie pojawi się na dobrych pozycjach a już tym bardziej przy mocnej konkurencji.

Aby wyszukiwania miały sens, istnieje pewna hierarchia priorytetów przy pozycjonowaniu i na pewno najważniejsza jest treść i autorytet strony a dopiero potem takie czynniki jak PageSpeed Insights, dobra architektura czy dane strukturalne. Co nam z tego, że strona ma zielony wynik w analizatorze SEO jeżeli nie ma ona wartościowej i przydatnej treści?

Optymalizacja stron jest jak odciążanie samochodów wyścigowych - przecież nie decyduje o wyniku wyścigu ale daje przewagę nad rywalami.

Więcej informacji: wpływ wyniku PageSpeed Insights na SEO i pozycjonowanie.

Łukasz

2 września 2020

jak zawsze wartościowy wpis. przy zabawie Coverage nalezy zawsze pamietac, zeby zmienic szerokosc przegladarki bo tylko wtedy bedziemy wiedzieli ktore cssy sa uzywane dla wszystkich breakpointow

Paweł Mansfeld

2 września 2020

Dokładnie tak, co zresztą widać na tym moim pseudo-tutorialu :)

 

Wykryto brak połączenia z Internetem.