Jak w prosty sposób poprawić wynik PageSpeed

Dlaczego szybkość działania stron jest obecnie tak ważnym czynnikiem?

Wiele lat temu Google zauważyło szybki wzrost rozwoju internetu mobilnego i postanowiło zoptymalizować swoje serwisy w kierunku użytkowników mobilnych. Początkowo powstały dwa osobne mechanizmy wyszukiwania dla użytkowników desktopów i użytkowników mobilnych. W przypadku tych drugich promowane były bardziej strony małe, szybkie i dobrze przygotowane. W 2018 roku nastąpiła zmiana w sposobie budowania rankingu Google zwana Mobile First Indexing. Od tego momentu większość rankingów wyników wyszukiwania preferuje strony dobrze przystosowane do urządzeń mobilnych.

Jak można poprawić swój wynik PageSpeed?

 Najlepszym sposobem pokazania, jakie czynności powinniśmy wykonać, będzie zrobienie ich na istniejącym przykładzie. Do optymalizacji wybrałem darmowy szablon Sentra, który spróbujemy zoptymalizować używając Pulno. W celach testowych stworzyłem domenę step1.test1.itsjustatest.net gdzie umieściłem gotowy szablon i wykonałem test PageSpeed za pomocą narzędzia psi.

Wynik strony to 60, jest to dosyć słaby wynik. Ponadto pojawia się ostrzeżenie o wyniku poniżej 70 punktów, który jest uznawany za wartość akceptowalną. Pojawiło się kilka problemów, które możemy w miarę łatwo rozwiązać. Leverage browser caching - serwer www nie definiuje jak długo mają być cachowane zasoby, Optimize images - możemy zoptymalizować wielkość obrazków. Widzimy również problem z renderowaniem strony, sporą wielkością plików CSS i JS wymaganych do wyrenderowania strony.

Do wykonania analizy użyjemy Pulno. Po wprowadzeniu adresu przechodzimy do szczegółowego raportu strony głównej klikając na link / w filtrze na dole głównej strony audytu.

Na podstronie z analizą przechodzimy do sekcji Image optimization.

System proponuje nam optymalizację poszczególnych obrazków podając, że pozwoli to na ich kompresję o dodatkowe 14-23 procent. Wystarczy teraz kliknąć w przycisk Download, ściągnąć wszystkie obrazki i podmienić je na stronie docelowej. Wykorzystując chrome developer tools możemy sprawdzić jak wyglądają obrazki po skompresowaniu i czy zmieniły się ich czasy ładowania:

(wersja step1 przed optymalizacją obrazków)

(wersja step2 po modyfikacji obrazków)

Widać w systemie, że wielkość plików obrazów uległa zmniejszeniu a także skrócony został czas ich ładowania do przeglądarki.

Również na teście psi widać poprawę wyniku. Wersja strony step2 z zmodyfikowanymi obrazkami otrzymała 65 punktów, a wielkość obrazków spadła o około 160 kB.

CSS

Następnie zoptymalizujemy sposób ładowania plików CSS. W chwili obecnej zaglądając w źródło strony zobaczymy kilka plików CSS ładowanych w nagłówku strony WWW. Oznacza to, że strona nie rozpocznie generowania swojego widoku, jeżeli wszystkie pliki nie zostaną wczytane.

Aby zoptymalizować CSS przejdziemy w Pulno do sekcji Unused CSS znajdującej się pod optymalizacją obrazków. W sekcji tej znajdują się informacje jaka część kodu CSS wykorzystana jest bezpośrednio do wygenerowania widoku strony (pomijając kod niezbędny do wygenerowania części strony wczytanej JavaScriptem).

System umożliwia nam ściągnięcie pliku, który zawiera w sobie cały kod CSS podzielony na część użytą do renderowania widoku strony i tę, która nie jest wykorzystywana. W pliku zip znajduje się kilka katalogów.

Katalog orig zawiera oryginalne pliki CSS, katalog uncss_page zawiera pliki CSS zoptymalizowane tylko na podstawie konkretnej podstrony, w tym przypadku tylko strony głównej. Plik uncss_all zawiera pliki zoptymalizowane na podstawie każdej podstrony, dla której wykonaliśmy pełną analizę. Katalog Pulno_css_optimize_onfile zawiera dwa pliki used.css i unused.css, które wykorzystamy do naszej optymalizacji. Jeden plik zawiera cały kod CSS, którego użycie zostało wykryte na wszystkich analizowanych stronach, natomiast plik unused.css zawiera kod CSS, który nie został użyty do bezpośredniego wyświetlenia strony (mógł zostać użyty później dzięki wstawką JS lub ajaxa).

Step3 to kolejna wersja naszej strony zawierająca modyfikacje plików css i ładowania fontów.

Porównując z wcześniejszym kodem widzimy że wszystkie pliki CSS zostały zastąpione jednym plikiem used.css wygenerowanym z Pulno.

Na dół strony trafił wpis ładujący unused.css, czyli kod który nie jest nam niezbędny do wyświetlenia samej strony. Przeniesione zostało tam także ładowanie fontów. Jeżeli zależy nam żeby od razu strona wyświetliła się z użyciem docelowych fontów należy przenieść ten kawałek kodu z unused.css do used.css.

Ponowne odpalenie analizy psi pokazało wynik 70 punktów, a także zmniejszenie znaczenia problemu z blokadą procesu renderowania strony z 32 punktów do 24.

Ostatnim problemem którym się zajmiemy to ustawienie cachowania plików przez przeglądarkę. Ustawieniami tym możemy sterować poprzez plik .htaccess, który należy umieścić w głównym katalogu serwisu WWW.

Przykładowa zawartość pliku może wyglądać tak:

<FilesMatch ".(ico|jpg|gif|png|css|js)$">
 Header set Cache-Control "max-age=2851200, public"
</FilesMatch>

Oznacza to że pliki z rozszerzeniem ico, jpg, gif, png, css i js będą cachowane przez przeglądarkę przez 30 dni, dzięki czemu nie będzie ona pobierać ponownie plików przy kolejnym odwiedzeniu serwisu czy kolejnych odwiedzanych podstronach.

Po wykonaniu ostatniej modyfikacji udało się nam uzyskać 79 punktów, to całkiem niezły wynik jak na kilkanaście minut modyfikacji serwisu.