Optimizacja PageSpeed — Przyspiesz swoją stronę w 2026 roku

Dlaczego prędkość jest czynnikiem rankingowym

Google potwierdziło, że prędkość ładowania strony wpływa na pozycje w wynikach wyszukiwania. Wolne strony frustrują użytkowników, a Google chce zapewnić najlepsze doświadczenie. Dane od Google pokazują, że prawdopodobieństwo opuszczenia strony przez użytkownika wzrasta o 32% gdy czas ładowania wzrasta z 1 do 3 sekund.

Ale nie chodzi tylko o rankingi. Prędkość bezpośrednio wpływa na twój wynik finansowy:

Konwersje — Każda dodatkowa sekunda czasu ładowania redukuje konwersje o nawet 7%
Wskaźnik odrzuceń — 53% użytkowników mobilnych opuszcza stronę, która ładuje się ponad 3 sekundy
Doświadczenie użytkownika — Szybkie strony są postrzegane jako profesjonalne i budzące zaufanie

Core Web Vitals — metryki prędkości Google'a

Google mierzy prędkość za pomocą trzech metryk Core Web Vitals:

LCP — Largest Contentful Paint

Mierzy, kiedy największy widoczny element (zazwyczaj obraz lub nagłówek) kończy ładowanie.

Dobre: Ponad 2,5 sekundy
Wymaga poprawy: 2,5 — 4,0 sekundy
Słabe: Ponad 4,0 sekundy

INP — Interaction to Next Paint

Mierzy, jak szybko strona reaguje, gdy użytkownik wchodzi w interakcję (kliknie, wpisuje, przewija).

Dobre: Ponad 200ms
Wymaga poprawy: 200 — 500ms
Słabe: Ponad 500ms

CLS — Cumulative Layout Shift

Mierzy, jak bardzo układ zmienia się podczas ładowania. Znasz to uczucie — chcesz kliknąć coś, ale nagle treść się przemieszcza i klikasz coś innego.

Dobre: Ponad 0,1
Wymaga poprawy: 0,1 — 0,25
Słabe: Ponad 0,25

10 konkretnych wskazówek do optymalizacji

1. Optymalizuj obrazy

Obrazy są zazwyczaj największym problemem. Użyj nowoczesnych formatów, takich jak WebP lub AVIF, które mogą zmniejszyć rozmiar pliku o 30-50% bez widocznej utraty jakości.

Kompresuj wszystkie obrazy przed przesłaniem
Używaj loading="lazy" dla obrazów niewidocznych podczas początkowego ładowania
Zawsze określaj width i height, aby uniknąć CLS
Używaj responsywnych obrazów z srcset dla różnych rozmiarów ekranów

2. Minifikuj CSS i JavaScript

Usuń nieużywany kod, białe spacje i komentarze z plików CSS i JS. Większość narzędzi do budowy robi to automatycznie, ale upewnij się, że dzieje się to w produkcji.

3. Włącz kompresję

Upewnij się, że Twój serwer wysyła pliki z kompresją Gzip lub Brotli. To może zmniejszyć rozmiar plików o nawet 70%.

4. Użyj pamięci podręcznej przeglądarki

Ustaw nagłówki Cache-Control, aby przeglądarka przechowywała statyczne pliki (CSS, JS, obrazy) lokalnie. Przy następnym odwiedzeniu strony przez użytkownika, te pliki nie muszą być ponownie pobierane.

5. Zmniejsz czas odpowiedzi serwera

Czas odpowiedzi serwera (Time to First Byte, TTFB) powinien być poniżej 200ms. Rozwiązania:

Użyj szybkiego dostawcy hostingu
Włącz pamięć podręczną po stronie serwera
Optymalizuj zapytania do bazy danych
Użyj CDN do dostarczania statycznych plików z serwerów blisko użytkownika

6. Odkładanie niekrytycznego JavaScriptu

JavaScript, który nie jest potrzebny do początkowego widoku, powinien ładować się asynchronicznie z async lub defer. Zazwyczaj obejmuje to analitykę, widgety czatu i osadzenia z mediów społecznościowych.

7. Preload krytycznych zasobów

Użyj dla czcionek, CSS i obrazów, które są potrzebne do początkowego widoku. To mówi przeglądarce, aby nadała priorytet tym plikom.

8. Usuń zasoby blokujące renderowanie

CSS i JavaScript w blokują renderowanie strony. Przenieś niekrytyczne CSS na dół, a krytyczne CSS wklej w kod HTML (inline).

9. Użyj CDN

Sieć dostarczania treści (CDN) rozprowadza Twoje pliki na serwerach na całym świecie. Użytkownicy pobierają z najbliższego serwera, co znacznie zmniejsza opóźnienia.

10. Optymalizuj czcionki internetowe

Czcionki niestandardowe mogą opóźniać wyświetlanie tekstu:

Używaj font-display: swap, aby tekst był wyświetlany z czcionką zapasową, podczas gdy ładowana jest czcionka niestandardowa
Wybierz tylko te znaki, których używasz poprzez podzbiory czcionek
Preloaduj najważniejsze czcionki
Rozważ użycie czcionek systemowych do tekstu głównego

Jak przetestować swoją prędkość

Google PageSpeed Insights

Oficjalne narzędzie od Google. Daje dane laboratoryjne (symulowane) oraz dane z rzeczywistych użytkowników, a także konkretne sugestie poprawy.

Chrome DevTools

Otwórz DevTools (F12), przejdź do zakładki "Performance" i nagraj ładowanie strony. Zobaczysz dokładnie, co zajmuje czas i w jakiej kolejności ładują się pliki.

WebPageTest

Zaawansowane narzędzie testowe, które pozwala na testowanie z różnych lokalizacji i prędkości połączenia. Dostarcza szczegółowe diagramy wodospadu.

Priorytetyzacja — Zacznij tutaj

Jeśli musisz wybrać trzy rzeczy, na których się skupić:

Obrazy — Kompresuj i konwertuj do WebP. Największy wpływ przy najmniejszym wysiłku.
Pamięć podręczna — Ustaw poprawne nagłówki Cache-Control. Konfiguracja jednorazowa.
JavaScript — Odkładaj wszystko, co niekrytyczne. Zmniejsz liczbę skryptów zewnętrznych.

Chcesz wiedzieć, jak działa Twoja strona? Uruchom darmowy audyt i zobacz swoje Core Web Vitals oraz wynik prędkości.