Google Pagespeed Insights – narzędzie do poprawy strony pod kątem SEO i UX

Czas ładowania strony internetowej to ważny parametr wpływający na współczynnik konwersji oraz odbiór witryny przez użytkownika. Jednym ze skutecznych narzędzi służących do sprawdzania szybkości działania serwisu jest PageSpeed Insights.
 

Dlaczego warto poprawić szybkość działania strony?

Prędkość ładowania witryny to jeden z najważniejszych czynników wpływających na to, czy klient pozostanie w serwisie, czy też niezwłocznie go opuści – właśnie dlatego ma on wpływ na efekty pozycjonowania stron www. Parametr ten przekłada się również na efekty biznesowe. Badania branżowe wskazują na silną korelację między prędkością wczytywania a konwersją. Przykładowo, Amazon wykazał, że każde 0,1 sekundy opóźnienia w działaniu ich portalu powoduje 1% spadek sprzedaży. Inne badania wskazują z kolei, że różnica w konwersji pomiędzy podstronami ładującymi się przez 1 oraz 5 sekund może sięgać nawet 40%.

Słabe wyniki w zakresie prędkości działania mogą wiązać się więc z mniejszą liczbą leadów (brakiem realizacji KPI), niższą sprzedażą, a nawet gorszymi pozycjami w wyszukiwarce Google. Ponadto wpływają też negatywnie na ocenę strony www przez internautów. Dlatego warto zadbać o to, aby czas wczytywania serwisu był możliwie najkrótszy. Polecanym narzędziem służącym do oceny szybkości ładowania strony jest Google Insights – pod adresem https://developers.google.com/speed/pagespeed/insights/?hl=pl.
 

Czym jest PageSpeed Insights?

PageSpeed Insights to bezpłatne narzędzie od Google, które umożliwia sprawdzenie czasu ładowania dowolnej witryny. Ocenia ono jej szybkość osobno na urządzeniach desktopowych oraz mobilnych. Google przedstawia wyniki w skali od 1 do 100, przy czym: 0-49 punktów (oznaczone kolorem czerwonym) określa jako słabe, 50-89 (pomarańczowe) – wymagające poprawy, 90-100 (zielone) – dobre. Wynik powyżej 90 punktów dla komputerów uznawany jest za wystarczający dla wydajnego i szybkiego działania serwisu.

Page Speed Google prezentuje tzw. dane laboratoryjne, czyli czas ładowania strony podzielony na kilka składowych. Należą do nich:

• Pierwsze wyrenderowanie treści (First contentful paint) – oznacza okres renderowania pierwszego obrazu lub tekstu;
• Indeks szybkości (Speed index) – określa, jak prędko witryna zapełnia się widocznymi treściami;
• Największe wyrenderowanie treści (Largest contentful paint) – czas renderowania największego obrazu albo tekstu;
• Zbiorcze przesunięcie układu (Cumulative layout shift) – to miara ruchu elementów w widocznym obszarze;
• Czas do pełnej interaktywności (Time to interactive) – wskazuje okres, po którym strona staje się w pełni interaktywna;
• Łączny czas zablokowania (Total blocking time) – suma wszystkich okresów pomiędzy pierwszym wyrenderowaniem treści a czasem do pełnej interaktywności w przypadku, gdy długość zadania przekroczyła 50 ms. Parametr ten jest wyrażony w milisekundach.

Wiele z tych czynników wchodzi w skład Core Web Vitals – będą one od maja 2021 czynnikami wplywającymi na ranking stron w wynikach Google. Czynniki o parametrach poza dozwolonymi normami – pojawiają się również w Google Search Console, w postaci błędów.

Szczególnie przydatnym elementem udostępnianym przez narzędzie PageSpeed Google Insight są wskazówki, które pomagają poprawić wydajność strony internetowej, a tym samym zatrzymać na niej użytkowników. Zawierają szczegółowe informacje dotyczące tego, co i jak należy zoptymalizować, aby szybkość serwisu była jak najwyższa. Prezentowane są w kolejności malejącej – od tych, których wdrożenie przyniesie największą oszczędność w zakresie prędkości ładowania. Kolorem czerwonym i pomarańczowym oznaczono elementy, których poprawa jest najbardziej wskazana, natomiast na zielono zaznaczono czynniki niewymagające zmian. Analiza wskazówek z PageSpeed Google Insight oraz stworzenie konkretnych wytycznych optymalizacyjnych – są to elementy profesjonalnie wykonanego audytu SEO.

Prędkość strony wymaga poprawy?

Skontaktuj się a zoptymalizujemy stronę!

Jak poprawić czas ładowania strony?

Im wyższy wynik w teście Google Speed Page osiągnie witryna, tym lepiej. Nie zawsze jednak dążenie za wszelką cenę do osiągnięcia idealnego wyniku 100 punktów w badaniu jest wskazane. Zdarza się bowiem, że dana rekomendacja okazuje się nieodpowiednia dla konkretnej strony ze względu np. na zastosowane technologie albo jej rozmiar. Dlatego też warto podejść do poprawiania prędkości ładowania w sposób racjonalny, starannie dopasowując wskazówki przedstawione w SpeedPage Insights do potrzeb i możliwości witryny.

Narzędzie analizuje różne obszary i elementy funkcjonowania serwisu. Bierze pod uwagę m.in. rozmiar obrazów lub kodu JavaScript. Do popularnych i skutecznych sposobów na poprawę szybkości wczytywania witryny należą:

• Minifikacja CSS – proces ten polega na usunięciu zbędnych znaków z pliku w celu zmniejszenia jego rozmiaru. Podczas korzystania z niektórych programów (np. Webpack) minifikowanie kodu odbywa się automatycznie, w innych przypadkach można skorzystać z dostępnych w sieci narzędzi oferujących minifikację wklejonego kodu, np. Minifier.org;
• Zmiana rozmiaru grafiki – obrazek rozciągający się na szerokość strony www powinien mieć od ok. 1440 do maksymalnie 1600 px szerokości, natomiast w przypadku mniejszego zdjęcia warto sprawdzić w przeglądarce, jaki przyjmuje rozmiar i taką wielkość ustawić. Po zmianie rozmiaru grafik należy je skompresować, by uzyskać jak najmniejszy, ważący maksymalnie ok. 200 kB plik;
• Kompresja tekstu – treść tekstową należy skompresować do formatów bezstratnej kompresji danych (np. brotli, deflate bądź gzip), aby zmniejszyć ilość danych przesyłanych w sieci. Dzięki temu można przechowywać na serwerze pliki zajmujące mniej miejsca, a przez to szybciej pobierane przez przeglądarkę użytkownika. Proces ten przeprowadza się, np. używając wtyczki Webpack albo edytując plik .htaccess;
• Skrócenie czasu wykonania JavaScript – polecanym sposobem na poprawę szybkości ładowania witryny jest skrócenie okresu poświęcanego na wykonywanie, kompilowanie oraz analizowanie kodu JS. Jest to możliwe do osiągnięcia poprzez dostarczenie niewielkich ładunków kodu, np. dzieląc główny plik JS na mniejsze, niezależne od siebie, które będą wczytywane w zależności od wyświetlanej aktualnie zawartości;
• Eliminacja zasobów blokujących renderowanie – zaleca się umieszczenie krytycznego kodu CSS i JavaScript w kodzie strony w znacznikach <style> i <script> w sekcji HEAD, a także opóźnienie procesu wczytywania wszystkich niekrytycznych skryptów oraz plików ze stylami. Dzięki temu odwiedzający witrynę otrzymuje jej część zwaną „above the fold” i nie musi czekać na wczytanie całego serwisu;
• Wyświetlanie obrazów w formatach nowej generacji – zastosowanie formatów nowej generacji, takich jak JPEG 2000, WebP albo JPEG XR wiąże się często ze znacznie lepszą kompresją, niż w przypadku formatów JPEG czy PNG, odbywającą się bez strat jakości. To sprawia, że proces pobierania jest szybszy, a wykorzystanie danych mniejsze. Konwertowanie można przeprowadzić przy pomocy wielu dostępnych w sieci programów, należy jednak pamiętać, że jeszcze nie wszystkie przeglądarki wspierają te formaty;
• Leniwe ładowanie – implementacja tzw. leniwego ładowania (ang. lazy loading) pozwala skrócić czas do pełnej interaktywności. Jego wdrożenie jest proste i można je wykonać za pomocą dostępnych bibliotek. Proces ten polega na wczytywaniu grafiki na stronie tylko wtedy, gdy jest ona potrzebna. Obrazki widoczne zaraz po otwarciu witryny są natychmiast ładowane, natomiast wczytanie reszty zdjęć zostaje odłożone na później.

Wykorzystanie przedstawionych wyżej zaleceń, a także regularne korzystanie z bezpłatnego narzędzia Google PageSpeed Insights pozwala na skuteczną optymalizację zasobów strony i tym samym poprawę prędkości działania serwisu.