Blog

Znajdziesz tu wiele ciekawych artykułów związanych z tworzeniem stron internetowych czy też informacje o nowościach z branży IT. Do każdego wpisu postaramy się dołączać pomocne przykłady, ważne definicje oraz kody źródłowe. Dołożymy wszelkich starań, żeby nasze artykuły były zawsze na czasie i atrakcyjne dla naszych czytelników.

Przyspieszamy stronę, zmniejszanie plików css

Komentarzy: 0

Robiąc kolejny test szybkości naszej strony używając PageSpeed Insights tym razem moją uwagę przyciągnęła możliwość optymalizacji plików css i o tym dzisiejszy wpis.



Jak opisuje pomoc z googla „Zmniejszanie rozmiaru zasobów polega na usuwaniu zbędnych bajtów, na przykład dodatkowych odstępów, znaków łamania wiersza i wcięć...”, tak więc do dzieła!

Nasza strona zawiera wiele plików css które wczytywane są w odpowiedniej kolejności.



Jak widać przyszło zmierzyć mi się z 18 plikami, których to rozmiar miałem zmniejszyć. W tym celu znalazłem darmowy on-linowy kompresor http://tools.w3clubs.com/cssmin/. Każdy z plików odpowiednio został skopiowany np. bootstrap.css => bootstrap.min.css a do nazwy został dodany człon ‘min’ co będzie oznaczało plik zminimalizowany. Zawartość każdego pliku przegenerowałem przez on-linowy kompresor, a jego wynik skopiowałem do pliku zminimalizowanego. Wygląda to mniej więcej tak:



Po całym zabiegu zminimalizowania wszystkich plików css, zmieniłem ścieżki w pliku html żeby pobierało pliki zminimalizowane .min.css. Dzięki temu procesowi zyskaliśmy ok. 10KB transferu na wszystkich plikach, nie jest to może bardzo dużo z uwagi na fakt, że nasze pliki były napisane dość poprawnie.



Kolejnym etapem przyśpieszania to zmniejszenie ilości „requestów” czyli zapytań wysyłanych od klienta do serwera w celu pobrania plików css. Jest ich aż 20 (mowa o samych plikach css). W tym celu stworzyłem nowy plik, w którym planowałem połączyć wszystkie pliki w jeden. Ważna jest tutaj kolejność „wklejania”. Biorąc pod uwagę fakt że wszystkie pliki występują na każdej podstronie taka operacja miała rację bytu. I tak wynik po udanym łączeniu (mergowaniu) plików w jeden wygląda następująco:



I teraz najciekawsze pytanie: Czy to wszystko miało sens z punktu widzenia PageSpeed Insights? Poniżej wynik z analizą, a odpowiedz jest jednoznaczna, że TAK.

Zostaw komentarz

Twój adres e-mail nie będzie publikowany. Wymagane dane *