Jak zdobyć 100 punktów wydajności w Page Speed Insights?

Chcesz, aby Twoja strona działała szybko i sprawnie, a jej użytkownicy nie musieli czekać na załadowanie treści? Maksymalna ocena w Google PageSpeed Insights to cel wielu właścicieli stron, ale w praktyce osiągnięcie 100 punktów bywa trudne, zwłaszcza w przypadku złożonych witryn. W tym artykule pokażemy realne sposoby na znaczną poprawę wydajności strony, dzięki którym przyspieszysz ładowanie, zwiększysz komfort użytkowników i zyskasz przewagę w SEO — nawet jeśli perfekcyjny wynik pozostanie poza zasięgiem.

Co to jest Page Speed Insights?

PageSpeed Insights to narzędzie stworzone przez Google, które mierzy szybkość działania strony oraz efektywność jej zasobów. Analizuje wydajność zarówno na urządzeniach mobilnych, jak i komputerach, przyznając ocenę w skali od 0 do 100. Choć maksymalny wynik 100 jest celem wielu właścicieli stron, jego osiągnięcie bywa niezwykle trudne. W praktyce wynik w okolicach 70 punktów uznaje się już za dobrą wydajność, zapewniającą komfort użytkowników i solidną podstawę do dalszej optymalizacji.

Dlaczego prędkość strony jest ważna?

Prędkość ładowania strony to jeden z kluczowych czynników wpływających zarówno na doświadczenie użytkowników, jak i na pozycję witryny w wynikach wyszukiwania. Wolno wczytująca się strona może zniechęcić odwiedzających do zakupu lub dalszego korzystania z serwisu. Dzięki optymalizacji każda strona może osiągnąć wysoki wynik w PageSpeed Insights — często określany jako „na zielono”, czyli około 90 punktów. Trzeba jednak pamiętać, że uzyskanie takiego rezultatu może wymagać kilku dni pracy i wdrożenia szeregu usprawnień, aby witryna spełniała wszystkie zalecenia narzędzia. Nie zawsze jest to też możliwe — budowa niektórych stron może być bardzo złożona, a zaawansowane funkcjonalności, takie jak rozbudowane skrypty, utrudniają osiągnięcie maksymalnego wyniku.

Ważne wskaźniki, na podstawie których mierzony jest wynik

FCP (First Contentful Paint)

Pierwsze wyrenderowanie treści mierzy czas, w którym na stronie pojawia się pierwszy widoczny element — może to być tekst, obraz lub blok wizualny. Zalecany wynik roku to około 1,5 sekundy, choć w przypadku bardziej złożonych stron warto dążyć do minimalizacji tego czasu.

LCP (Largest Contentful Paint)

Największe wyrenderowanie treści mierzy czas, potrzebny do załadowania największego elementu widocznego na ekranie użytkownika (tzw. above the fold), np. banera, dużego obrazu lub slajdu. Dążymy do LCP poniżej 2,5 sekundy, co jest uznawane za dobry wynik dla doświadczenia użytkownika.

CLS (Cumulative Layout Shift)

Skumulowane przesunięcie układu ocenia stabilność wizualną strony. Wskaźnik CLS mierzy, jak bardzo elementy na stronie przesuwają się w trakcie ładowania. Niska wartość CLS (poniżej 0,1) oznacza, że użytkownik nie doświadcza nieoczekiwanych zmian układu, np. nieklikalnych przycisków, które nagle się przesuwają.

TBT (Total Blocking Time)

Całkowity czas blokowania to wskaźnik mierzący, jak długo przeglądarka była „zablokowana” przez wykonywanie skryptów po załadowaniu pierwszych treści, uniemożliwiając użytkownikowi płynną interakcję ze stroną. TBT liczy czas pomiędzy First Contentful Paint (FCP) a Time to Interactive (TTI), sumując wszystkie okresy, w których zadania głównego wątku trwały dłużej niż 50 ms.

Speed Index

Indeks prędkości pokazuje, jak szybko treści na stronie stają się widoczne dla użytkownika podczas ładowania. Im niższy wynik, tym lepiej postrzegana jest wydajność strony.

Jak zdobyć 100 punktów w PageSpeed Insights?

Możliwości poprawy wyników pokazywane są bezpośrednio pod otrzymanym wynikiem. Znajdziemy tam propozycję elementów do poprawy, a także zaliczone audyty. Co oznaczają sugestie Google? Opisujemy kilka przykładowych z nich poniżej:

Wyeliminuj zasoby blokujące renderowanie

Chodzi tutaj głównie o zasoby zewnętrzne i ich rozmiar czyli głównie o zewnętrzne pliki CSS i JavaScript, które opóźniają pierwsze wyświetlenie strony.
Blokują one pierwsze załadowanie strony.

Rozwiązanie:

• Wydziel krytyczny CSS (kod potrzebny do wyrenderowania pierwszego ekranu strony) i umieść go w nagłówku.
• Pozostałe style i skrypty ładuj asynchronicznie lub z opóźnieniem.

Ogranicz nieużywany JavaScript

Wiele skryptów jest ładowanych na każdej podstronie, mimo że są potrzebne tylko w wybranych miejscach (np. ReCaptcha, slider na stronie głównej)..

Rozwiązanie:

• Ładuj skrypty tylko tam, gdzie są potrzebne.

• Rozważ zastąpienie ciężkich bibliotek czystym JavaScriptem.

Usuń nieużywany kod CSS

Usunięcie nieużywanych instrukcji CSS, czyli kodu, którego nie wykorzystuje strona.

Rozwiązanie:

• Przeanalizuj kod i usuń style, które nie są wykorzystywane.

• Skorzystaj z narzędzi automatyzujących czyszczenie CSS (np. PurgeCSS).

Unikaj document.write()

Funkcja JavaScript, która pozwala na dodanie elementów do strony przy jej ładowaniu np. reklam lub innych dynamicznych funkcjonalności. Zamiast niej można używać asynchronicznego ładowania zasobów za pomocą instrukcji async.

Włącz kompresję tekstu

Zmniejsza rozmiar przesyłanych plików HTML, CSS i JS.

Rozwiązanie:

• Włącz kompresję Brotli lub Gzip na serwerze.

Minifikacja

Usuwanie zbędnych znaków (spacji, komentarzy) z kodu.

Rozwiązanie:

• Minifikuj CSS i JS przed publikacją.

Zminimalizuj aktywność głównego wątku

Zbyt duża liczba zadań w głównym wątku spowalnia interakcję.
Rozwiązanie:

• Ogranicz liczbę zapytań sieciowych.

• Wydziel krytyczny CSS i usuń nieużywany JS.

• Stosuj lazy-load dla obrazów i skryptów.

Wyświetlaj obrazy w formatach nowej generacji

Google sugeruje nam używanie nowych formatów plików graficznych: WebP lub AVIF. Pozwala to na znaczne poprawienie prędkości.

Ogranicz wpływ kodu spoza witryny

Na stronie ładujemy różne zasoby z innych witryn np. skrypty z Google Analytics, Google Tag Manager, Piksel Facebooka i wiele innych. Mogą one skutecznie spowalniać stronę. Rozwiązaniem może być przeniesienie zasobów na własny dysk - np. czcionek. Ponadto, by ograniczyć wpływ kodu spoza witryny możemy zastosować różne techniki, które pozwolą na opóźnienie ładowania skryptów.

Rozwiązanie:

• Hostuj czcionki lokalnie.

• Opóźniaj ładowanie zewnętrznych skryptów.

Zapewnij widoczność tekstu podczas ładowania czcionek internetowych

W tym przypadku optymalizacji ma na celu UX. Chodzi o to, by pokazywać treść na stronie za pomocą standardowej czcionki, zanim załaduje się ta niestandardowa. Wystarczy zastosować właściwość font-display:swap;

Odłóż ładowanie obrazów poza ekranem

Chodzi tutaj o optymalizację obrazów za pomocą lazy-load, czyli ładowania obrazów z opóźnieniem. Lazy-load ładuje obrazy dopiero wtedy, gdy użytkownik przewinie do ich miejsca na stronie, co poprawia FCP, LCP i INP.

Unikaj zbyt dużego DOM

Poprzez element DOM rozumie się dowolny element na stronie np. obrazek, div, przycisk. Niektóre z nich mogą być elementami podrzędnymi w stosunku do swoich rodziców (elementów podrzędnych). Jeżeli elementy te są głęboko zagnieżdżone lub jest już bardzo dużo, PageSpeed Insights wykrywa problem. Obecnie dzieje się tak gdy jest więcej niż 1500 elementów, głębokość jest większa niż 32 poziomy oraz gdy strona zawiera więcej niż 60 elementów potomnych.