Co to jest Pagespeed Insights i jak go użyć?

Spis treści

• Czym jest PageSpeed Insights?
  • Funkcjonalności
  • Ocena
  • Aktualizacje
• Pagespeed Insights a Lighthouse – czym się różnią?
  • PageSpeed Insights vs Lighthouse – najważniejsze podobieństwa i różnice
• Co oznaczają poszczególne metryki w PageSpeed Insight?
  • Metody oceniania PSI i rozkład danych
  • Podstawowe wskaźniki internetowe
  • Pozostałe wskaźniki PSI
  • W jaki sposób poszczególne wskaźniki składają się na ogólną ocenę wydajności?
• Najczęstsze zalecenia z Google PageSpeed Insights
• PageSpeed Insights – podsumowanie

W SEO kwestia prędkości strony to nie jest łatwy temat – nie tylko dlatego, że opiera się głównie na aspektach technicznych, które dla wielu są wyzwaniem i wymagają sporo wiedzy, ale też dlatego, że nie ma jednego słusznego wskaźnika, który mógłby nam pokazać, czy nasza strona faktycznie osiąga wystarczającą prędkość czy nie. Dlaczego tak jest?

Przyczyna leży przede wszystkim po stronie specyfiki ładowania witryny – to proces rozłożony na etapy, a ładowanie poszczególnych elementów może być oceniane przez narzędzia lepiej lub gorzej. To znaczy, że nawet jeśli pierwsze załadowanie strony mieści się w określonych przez standardy ramach, to niekoniecznie czas do pełnej interaktywności będzie wystarczająco krótki, aby zapewnić satysfakcję użytkownika i sukces w działaniach SEO.

Musisz pamiętać, że cały ten proces, od A do Z, ten musi przebiegać możliwie płynnie i to określają pomiary Core Web Vitals oraz dodatkowe metryki. Wszystkie te wskaźniki możesz sprawdzić narzędziem Google Pagespeed Insights. Tak naprawdę na tym etapie PageSpeed Insights i Core Web Vitals są nierozłączne!

Czym jest PageSpeed Insights?

PageSpeed Insights to open-source C++ SDK działający w przeglądarkach internetowych (Chrome i Firefox), bezpośrednio w przeglądarce lub za sprawą wtyczki. Brzmi strasznie?

To całkiem zrozumiałe, wytłumaczmy więc wszystko po kolei, a raczej od końca. SDK to software development kit, czyli zestaw narzędzi dla programistów, który ma pomagać w ich zadaniach.

C++ oznacza język programowania, w którym PageSpeed Insights został napisany, a specyfika open-source sprawia, że narzędzie jest darmowe (nie musisz płacić za żadną z jego funkcjonalności). Dzięki temu, że możesz korzystać z PSI w przeglądarce, nie ma konieczności pobierania żadnego oprogramowania.

PageSpeed Insights służy webmasterom, programistom i właścicielom biznesów internetowych do oceny wydajności swojej strony oraz określenia działań, które należy wykonać, aby tę wydajność podnieść.

Funkcjonalności

PageSpeed Insights to narzędzie, za sprawą którego sprawdzisz stan swojej strony internetowej pod kątem najważniejszych wskaźników internetowych oraz wielu pozostałych metryk (szerzej opiszemy je w kolejnej części). Całościowy wynik strony, na który składa się wypadkowa poszczególnych ocen, zobaczysz na górze – niech nie zdziwi Cię różnica między wynikiem na urządzenia mobilne a komputery, jest ona normalna i wynika najczęściej z braku prawidłowej optymalizacji pod urządzenia mobilne.

Źródło: https://pagespeed.web.dev/report?url=https%3A%2F%2Fdelante.pl%2F&hl=pl&form_factor=desktop

Ocena

Wynik wynoszący 90 punktów lub więcej to dobry wynik (wyświetli Ci się na zielono). Ocena pomiędzy 50–89 punktów będzie miała pomarańczowy kolor i powinna dać Ci do myślenia – coś w witrynie ewidentnie wymaga poprawy. Z kolei wynik poniżej 50 punktów jest już negatywny (czerwony) i prędkość strony powinna trafić na Twoją listę to-dos jak najprędzej!

Źródło: https://pagespeed.web.dev/report?url=https%3A%2F%2Fdelante.pl%2F&hl=pl&form_factor=desktop

Potrzebujesz wsparcia z prędkością strony? Sprawdź nasz audyt Core Web Vitals!

Aktualizacje

Warto dodać, że narzędzie się regularnie rozwija, czego owocem jest pojawienie się w ostatnim czasie (27 października 2022 r.) sekcji dedykowanej SEO – póki co niewiele jeszcze wnoszą do codziennej pracy specjalistów, ale jesteśmy dobrej myśli!

Pagespeed Insights a Lighthouse – czym się różnią?

Udało Ci się już zdobyć podstawowe informacje na temat PageSpeed Insights – co to, skąd wynika jego popularność i jakie są najważniejsze funkcjonalności narzędzia. Narzędzie PageSpeed Insights (PSI) służy do oceny prędkości strony raportuje wrażenia użytkowników strony na urządzeniach mobilnych i komputerach oraz sugeruje sposoby jej ulepszenia.

Z kolei Google Lighthouse to narzędzie, w którym możesz wykonać szerszy audyt strony internetowej. W trakcie skanowania Lighthouse bierze pod uwagę:

• wydajność strony (performance),
• optymalizację SEO,
• dostępność,
• sprawdzone metody.

Wskazówka: audyty Lighthouse są widoczne w narzędziu Google Speed Insights.

PageSpeed Insights vs Lighthouse – najważniejsze podobieństwa i różnice

• Oba narzędzia służą do określenia szybkości ładowania strony;
• PSI i Lighthouse są darmowe;
• Narzędzia za sprawą audytu pokażą Ci, w jakich obszarach warto poprawić stronę, aby zwiększyć jej prędkość i ocenę Google;
• PageSpeed Insights uruchamia się jako aplikację webową – wystarczy wejść na stronę i wpisać w okienko link do witryny, którą chcesz sprawdzić;
• Lighthouse uruchamia się z poziomu Narzędzi Programisty w Chrome;
• Strona sprawdzana przez PSI musi być dostępna dla zewnętrznych crawlerów;
• Za pomocą Lighthouse można testować strony jeszcze nieopublikowane;
• PageSpeed Insights to stosunkowo proste narzędzie, które nie wymaga wiedzy do obsługi, natomiast wdrażane zmiany muszą być już wykonywane przez specjalistów;
• Lighthouse to narzędzie przeznaczone w całości dla deweloperów;
• PageSpeed Insights bierze pod uwagę dane o czasie ładowania strony pozyskiwane z doświadczeń rzeczywistych użytkowników, ale bazuje w pewnym stopniu też na technologii Lighthouse.

Co oznaczają poszczególne metryki w PageSpeed Insight?

Metody oceniania PSI i rozkład danych

Zacznijmy od tego, jak interpretować wykresy prezentowane przez PSI niezależnie od tego, czego dotyczą. Mamy tu kilka najważniejszych elementów i ocen. Przyjrzyjmy się temu na podstawie FID Delante.

Źródło: https://pagespeed.web.dev/report?url=https%3A%2F%2Fdelante.pl%2F&hl=pl&form_factor=desktop

Jak widzisz, na wykresie znajdują się trzy kolory – zielony, pomarańczowy i czerwony. Ponieważ przeważa zielony, ogólna ocena jest pozytywna (widzisz zieloną kropkę na lewo od nazwy wskaźnika). Żeby lepiej wyjaśnić Ci, jakie dane tu widzisz, zerknij na tabelę, którą przygotował Google – progi są bowiem ustawione zgodnie z Core Web Vitals.

Źródło: https://web.dev/vitals/?utm_source=developers.google.com

Jak widzisz, dla First Input Delay pozytywnie oceniane przez Google są dane, które ładują się w czasie między 0 a 100 ms (tak, milisekund!). Żeby lepiej zrozumieć, co oznaczają wykresy, wyobraź sobie (albo jeśli wolisz – zerknij do kodu swojej strony), że Twoja witryna to nic innego co zlepek tysięcy różnych informacji, które muszą dotrzeć do użytkownika na czas, a więc strona musi zdążyć je załadować odpowiednio szybko.

Nie każda z nich będzie tak samo szybka (niektóre wartości mogą być szczególnie ciężkie albo w złym formacie), dlatego na przykład 90% danych załaduje się w 50 ms, 9% w 70 ms, a ostatni nieszczęsny 1% w ponad 300 ms. Ostateczna ocena takiego rozkładu ładowania będzie pozytywna, ale zawsze warto zastanowić się i sprawdzić, co stanowi ten 1%.

Nie jesteś pewien? Chętnie Ci podpowiemy – skontaktuj się z nami, a przeprowadzimy dla Ciebie kompleksowy audyt prędkości strony.

Podsumowując: to, co na wykresie widzisz na zielono, to dane, które spełniają te wytyczne; żółty kolor to dane wymagające poprawy, a czerwony – dane o zdecydowanie zbyt wolnym tempie ładowania.

Podstawowe wskaźniki internetowe

To kategoria wskaźników, która wiąże się z aktualizacją Core Web Vitals z 2021 roku. W jej skład wchodzą:

• FID – First Input Delay, czyli opóźnienie przy pierwszym działaniu. Ten wskaźnik mierzy czas od pierwszego wejścia użytkownika w interakcję z witryną aż do momentu, w którym strona rozpocznie przetwarzanie działań związanych z tą akcją.

Źródło: https://web.dev/fid/

• LCP – Largest Contentful Paint, czyli największe wyrenderowanie treści. Ta metryka opisuje czas, który potrzebuje strona na załadowanie największego elementu witryny znajdującego się w obszarze widocznym dla użytkownika. Może to być grafika, wideo, blok tekstu, gif itp.

Źródło: https://web.dev/lcp/

• CLS – Cumulative Layout Shift, czyli skumulowane przesunięcie układu. Ten wskaźnik opisuje łączną wielkość nieprzewidzianych (i niepożądanych) przesunięć w obrębie layoutu strony. Co to może być w praktyce? Na przykład ładujące się nie po kolei treści tekstowe będą przeorganizowywać i przesuwać treść w górę i dół strony, a treści graficzne dopiero po pewnym czasie osiągające pożądany rozmiar – nawet na lewo i prawo. Niepożądane są też wszelkiego rodzaju przesunięcie po najechaniu kursorem na link czy button, mogą bowiem prowadzić do dezinformacji lub frustracji użytkownika.

Źródło: https://web.dev/cls/

Pozostałe wskaźniki PSI

• FCP – First Contentful Paint, czyli pierwsze wyrenderowanie treści. Wskaźnik określa, ile czasu zajmuje pełne załadowanie pierwszej grafiki albo bloku tekstowego po wejściu użytkownika na stronę. W praktyce – jak szybko potencjalny klient zobaczy w ogóle treść inną niż białe tło na witrynie, którą odwiedził.

Źródło: https://web.dev/fcp/

• Speed Index, czyli średni czas załadowania treści widocznej dla użytkownika.
• Time to Interactive, czyli czas do pełnej interaktywności. Ten wskaźnik podpowie Ci, jak długo użytkownik musi czekać do momentu, w którym strona będzie w pełni interaktywna, czyli bez problemu będzie mógł się po niej poruszać.
• TBT – Total Blocking Time, czyli różnica czasowa między FCP – First Contentful Paint – a czasem do pełnej interaktywności. W praktyce oznacza okres pomiędzy momentem, w którym coś pojawiło się na ekranie użytkownika, a czasem, kiedy faktycznie będzie można w dany element witryny kliknąć czy z niego skorzystać.

Do wskaźników eksperymentalnych, które PSI dopiero wprowadza, należą:

• INP – interakcja z następnym farbą;
• TTFB – czas do pierwszego bajta.

Ponieważ PageSpeed Insights to bazuje na technologii Lighthouse, w audycie tego narzędzia znajdziesz również dane takie jak:

• Performance – czyli wydajność. To audyt, który dostarcza bardziej szczegółowe dane związane z rozwojem strony niż czyste dane techniczne z PSI.
• Best Practices –  czyli sprawdzone metody. Tutaj przeczytasz o tym, jak Twoja strona plasuje się względem najlepszych witryn spełniających współczesne standardy. Dane tutaj będą dotyczyć tylko prędkości strony, lecz także np. bezpieczeństwa cyfrowego.
• Accessibility –  czyli dostępność. To złożony audyt mocno nastawiony na doświadczenia użytkownika. Sugeruje, jakie zmiany można wprowadzić, aby strona była bardziej dostępna dla wszystkich użytkowników – dotyczy to designu, interfejsu czy używanego języka (chodzi o sposób i prostotę komunikacji, nie język danej narodowości) i rozwiązań IT, np. dopasowanie treści strony do czytników dla osób niewidzących za sprawą atrybutów ARIA.
• SEO – czyli pozycjonowanie. To prosty audyt, który pozwala na sprawdzenie, z jaką skutecznością roboty Google mogą crawlować Twoją witrynę. Nie spodziewaj się tutaj fajerwerków i następcy WooRanka 😉 Jeśli zależy Ci na dobrym audycie SEO, po prostu napisz do nas!

Źródło: https://pagespeed.web.dev/report?url=https%3A%2F%2Fdelante.pl%2F&hl=pl&form_factor=desktop

W jaki sposób poszczególne wskaźniki składają się na ogólną ocenę wydajności?

W wersji Lighthouse 8, proporcje rozkładają się następująco:

Najczęstsze zalecenia z Google PageSpeed Insights

Zastanawiasz się, co oznaczają zalecenia, które sugeruje Ci PSI? Często fakt, że ich nie rozumiesz tak dobrze, jak byś chciał, może to być sygnałem, że potrzebujesz wsparcia specjalisty – dewelopera lub SEOwca, w zależności od tego, gdzie leży źródło problemu. Przyjrzyjmy się szybko najczęstszym zaleceniom z PSI:

• Eliminacja zasobów blokujących renderowanie (JS i CSS);
• Optymalizacja wykonywania Java Scriptu:
  • ładowanie asynchroniczne,
  • unikanie długodziałających skryptów;
• Optymalizacja użycia CSS;
• Minifikacja CSS/JS;
• Usunięcie niepotrzebnych stylów i skryptów;
• Ograniczenie aktywności głównego wątku;
• Redukcja TTFB (czasu odpowiedzi serwera);
• Stosowanie grafik o właściwych rozmiarach (czyli nie za dużych – najlepiej kilkadziesiąt kB);
• Lazy loading, czyli odłożenie ładowania strony poza obszarem widocznym dla użytkownika żeby to, co widzi, wczytało się szybciej;
• Zdjęcia w nowoczesnych formatach, jak webp czy jpg2000;
• Użycie zastępczych fontów, które będą widoczne podczas ładowania docelowych fontów;
• Unikanie wielokrotnych przekierowań (także pętle przekierowań zdecydowanie nie służą optymalizacji prędkości strony);
• Wykorzystanie cache, czyli zapamiętywanie pewnych danych w celu skrócenia czasu ładowania strony przy kolejnych wizytach użytkownika;
• Ograniczenie wpływu kodu ze stron trzecich, np. Facebooka.

PageSpeed Insights – podsumowanie

Jak widzisz, PageSpeed Insights to bardzo złożone narzędzie. Żeby z niego sprawnie korzystać, musisz mieć naprawdę sporą wiedzę, wiele wskazówek będzie bowiem dla Ciebie bezużytecznych, jeśli nie masz wsparcia dewelopera lub sam nie działasz aktywnie z SEO. Dlatego mimo że na rynku są dostępne darmowe, bardzo dobre narzędzia do mierzenia i audytu prędkości stron, to jednak bez wiedzy i doświadczenia efektywność działań będzie bardzo niska.

Potrzebujesz wsparcia? Jesteśmy dla Ciebie! Sprawdź, co znajdziesz w naszym audycie Core Web Vitals.