Page Speed Insights: Kompleksowy przewodnik po optymalizacji
PageSpeed Insights to bezpłatne narzędzie Google, które ocenia szybkość strony w skali 0-100 na bazie danych laboratoryjnych i danych rzeczywistych z Chrome.
Jako konsultant SEO, Paweł Wołoszyn, traktuję PageSpeed Insights jako punkt startowy do diagnozy, a nie jako cel sam w sobie. W audycie patrzę przede wszystkim na dane od realnych użytkowników z CrUX, bo to one pokazują, jak strona zachowuje się na słabszym łączu i starszym telefonie, nie laboratoryjny symulator.
Najczęstszy błąd, jaki widzę u klientów, to pogoń za setką punktów w teście, podczas gdy realni odwiedzający wciąż czekają na załadowanie największego elementu strony. Drugi typowy problem to optymalizowanie strony głównej, gdy większość ruchu z Google wchodzi na podstrony produktowe czy blogowe.
PageSpeed Insights nie jest gotowym planem działania, tylko listą objawów do zinterpretowania pod kątem konkretnej strony, dlatego zaczynam od kilku najważniejszych szablonów w serwisie i poprawiam to, co realnie opóźnia wyświetlenie treści, najczęściej obrazy i skrypty firm trzecich.
Google PageSpeed Insights (PSI) to bezpłatne narzędzie Google, które analizuje szybkość strony internetowej i wystawia ocenę od 0 do 100 wraz z konkretnymi rekomendacjami. Szybkość ładowania to jeden z kluczowych czynników wpływających nie tylko na doświadczenie użytkownika, ale też na pozycję w wynikach wyszukiwania Google. Narzędzie diagnozuje problemy z wydajnością i pokazuje, co konkretnie poprawić, a zrozumienie jego działania to fundament skutecznej optymalizacji.
Jak działa PageSpeed Insights: wynik, dane i kategorie oceny
Skąd biorą się dane: laboratoryjne i rzeczywiste
PSI łączy dwa źródła danych. Dane laboratoryjne (Lab Data) pochodzą z symulowanego testu Lighthouse: Google uruchamia stronę na emulowanym urządzeniu mobilnym lub w warunkach desktopowych, przy ustalonej prędkości łącza, dzięki czemu wynik jest powtarzalny i nadaje się do debugowania konkretnych problemów. Dane rzeczywiste (Field Data) pochodzą z Chrome UX Report (CrUX) i pokazują, jak stronę faktycznie ładowali użytkownicy przeglądarki Chrome w ciągu ostatnich 28 dni. Jeśli witryna nie generuje wystarczającego ruchu, PSI nie pokaże danych rzeczywistych i oprze ocenę wyłącznie na teście laboratoryjnym.
Jak czytać wynik od 0 do 100
Wynik wydajności (Performance Score) to liczba od 0 do 100 oznaczona kolorem: zielony (90-100) to wynik dobry, pomarańczowy (50-89) oznacza, że strona wymaga poprawy, a czerwony (poniżej 50) to wynik słaby. Ta liczba nie jest prostą średnią, tylko wypadkową pięciu ważonych metryk laboratoryjnych:
| Metryka | Waga w wyniku |
|---|---|
| Total Blocking Time (TBT) | 30% |
| Largest Contentful Paint (LCP) | 25% |
| Cumulative Layout Shift (CLS) | 25% |
| First Contentful Paint (FCP) | 10% |
| Speed Index | 10% |
Poza samym wynikiem punktowym PSI ocenia stronę w czterech kategoriach: Performance, Accessibility (dostępność), Best Practices (dobre praktyki) i SEO. Kategorii PWA, obecnej w starszych wersjach narzędzia, Google już nie wyświetla.
PageSpeed Insights a raport w Google Search Console
PSI testuje pojedynczy adres URL na żądanie i łączy świeży test laboratoryjny z najnowszymi danymi CrUX. Raport „Podstawowe wskaźniki internetowe" w Search Console działa inaczej, bo pokazuje trendy dla całej witryny w czasie i grupuje adresy URL według podobieństwa, dzięki czemu łatwiej wychwycić, które grupy stron mają realny problem z wydajnością u prawdziwych użytkowników.
Co wpływa na wynik w Page Speed Insights?
Na wynik w PageSpeed Insights wpływa szereg czynników technicznych, od jakości kodu front-endowego i optymalizacji zasobów multimedialnych, po wydajność serwera i konfigurację mechanizmów cache. Kluczowe jest kompleksowe podejście obejmujące zarówno optymalizację kodu, zasobów, jak i infrastruktury serwerowej, bo zaniedbanie jednego elementu potrafi zniweczyć pracę włożoną w pozostałe.
Jak kod strony wpływa na jej szybkość?
Nieefektywny, nieuporządkowany lub zbyt rozbudowany kod front-endowy (HTML, CSS, JavaScript) bezpośrednio wydłuża czas renderowania strony przez przeglądarkę. Każda linijka kodu, zwłaszcza nieużywane reguły CSS czy blokujące renderowanie skrypty JavaScript, musi zostać przetworzona, co opóźnia wyświetlenie treści użytkownikowi.
Dlaczego optymalizacja obrazów jest kluczowa?
Optymalizacja obrazów jest kluczowa, bo zbyt duże pliki graficzne są jednym z głównych czynników spowalniających ładowanie witryny. Obrazy często stanowią większość wagi strony, a ich kompresja i użycie nowoczesnych formatów, takich jak WebP czy AVIF, drastycznie skraca czas potrzebny na ich pobranie.
Jak liczba zapytań HTTP spowalnia stronę?
Każde zapytanie HTTP do serwera generuje dodatkowe opóźnienie, a ich duża liczba, wynikająca z wielu plików CSS, JS czy obrazów, sumarycznie wydłuża czas ładowania strony. Przeglądarka musi nawiązać osobne połączenie dla każdego zasobu, co jest procesem czasochłonnym, zwłaszcza na wolniejszych połączeniach mobilnych.
Jaką rolę odgrywa hosting w PageSpeed?
Wydajność hostingu odgrywa fundamentalną rolę, bo szybki i stabilny serwer skraca czas odpowiedzi serwera (TTFB – Time to First Byte), czyli jeden z pierwszych mierzonych wskaźników. Nawet najlepiej zoptymalizowana strona będzie działać wolno, jeśli stoi na przeciążonym lub źle skonfigurowanym serwerze.
Czy zewnętrzne skrypty obniżają wynik?
Tak, nadmiar zewnętrznych skryptów, takich jak reklamy, narzędzia analityczne czy widgety mediów społecznościowych, znacząco obniża wynik. Generują one dodatkowe zapytania HTTP do zewnętrznych serwerów, często blokują renderowanie strony i wprowadzają opóźnienia, nad którymi nie mamy pełnej kontroli.
Co to jest cache i jak przyspiesza ładowanie?
Cache to mechanizm przechowywania statycznych zasobów strony (np. obrazów, plików CSS) w pamięci podręcznej przeglądarki lub serwera, który przyspiesza jej ponowne ładowanie, eliminując konieczność pobierania tych samych danych. Dzięki temu przy kolejnych wizytach strona wczytuje się niemal natychmiastowo.
Na czym polega kompresja GZIP i Brotli?
Kompresja GZIP i Brotli polega na zmniejszeniu rozmiaru plików tekstowych (HTML, CSS, JS) przesyłanych z serwera do przeglądarki bez utraty ich zawartości. Według dokumentacji MDN dobrze skonfigurowana kompresja tekstowa potrafi zmniejszyć wagę niektórych dokumentów nawet o 70%, co realnie skraca czas ich pobierania i poprawia ogólną szybkość ładowania strony.
Czym jest sieć CDN i kiedy jej używać?
Sieć CDN (Content Delivery Network) to globalnie rozproszona sieć serwerów, która przyspiesza ładowanie strony, dostarczając jej zasoby z lokalizacji geograficznie najbliższej użytkownikowi. CDN warto stosować szczególnie przy witrynach o zasięgu międzynarodowym, bo minimalizuje opóźnienia wynikające z dużej odległości od serwera macierzystego.
Zanim zaczniesz wprowadzać zmiany, skup się na rekomendacjach PageSpeed Insights oznaczonych jako „Największe możliwości". Naprawienie 2-3 kluczowych problemów, takich jak brak kompresji obrazów czy blokujące renderowanie skrypty, często daje większą poprawę wyniku niż wdrożenie kilkunastu drobnych optymalizacji.
Jak poprawić wynik w PageSpeed Insights: 8 technik
Poprawa wyniku w PageSpeed Insights wymaga wdrożenia konkretnych technik optymalizacyjnych, które koncentrują się na redukcji rozmiaru zasobów, skróceniu czasu ich dostarczania i usprawnieniu sposobu, w jaki przeglądarka renderuje stronę. Poniższe metody stanowią fundament skutecznej optymalizacji wydajności.
Minimalizuj kod HTML, CSS i JavaScript
Minifikacja kodu polega na automatycznym usunięciu wszystkich zbędnych znaków, takich jak spacje, komentarze i znaki nowej linii, bez zmiany jego funkcjonalności. Proces ten zmniejsza rozmiar plików, co przekłada się na szybsze ich pobieranie. Warto też rozważyć usunięcie nieużywanego kodu (tree shaking) oraz łączenie plików, żeby zredukować liczbę zapytań HTTP.
Stosuj kompresję i nowoczesne formaty obrazów
Używanie nowoczesnych formatów obrazów, takich jak WebP lub AVIF, pozwala uzyskać znacznie lepszą kompresję przy zachowaniu wysokiej jakości wizualnej w porównaniu do tradycyjnych formatów JPG czy PNG. Niezbędne jest też wdrożenie techniki lazy loading, która odracza ładowanie obrazów spoza widocznego obszaru ekranu do momentu, gdy użytkownik zacznie do nich przewijać.
| Format | Poziom kompresji | Obsługa przezroczystości | Wsparcie przeglądarek | Najlepsze zastosowanie |
|---|---|---|---|---|
| JPEG | Wysoki (stratny) | Nie | Bardzo szerokie | Zdjęcia, złożone grafiki |
| PNG | Średni (bezstratny) | Tak | Bardzo szerokie | Logotypy, ikony, grafiki z przezroczystością |
| WebP | Bardzo wysoki (stratny i bezstratny) | Tak | Szerokie (nowoczesne przeglądarki) | Uniwersalny zamiennik dla JPEG i PNG |
| AVIF | Najwyższy (stratny i bezstratny) | Tak | Ograniczone (najnowsze przeglądarki) | Grafiki wymagające maksymalnej kompresji |
Wdróż cache przeglądarki i serwera
Prawidłowa konfiguracja cache'owania to jedna z najskuteczniejszych metod optymalizacji. Ustawienie odpowiednich nagłówków HTTP (np. Cache-Control) instruuje przeglądarkę, jak długo może przechowywać pobrane zasoby. Cache po stronie serwera (np. Varnish, Redis) dodatkowo przyspiesza generowanie dynamicznej treści.
Włącz kompresję zasobów GZIP lub Brotli
Aktywacja kompresji GZIP lub nowocześniejszej Brotli na serwerze to standard, który znacząco redukuje rozmiar przesyłanych plików HTML, CSS i JavaScript. Większość nowoczesnych hostingów ma tę opcję włączoną domyślnie, ale zawsze warto to zweryfikować, bo jej brak to częsty i łatwy do naprawienia błąd.
Wykorzystaj sieć dostarczania treści (CDN)
Implementacja CDN polega na rozproszeniu kopii statycznych zasobów Twojej strony na serwerach na całym świecie. Gdy użytkownik odwiedza witrynę, treści są mu dostarczane z najbliższego serwera, co minimalizuje opóźnienia sieciowe (latency) i przyspiesza ładowanie, zwłaszcza dla odbiorców z różnych kontynentów.
Zoptymalizuj serwer i bazę danych
Optymalizacja zaplecza jest równie ważna jak optymalizacja front-endu. Obejmuje to wybór szybkiego hostingu, aktualizację oprogramowania (np. PHP do najnowszej wersji) oraz optymalizację zapytań do bazy danych. Długo wykonujące się zapytania mogą blokować generowanie strony i znacząco wydłużać czas odpowiedzi serwera.
Ogranicz liczbę zewnętrznych skryptów
Przeprowadź audyt wszystkich zewnętrznych skryptów i wtyczek na swojej stronie i usuń te, które nie są absolutnie niezbędne. Dla pozostałych rozważ lokalne hostowanie (jeśli licencja na to pozwala) lub asynchroniczne ładowanie (atrybuty async, defer), żeby nie blokowały renderowania głównej treści strony.
Regularnie monitoruj wyniki i reaguj
Optymalizacja szybkości to proces ciągły, a nie jednorazowe działanie. Regularnie testuj swoją stronę za pomocą PageSpeed Insights i innych narzędzi, żeby monitorować wyniki i szybko reagować na nowe problemy. Każda nowa funkcja, wtyczka czy zmiana w treści może wpłynąć na wydajność witryny.
Pamiętaj, że Google PageSpeed Insights domyślnie analizuje stronę z perspektywy urządzenia mobilnego na wolniejszym połączeniu sieciowym. Priorytetyzuj optymalizację pod kątem mobile-first, bo to na tych urządzeniach użytkownicy najczęściej doświadczają problemów z wolnym ładowaniem, a Google przykłada do tego wskaźnika największą wagę.
Page Speed a SEO: Dlaczego szybkość jest kluczowa?
Szybkość ładowania strony przestała być jedynie technicznym detalem, a stała się jednym z kluczowych filarów nowoczesnego SEO i marketingu cyfrowego. Jej wpływ wykracza daleko poza samą technologię, bezpośrednio oddziałując na widoczność w Google, zachowanie użytkowników i realizację celów biznesowych.
Core Web Vitals jako czynnik rankingowy Google
Core Web Vitals (Podstawowe Wskaźniki Internetowe) to zestaw metryk wydajności, które Google oficjalnie uznaje za jeden z czynników rankingowych w ramach tzw. Page Experience. Wskaźniki te (LCP, INP, CLS) mierzą odpowiednio szybkość ładowania, interaktywność i stabilność wizualną, a ich optymalizacja jest niezbędna do osiągnięcia wysokich pozycji.
Core Web Vitals w liczbach: progi LCP, INP i CLS
| Metryka | Dobry wynik | Wymaga poprawy | Wynik słaby |
|---|---|---|---|
| LCP (Largest Contentful Paint) | do 2,5 s | 2,5-4 s | powyżej 4 s |
| INP (Interaction to Next Paint) | do 200 ms | 200-500 ms | powyżej 500 ms |
| CLS (Cumulative Layout Shift) | do 0,1 | 0,1-0,25 | powyżej 0,25 |
Strona przechodzi ocenę Core Web Vitals, gdy wszystkie trzy metryki mieszczą się w progu dobrym dla co najmniej 75% wizyt zarejestrowanych w CrUX w ciągu ostatnich 28 dni. INP zastąpiło starszą metrykę FID (First Input Delay) jako oficjalny Core Web Vital w marcu 2024 roku, więc jeśli w starszych materiałach natrafisz na FID, to już nieaktualna informacja.
Jak szybkość wpływa na doświadczenie użytkownika?
Szybkość ładowania strony bezpośrednio kształtuje doświadczenie użytkownika (UX), bo wolne witryny frustrują, zniechęcają i zwiększają prawdopodobieństwo opuszczenia strony. Użytkownicy oczekują natychmiastowego dostępu do informacji, a każda sekunda opóźnienia negatywnie wpływa na ich percepcję marki i satysfakcję.
Lepsza konwersja i niższy współczynnik odrzuceń
Szybsze strony internetowe notują statystycznie wyższe wskaźniki konwersji i niższe współczynniki odrzuceń (bounce rate). Badania wielokrotnie potwierdziły, że nawet niewielkie opóźnienie w ładowaniu potrafi drastycznie zmniejszyć liczbę zrealizowanych transakcji, wypełnionych formularzy czy zapisów na newsletter, bo użytkownicy tracą cierpliwość i rezygnują.
Źródła
- PageSpeed Insights – dokumentacja Google Developers – https://developers.google.com/speed/docs/insights/v5/about
- Web Vitals – web.dev – https://web.dev/articles/vitals
- Lighthouse performance scoring – Chrome for Developers – https://developer.chrome.com/docs/lighthouse/performance/performance-scoring
- Layout Instability (CLS) – W3C – https://www.w3.org/TR/layout-instability/
- Compression in HTTP – MDN Web Docs – https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Compression
- PageSpeed Insights – Wikipedia – https://de.wikipedia.org/wiki/PageSpeed_Insights
Najczęściej zadawane pytania (FAQ)
Jaka jest różnica między danymi laboratoryjnymi a rzeczywistymi w PageSpeed Insights?
Dane laboratoryjne (Lab Data) pochodzą z symulowanego testu Lighthouse przeprowadzonego w kontrolowanych warunkach sieciowych, a dane rzeczywiste (Field Data) to pomiary zebrane od prawdziwych użytkowników Chrome w ramach Chrome UX Report (CrUX). Dane rzeczywiste liczą się bardziej przy ocenie Core Web Vitals, bo pokazują faktyczne doświadczenie odwiedzających, a nie symulację.
Czy wynik 100/100 w PageSpeed Insights jest konieczny?
Nie, osiągnięcie 100/100 bywa bardzo trudne i rzadko opłacalne biznesowo. Liczy się przede wszystkim ocena dobra, czyli 90 punktów i więcej, oraz to, żeby strona faktycznie ładowała się szybko dla realnych użytkowników, a nie perfekcyjny wynik kosztem funkcjonalności.
Jakie darmowe narzędzia oprócz PageSpeed Insights warto znać?
Przydatne są GTmetrix z bardziej szczegółowym wodospadem ładowania zasobów, WebPageTest do testów z różnych lokalizacji i urządzeń oraz zakładka Lighthouse w narzędziach deweloperskich Chrome. Wszystkie bazują na podobnych metrykach, więc wyniki da się ze sobą porównywać.
Czy przejście na HTTP/2 lub HTTP/3 automatycznie poprawi wynik?
Samo przejście nie jest bezpośrednim czynnikiem rankingowym, ale zwykle przyspiesza pobieranie zasobów dzięki multipleksowaniu, czyli obsłudze wielu plików w jednym połączeniu. To pośrednio poprawia metryki Core Web Vitals, a więc też ogólny wynik w PageSpeed Insights.
Jak często testować szybkość strony?
Warto testować regularnie, przynajmniej raz w miesiącu, a dodatkowo po każdej większej zmianie: nowej funkcjonalności, aktualizacji motywu czy dodaniu sporej ilości treści. Dzięki temu szybciej wyłapiesz spadek wydajności, zanim wpłynie realnie na ruch i konwersje.
Czy animacje CSS wpływają na wynik tak samo jak JavaScript?
Tak, złożone animacje CSS, zwłaszcza te zmieniające width, height czy margin, wymuszają przeliczanie układu strony (reflow) i ponowne rysowanie (repaint), co obciąża procesor. Może to pogorszyć INP (Interaction to Next Paint) i ogólną płynność działania witryny.