Czym jest PageSpeed?

Co to jest PageSpeed?

PageSpeed to potoczne określenie narzędzia Google PageSpeed Insights (PSI), które służy do sprawdzania wydajności stron internetowych. Analiza pomaga ocenić, jak szybko strona wyświetla najważniejszą treść, jak sprawnie reaguje na działania użytkownika i czy jej układ pozostaje stabilny podczas ładowania.

PageSpeed Insights analizuje osobno stronę na urządzeniach mobilnych i komputerach. Pokazuje wynik wydajności w skali od 0 do 100, ale sam wynik punktowy nie powinien być jedynym celem optymalizacji. Ważniejsze jest zrozumienie poszczególnych wskaźników oraz problemów, które faktycznie utrudniają użytkownikom korzystanie z witryny.

Wynik PageSpeed

Jednym z najbardziej widocznych elementów raportu jest wynik wydajności. Lighthouse przelicza zmierzone parametry na wartość od 0 do 100.

• 90–100 punktów – wynik dobry, oznaczony kolorem zielonym,
• 50–89 punktów – wynik wymagający poprawy,
• 0–49 punktów – słaba wydajność i wyraźna potrzeba optymalizacji.

Wynik 100/100 nie jest konieczny, aby strona była szybka i wygodna w użyciu. Próba zdobycia każdego ostatniego punktu może wymagać dużo pracy, która nie zawsze przyniesie użytkownikom zauważalną korzyść. Znacznie ważniejsze jest usunięcie największych problemów z ładowaniem, interaktywnością i stabilnością strony.

Wynik może również zmieniać się pomiędzy kolejnymi testami, mimo że kod witryny nie został zmodyfikowany. Dlatego lepiej przeprowadzić kilka pomiarów i obserwować tendencję niż wyciągać wnioski na podstawie pojedynczego testu.

Core Web Vitals w raporcie PageSpeed

Szczególne znaczenie mają Core Web Vitals. Są to trzy wskaźniki opisujące rzeczywiste doświadczenie użytkownika podczas korzystania ze strony.

Wartości są oceniane dla 75. percentyla wizyt. W praktyce oznacza to, że aby wynik danego wskaźnika został uznany za dobry, odpowiedniego progu powinno dotrzymywać co najmniej 75% zaobserwowanych wizyt.

W marcu 2024 roku INP zastąpił FID w zestawie Core Web Vitals. INP daje pełniejszy obraz responsywności strony, ponieważ bierze pod uwagę interakcje występujące podczas całej wizyty, a nie wyłącznie pierwszą z nich. PageSpeed pokazuje również inne parametry. Przykładem jest TTFB, czyli czas oczekiwania na pierwszy bajt odpowiedzi z serwera. TTFB nie jest Core Web Vital, ale może pomóc ustalić, czy źródłem problemów jest między innymi wolna odpowiedź serwera.

Co wpływa na wynik PageSpeed?

Na wydajność witryny wpływa wiele elementów. PageSpeed pomaga wskazać obszary wymagające uwagi, ale nie wszystkie problemy mają taki sam wpływ na użytkownika.

• Duże obrazy – zdjęcia przesyłane w zbyt wysokiej rozdzielczości i nieodpowiednim formacie mogą znacząco zwiększać ilość pobieranych danych. W wielu przypadkach warto korzystać z formatów takich jak WebP.
• Wolna odpowiedź serwera – długi TTFB może opóźnić rozpoczęcie wyświetlania całej strony.
• Duża ilość JavaScriptu – ciężkie skrypty mogą blokować główny wątek przeglądarki i pogarszać INP.
• Zasoby blokujące renderowanie – niektóre pliki CSS, JavaScript czy fonty mogą opóźniać pojawienie się treści.
• Brak pamięci podręcznej – poprawnie skonfigurowane cache i microcache ograniczają konieczność ponownego generowania lub pobierania tych samych danych.
• Skrypty zewnętrzne – systemy reklamowe, statystyki, czaty, widgety i inne integracje mogą wykonywać dużo dodatkowego kodu.
• Zmiany układu podczas ładowania – brak zarezerwowanego miejsca dla zdjęć, reklam czy osadzonych elementów może pogarszać CLS.

Praktyczna optymalizacja PageSpeed

Optymalizację najlepiej rozpocząć od problemów wskazanych w raporcie, które mają największy wpływ na konkretne wskaźniki. Nie trzeba wdrażać wszystkich rekomendacji naraz.

• Znajdź element odpowiedzialny za LCP. Często jest nim duże zdjęcie, baner lub fragment głównej treści. Taki zasób powinien zostać możliwie szybko pobrany i wyrenderowany.
• Ogranicz ciężkie zadania JavaScript. Usuń zbędne skrypty i wtyczki oraz sprawdź, które integracje blokują główny wątek przeglądarki.
• Zadbaj o stałe wymiary elementów. Obrazy, filmy i reklamy powinny mieć zarezerwowane miejsce jeszcze przed ich załadowaniem. Pomaga to ograniczyć CLS.
• Włącz mechanizmy pamięci podręcznej. Pozwalają szybciej obsługiwać kolejne żądania i zmniejszyć obciążenie serwera.
• Rozważ wykorzystanie CDN. Treści statyczne mogą być wtedy dostarczane użytkownikowi z infrastruktury położonej bliżej jego lokalizacji.
• Optymalizuj obrazy. Dobierz ich rozdzielczość do sposobu wyświetlania i stosuj nowoczesne formaty plików.
• Stosuj lazy loading tam, gdzie ma sens. Obrazy znajdujące się poza pierwszym ekranem mogą być ładowane z opóźnieniem. Nie warto jednak bez potrzeby opóźniać obrazu będącego elementem LCP.