Różnice między PageSpeed Insights, CrUX, Lighthouse i Real User Monitoring

Czym jest PageSpeed Insights (PSI)?

PageSpeed Insights¹ to bezpłatne narzędzie udostępniane przez Google, które analizuje szybkość, komfort użytkowania i ogólną wydajność strony internetowej na urządzeniach mobilnych i stacjonarnych (desktop). Jego głównym celem jest dostarczanie sugestii dotyczących możliwych ulepszeń strony. PSI łączy dane laboratoryjne, gromadzone w kontrolowanym środowisku z danymi terenowymi pochodzącymi z rzeczywistych interakcji użytkowników. Dane terenowe są wyświetlane pod warunkiem, że jest ich odpowiednia ilość na przestrzeni poprzednich 28 dni (+2 dni na przemielenie informacji). Te dane są zbierane podczas użytkowania Chrome. Narzędzie to raportuje wskaźniki wydajności – w tym tak zwane Core Web Vitals. Dla każdej z kategorii generuje też ogólny wynik w skali od 0 do 100, który jest syntetyczną oceną opartą na danych laboratoryjnych i choć pomocny, nie powinien być jedynym wyznacznikiem optymalizacji. Niestety ludzie czasami nadmiernie skupiają się na samym liczbowym wyniku, zamiast na konkretnych rekomendacjach i – jeśli są – danych terenowych, a ten fakt jest wykorzystywany przez nieuczciwych „specjalistów”.

Korzystanie z PSI jest proste. Użytkownik wprowadza adres URL strony do analizy, a narzędzie generuje oddzielne raporty dla wersji mobilnej i stacjonarnej. Raport zawiera wyniki z kategorii:

• Wydajność
• Ułatwienia dostępu
• Sprawdzone metody
• SEO

Wskaźniki w raporcie są oznaczone kolorami (zielony, pomarańczowy, czerwony), co ułatwia szybką ocenę ich statusu.

Dane terenowe

Opierają się na interfejsie Chrome User Experience (CrUX), obejmują wskaźniki takie jak:

• First Contentful Paint (FCP)
• Interaction to Next Paint (INP)
• Largest Contentful Paint (LCP)
• Cumulative Layout Shift (CLS)
• Time to First Byte (TTFB)

Dane laboratoryjne

To jedynie symulowane wyniki FCP, LCP, Speed Index (SI), CLS i Total Blocking Time (TBT). Wynik wydajności PSI jest przedstawiany w skali od 0 do 100. Wynik w zakresie 90 – 100 jest uważany za dobry, 50 – 89 wymaga poprawy, a poniżej 50 jest oceniany jako słaby. Ogólny wynik wydajności jest ważoną średnią metryk laboratoryjnych, co oznacza, że niektóre metryki mają większy wpływ na wynik końcowy niż inne.

Link do PageSpeed Insight: https://pagespeed.web.dev/

Nadużycia przy pomocy PageSpeed Insights

Niestety, PageSpeed Insights bywa wykorzystywane do wprowadzania klientów w błąd. Spotkałem się wielokrotnie z sytuacjami, w których „specjaliści” przedstawiali spreparowane wyniki z PSI jako dowód wykonanej optymalizacji. Klient widzi „zielone cyferki” 90+ / 100 i płaci za usługę od kilku do kilkunastu stówek (rekordzista wziął 3k), która faktycznie nie została wdrożona. Są odpowiednie techniki oszukujące wynik PSI. Nie chcę ujawniać tych sposobów, żeby nie tworzyć kolejnych „specjalistów od optymalizacji”.

• Nie polecam korzystać z wtyczki NitroPack, która również manipuluje wynikami PSI
  (w – nie tylko – mojej opinii)

To co wygląda dobrze w raporcie, często nie przekłada się na rzeczywiste doświadczenie użytkownika, a to właśnie dane terenowe (z CrUX) i Core Web Vitals są najważniejsze dla Google.

Pamiętaj! PageSpeed Insights to narzędzie wspierające optymalizację, a nie cel sam w sobie. Najważniejsze są realne efekty – lekka strona (bez ciężkiego JavaScript), stabilny layout, szybka reakcja na kliknięcia, a nie zielony kolor w kółeczku, który de facto o niczym nie świadczy.

Czym jest Chrome User Experience Report (CrUX)?

Chrome User Experience Report, w skrócie CrUX jest publicznym zbiorem danych udostępnianym przez Google, który gromadzi metryki dotyczące doświadczeń użytkowników z rzeczywistych sesji w przeglądarce Chrome. Dane te pochodzą od użytkowników, którzy wyrazili zgodę na synchronizowanie historii przeglądania, nie skonfigurowali hasła synchronizacji i włączyli raportowanie statystyk użytkowania. Dane są aktualizowane codziennie i przedstawiają 28-dniową średnią

CrUX jest oficjalnym źródłem danych dla Core Web Vitals (CWV):

• Largest Contentful Paint (LCP) – Największe wyrenderowanie treści mierzy czas wyrenderowania największego elementu, który pojawia się w początkowym obszarze widoku (czyli „above the fold”). Jeśli główny banner, obraz czy blok tekstu ładuje się w górnej części ekranu, to właśnie jego załadowanie zadecyduje o wartości LCP. Jeśli największy element znajduje się poniżej widoku startowego, automatycznie zostanie pominięty na rzecz kolejnego pod względem wielkości, który jest widoczny od razu. LCP powinno pojawiać się do 2,5 sekundy

• Interaction to Next Paint (INP) – Interakcja do kolejnego wyrenderowania ocenia czas reakcji strony na działania użytkownika (kliknięcia, dotknięcia, wpisywanie tekstu). Mierzy od momentu zdarzenia do chwili, gdy przeglądarka ponownie wyrenderuje widok z uwzględnieniem tej interakcji. Dla płynnej i przyjemnej obsługi przyjmuje się, że INP powinno być krótsze niż 200 ms.

• Cumulative Layout Shift (CLS) – Skumulowane przesunięcie układu mierzy stabilność wizualną. Dokładniej jest to skumulowana miara nieoczekiwanych przesunięć elementów na stronie podczas jej ładowania i pracy. Każde przesunięcie ocenia się przez połączenie proporcji ekranu, którego dotyczy, oraz dystansu przemieszczenia. Wynik agreguje się w jedną wartość: im niższa, tym stabilniejszy układ. Dla komfortu rekomenduje się, by CLS nie przekraczało 0,1 w punktacji.

CWV poza podstawowymi wskaźnikami pokazuje również metryki, takie jak First Contentful Paint (FCP) i Time to First Byte (TTFB), które oceniają jakość doświadczenia użytkownika na stronie.

Oficjalne narzędzia do analizy CrUX

Google udostępnia dane przez tzw. CrUX Tools – każde z narzędzi prezentuje te dane nieco inaczej.

Tabela porównawcza każde z CrUX Tools

Czym jest Lighthouse?

Lighthouse to narzędzie open-source służące do poprawy jakości stron internetowych. Umożliwia audytowanie stron pod kątem wydajności, dostępności, aplikacji progresywnych (PWA, eng: Progressive Web App), SEO oraz najlepszych praktyk. Po przeprowadzeniu analizy Lighthouse generuje raport zawierający wyniki oraz sugestie dotyczące ulepszeń. PageSpeed Insight opiera się na Lighthouse. Różnica między PSI, a Lighthouse jest znacząca.

• PSI symuluje wynik bazując na serwerach Google
• Lighthouse analizuje wynik lokalnie (na twoim komputerze)

Dlatego przetestowanie tego samego adresu tymi narzędziami może pokazać całkowicie odmienne wyniki.

Lighthouse można uruchamiać na różne sposoby:

1. bezpośrednio w narzędziach deweloperskich Chrome (tzw. DevTools)
2. jako rozszerzenie do Chrome²
3. z linii poleceń (Node CLI)
4. jako moduł Node.js
5. PageSpeed Insights

Wyniki Lighthouse są przedstawiane w skali od 0 do 100, z podobnymi kategoriami jak w PSI. Warto pamiętać, że wyniki mogą się różnić między kolejnymi uruchomieniami ze względu na różne czynniki po drodze. Raczej ciężko opisać wszystko ale najpopularniejsze to:

• Obciążenie serwera
• Testy A/B lub zmiany w wyświetlanych reklamach
• Chwilowe spowolnienie internetu
• Korzystanie z VPN
• Testowanie na różnych urządzeniach, np. na komputerze stacjonarnym, laptopie, tablecie, smartfonie
• Rozszerzenia przeglądarki (np. adblocki), dlatego testuję na incognito bez wtyczek
• Oprogramowanie antywirusowe

Jak uruchomić Lighthouse w DevTools

1. Otwórz przeglądarkę Google Chrome
2. Wejdź na stronę, którą chcesz przeanalizować
3. Naciśnij F12 lub CTRL + SHIFT + I
4. Znajdź „Lighthouse” i skonfiguruj audyt:
   • Wybierz tryb pracy. Dostępne są trzy tryby: Nawigacja (domyślny), okres i migawka. Tryb Nawigacja służy do pełnej analizy strony zaraz po jej załadowaniu
   • Wybierz urządzenie do analizy (np. komputer lub urządzenie mobilne)
   • Wybierz kategorie testów, które mają zostać wykonane (np. wydajność, ułatwienia dostępu, SEO) albo zostaw domyślnie zaznaczone
5. Gdy konfiguracja jest gotowa, naciśnij „Analizuj wczytanie strony”

Czas trwania analizy zależy od wybranego trybu, ilości wybranych kategorii i możliwości komputera, na którym jest uruchamiana oraz internetu. Po zakończeniu analizy narzędzie wyświetli raport z wynikami i sugestiami ulepszeń podobnie jak w PSI.

Real User Monitoring

O ile CrUX zbiera dane o doświadczeniach użytkowników za pomocą przeglądarki Chrome (jeśli spełnione są odpowiednie warunki prywatności), to Real User Monitoring, w skrócie RUM pozwala samodzielnie gromadzić dane terenowe – niezależnie od Google.

Jak działa Real User Monitoring?

RUM działa w tle. Po dodaniu prostego skryptu JavaScript do kodu strony (najczęściej w sekcji <head>), uruchamia się on automatycznie podczas odwiedzin użytkowników. Skrypt ten rejestruje dane wydajnościowe i przesyła je do zewnętrznej platformy analitycznej.

Zbierane informacje obejmują m.in:

• Czasy ładowania zasobów – jak szybko ładują się poszczególne elementy (np. obrazy, pliki CSS, JavaScript)
• Responsywność strony – czas reakcji na interakcje użytkownika (kliknięcia, przewijanie, wpisywanie tekstu)
• Błędy JavaScript i problemy z UX – wykrywanie błędów po stronie klienta oraz identyfikacja elementów utrudniających korzystanie ze strony
• Typ urządzenia i przeglądarki
• Lokalizacja geograficzna i typ połączenia
• Core Web Vitals (LCP, INP, CLS)

Porównanie RUM, PSI i CrUX

W skrócie:

• PSI i Lighthouse są przydatne do szybkiego testu i diagnostyki w kontrolowanych warunkach
• CrUX daje dane terenowe, ale z ograniczoną głębokością i dostępnością
• RUM – pełna kontrola i najbardziej wiarygodny obraz działania strony

Popularne narzędzia RUM

Na rynku dostępnych jest wiele narzędzi do Real User Monitoringu, m.in.:

• Web Vitals JS (Google)³ – biblioteka JavaScript do własnej integracji
• Datadog RUM
• New Relic Browser
• Cloudflare RUM
• Pingdom Real User Monitoring
• Sematext Experience

Wyniki symulacyjne (laboratoryjne) vs. wyniki realne (terenowe)

Dane laboratoryjne, generowane przez Lighthouse, mają swoje zalety. Przede wszystkim są zbierane w kontrolowanym środowisku, co czyni je przydatnymi podczas debugowania problemów. Zapewniają spójne i powtarzalne wyniki dla danej konfiguracji. Umożliwiają testowanie konkretnych scenariuszy i identyfikowanie potencjalnych wąskich gardeł wydajności przed wdrożeniem zmian. Oferują również szerszy zakres metryk wydajności i szczegółowe audyty.

Niestety dane laboratoryjne mogą nie odzwierciedlać rzeczywistych doświadczeń użytkowników ze względu na różnice w urządzeniach czy warunkach sieciowych. Symulowane ograniczanie przepustowości sieci może nie być na tyle dokładne co rzeczywiste warunki. Dane laboratoryjne nie rejestrują problemów z wydajnością, które występują po początkowym załadowaniu strony lub w wyniku interakcji użytkownika.

Dane terenowe – dostarczane przez CrUX – reprezentują anonimowe dane o wydajności od rzeczywistych użytkowników korzystających z przeglądarki Chrome. Odzwierciedlają rzeczywiste doświadczenia użytkowników na różnych urządzeniach i w różnych warunkach sieciowych. W takim razie są najdokładniejszym pomiarem wydajności strony z perspektywy użytkownika zawierając przy tym wskaźniki Core Web Vitals. Ogromnym minusem jest jednak to, że dostępność danych terenowych zależy od popularności strony, tj. im więcej odwiedzin na stronie, tym te dane są dokładniejsze. Dane terenowe są zliczane w przestrzeni 28 dni ale potrzebuję jeszcze 2 dni na „przemielenie” tych informacji, więc realny czas wynosi 30 dni.

Reasumując, dane laboratoryjne są świetne do diagnozowania i wielokrotnego poprawiania, gdy dane terenowe pokazują rzeczywisty wpływ tych zmian na użytkowników i są ostatecznym celem optymalizacji.

Relacje i różnice między PSI, CrUX i Lighthouse

PSI jest najbardziej przyjaznym dla użytkownika narzędziem do szybkiego przeglądu, a nie opierania się w 100% na prezentowanych zaleceniach. CrUX dostarcza wiarygodne dane o doświadczeniach użytkowników, podczas gdy Lighthouse oferuje dogłębną analizę techniczną.

Propozycja i rekomendacje

PageSpeed Insights jest idealny, gdy potrzebny jest szybki, całościowy obraz wydajności strony internetowej na urządzeniach mobilnych i stacjonarnych. Jest to również dobre narzędzie, aby zobaczyć zarówno dane o rzeczywistych doświadczeniach użytkowników, jak i informacje diagnostyczne oparte na testach laboratoryjnych w jednym miejscu. PSI pomaga w identyfikacji natychmiastowych możliwości poprawy wydajności na podstawie audytów Lighthouse oraz umożliwia sprawdzenie oceny Core Web Vitals dla konkretnego adresu URL.

Na danych z CrUX warto polegać, gdy chcesz zrozumieć, jak rzeczywiści użytkownicy doświadczają wydajności naszej witryny w czasie.

• PROTIP: CrUX może być również użyteczny do porównywania wydajności naszej witryny z konkurencją (jeśli ich dane są też dostępne) oraz do ogólnego monitorowania trendów wydajności witryny bez konieczności przeprowadzania testów syntetycznych

Lighthouse bezpośrednio jest najbardziej przydatny podczas procesu tworzenia i rozwoju strony, aby proaktywnie identyfikować i naprawiać problemy z wydajnością, dostępnością i innymi aspektami jakościowymi. Można również wykorzystać specyficzne funkcje Lighthouse, takie jak Stack Packs, które dostarczają rekomendacje dostosowane do używanych technologii.

Obydwa narzędzia generują listę rekomendacji, dlatego proponuję podejście „priorytetyzacji zadań”. Polega to na tym, by skupić się najpierw na tych, które mają największy wpływ na Core Web Vitals. Przed optymalizacją można też skorzystać z oficjalnego kalkulatora oceny Lighthouse do symulacji.

Kalkulator oceny Lighthouse

Kalkulator oceny Lighthouse to interaktywna aplikacja webowa, która umożliwia bardzo szybką symulację jak zmiany w poszczególnych metrykach wpływają na końcową ocenę procentową. Dlatego zamiast biernie przyjmować wynik z raportu każdy może:

1. Eksperymentować z wagami metryk i zrozumieć, które metryki mają największy udział w ogólnej ocenie. Lighthouse cyklicznie aktualizuje te wagi, aby jak najlepiej odzwierciedlały odczucia wydajności przez rzeczywistych użytkowników. Kalkulator prezentuje zawsze aktualny model wagi metryk
2. Symulować wpływ optymalizacji, czyli zanim poświęcisz godziny na poprawę konkretnego wskaźnika, możesz w kalkulatorze sprawdzić, jakiej procentowej poprawy ogólnego wyniku należy się spodziewać po osiągnięciu określonej wartości metryki. Pomaga to w priorytetyzacji zadań i efektywnym alokowaniu zasobów
3. Uczyć się o progach punktowych – serio 🙂 – każda metryka jest oceniana w skali 0-100 na podstawie jej surowej wartości (np. w milisekundach). Kalkulator wizualizuje te krzywe punktacji, pokazując przy jakich wartościach metryka zaczyna być oceniana jako „dobra” (zielona), „wymagająca poprawy” (pomarańczowa) lub „słaba” (czerwona)
4. Porównać historyczne wagi, ponieważ kalkulator pozwala wybrać i zobaczyć jak wyglądałby wynik przy zastosowaniu wag z poprzednich głównych wersji Lighthouse, co może być pomocne w analizie długoterminowych trendów i wpływu zmian w metodologii samego narzędzia

Link do kalkulatora: https://googlechrome.github.io/lighthouse/scorecalc/

Podsumowanie, czyli skondensowana wiedza z artykułu

Jeśli chcesz świadomie dbać o wydajność swojej strony, nie polegaj na jednym narzędziu:

• Użyj PageSpeed Insights, aby szybko zdiagnozować problemy i zobaczyć dane z Lighthouse i ewentualnie CrUX ale nie sugeru się cyframi i kolorami w kółeczku
• Sprawdzaj dane z CrUX, jeśli Twoja strona generuje wystarczający ruch i zostały spełnione warunki prywatności, to będzie całkiem wiarygodna ocena
• Analizuj Lighthouse lokalnie w DevTools
• Skorzystaj z rozwiązania RUM, monitorującego użytkowników w czasie rzeczywistym

💡 Pamiętaj: stronę optymalizuje się dla ludzi (i robotów wyszukiwarek :D), a nie dla narzędzi takich jak PageSpeed Insight!

Ludzie i roboty lubią lekkie, wydajne strony. Trochę więcej napisałem o tym w artykule „Co to jest render budget i jak go zoptymlizować?„, w którym wyjaśniam kwestie wydajnej strony stritce pod Googlebot.

1. PageSpeed Insight – https://pagespeed.web.dev/ ↩︎
2. Strona rozszerzenia Lighthouse do przeglądarki Chrome ↩︎
3. Biblioteka Web Vitals ↩︎