Narzędzie PageSpeed Insights służy do pomiaru szybkości strony i jej zasobów. Ocenia ono wydajność strony na urządzeniach mobilnych oraz komputerach. Punktacja przyznawana jest w skali od 0 do 100. Najwyższy wynik, czyli 100 jest marzeniem dla wielu osób i nie jest łatwy do osiągnięcia. Często można stwierdzić, że wynik w okolicach 70 jest już dobry.
Dlaczego prędkość strony jest ważna?
Szybkość strony jest bardzo ważnym elementem. Wpływa on zarówno na użytkownika, który zrezygnuje z zakupu, gdy strona będzie się wolno wczytywała oraz na pozycję w wynikach wyszukiwania - pozycjonowanie. Każda strona może zostać odpowiednio zoptymalizowana, tak by jej wynik był “na zielono” czyli sięgał 90 punktów. Może to jednak wymagać kilku dni pracy nad stroną i przerabiania jej tak, by spełniała wszystkie warunki.
Ważne wskaźniki, na podstawie których mierzony jest wynik
FCP (First Contentful Paint)
Pierwsze wyrenderowanie treści - mierzy czas załadowania pierwszego elementu na stronie. Zalecany wynik to 1.5 sekundy.
FID (First Input Delay)
Opóźnienie pierwszej interakcji - Czas jak długo po załadowaniu się pierwszych elementów na stronie możliwa jest z nimi interakcja np. kliknięcie w dany link.
LCP (Largest Contentful Paint)
Największe wyrenderowanie treści to wskaźnik, który określa ile czasu potrzeba, by załadował się największy element DOM - baner, slajd itp. Warto zaznaczyć, że analizowany obszar dotyczy “above the fold”, czyli ekranu, który widzi użytkownik po otwarciu strony.
CLS (Cumulative Layout Shift)
Skumulowane przesunięcie układu określa stabilność wizualną strony. Jest to błąd, z którym zapewne spotkaliście się wiele razy. Przykładowo jeżeli kliknęliście w baner nieświadomie - bo pojawił się później niż pozostałe części strony.
Speed Index
Indeks prędkości mierzy czas jak szybko wyświetlane są treści na stronie podczas jej ładowania.
Jak zdobyć 100 punktów w PageSpeed Insights?
Możliwości poprawy wyników pokazywane są bezpośrednio pod otrzymanym wynikiem. Znajdziemy tam propozycję elementów do poprawy, a także zaliczone audyty. Co oznaczają sugestie Googla? Opisujemy kilka przykładowych z nich poniżej:
Wyeliminuj zasoby blokujące renderowanie
Chodzi tutaj głównie o zasoby zewnętrzne i ich rozmiar. Blokują one pierwsze załadowanie strony. Żeby rozwiązać ten problem najlepiej wydzielenie krytycznego CSS (niezbędny do wyświetlenia pierwszego ekranu strony) i wklejenie go do nagłówka strony. Pozostałe należy dołączyć w postaci plików i opóźnić ich załadowanie.
Ogranicz nieużywany JavaScript
Wiele skryptów potrzebne jest tylko na jednej stronie. Przykładem może być skrypt ReCaptcha, obsługa pokazu slajdów na stronie głównej itd. Często skrypty te ładowane są na każdej podstronie, co jest zbędne. Inny sposób na nieużywany kod JS to zastąpienie gotowych bibliotek i wtyczek np. czystym JavaScriptem.
Usuń nieużywany kod CSS
Usunięcie nieużywanych instrukcji CSS, czyli kodu, którego nie wykorzystuje strona.
Unikaj document.write()
Funkcja JavaScript, która pozwala na dodanie elementów do strony przy jej ładowaniu np. reklam lub innych dynamicznych funkcjonalności. Zamiast niej można używać asynchronicznego ładowania zasobów za pomocą instrukcji async.
Włącz kompresję tekstu
Kompresja tekstu jest dostępna dzięki algorytmom Brotli lub Deflate na serwerze. Zastosowanie takiej kompresji zmniejsza rozmiar całej i strony, a zarazem przyczynia się do zwiększenia jej prędkości ładowania.
Minifikacja
Minifikuj CSS, JavaScript to minimalizacja kodu o niepotrzebne znaki, które nie wpływają na jego interpretację przez przeglądarki.
Zminimalizuj aktywność głównego wątku
Możemy zminimalizować poprzez zmniejszenie ładunków sieciowych, uproszczenie kodu CSS (wydzielenie kodu krytycznego), usunięcie nieużywanego CSS oraz JavaScript, a także używanie ładowania lazy-load.
Wyświetlaj obrazy w formatach nowej generacji - Google sugeruje nam używanie nowych formatów plików graficznych: WebP lub AVIF. Pozwala to na znaczne poprawienie prędkości.
Ogranicz wpływ kodu spoza witryny - Na stronie ładujemy różne zasoby z innych witryn np. skrypty z Google Analytics, Google Tag Manager, Piksel Facebooka i wiele innych. Mogą one skutecznie spowalniać stronę. Rozwiązaniem może być przeniesienie zasobów na własny dysk - np. czcionek. Ponadto, by ograniczyć wpływ kodu spoza witryny możemy zastosować różne techniki, które pozwolą na opóźnienie ładowania skryptów.
Zapewnij widoczność tekstu podczas ładowania czcionek internetowych - w tym przypadku optymalizacji ma na celu UX. Chodzi o to, by pokazywać treść na stronie za pomocą standardowej czcionki, zanim załaduje się ta niestandardowa. Wystarczy zastosować właściwość font-display:swap;
Odłóż ładowanie obrazów poza ekranem - chodzi tutaj o optymalizację obrazów za pomocą lazy-load, czyli ładowania obrazów z opóźnieniem. Ma ono na celu późniejsze ładowanie grafik, które są położone poniżej ekranu, widziane początkowo przez użytownika. Ta technika ma na celu poprawienie FCP, FID oraz LCP.
Unikaj zbyt dużego DOM - poprzez element DOM rozumie się dowolny element na stronie np. obrazek, div, przycisk. Niektóre z nich mogą być elementami podrzędnymi w stosunku do swoich rodziców (elementów podrzędnych). Jeżeli elementy te są głęboko zagnieżdżone lub jest już bardzo dużo, PageSpeed Insights wykrywa problem. Obecnie dzieje się tak gdy jest więcej niż 1500 elementów, głębokość jest większa niż 32 poziomy oraz gdy strona zawiera więcej niż 60 elementów potomnych.
