Trzy sekundy, które decydują o wszystkim

Badania Google pokazują, że 53% użytkowników mobilnych opuszcza stronę, jeśli ładuje się dłużej niż 3 sekundy. Amazon obliczył, że każde 100 milisekund opóźnienia kosztuje ich 1% sprzedaży. Szybkość ładowania to nie abstrakcyjna metryka techniczna — to realne pieniądze i realni użytkownicy, którzy odchodzą do konkurencji.

Od 2021 roku szybkość strony jest oficjalnym czynnikiem rankingowym Google. Ale nawet gdyby nie było to brane pod uwagę w SEO, szybka strona po prostu zapewnia lepsze doświadczenie użytkownika — a to przekłada się na konwersje, czas spędzony na stronie i ogólne zadowolenie klientów.

Core Web Vitals — metryki, które się liczą

Google zdefiniowało trzy kluczowe metryki wydajności, znane jako Core Web Vitals:

LCP (Largest Contentful Paint) — czas do wyrenderowania największego widocznego elementu na stronie (zwykle główny obraz lub blok tekstu). Cel: poniżej 2,5 sekundy.

LCP mierzy, jak szybko użytkownik widzi główną treść strony. Jeśli Twój hero image ładuje się 5 sekund, to właśnie ta metryka będzie czerwona.

INP (Interaction to Next Paint) — czas od interakcji użytkownika (kliknięcie, dotknięcie) do momentu, gdy przeglądarka wyrenderuje odpowiedź wizualną. Cel: poniżej 200 milisekund.

INP zastąpiło wcześniejsze FID (First Input Delay) w marcu 2024 i mierzy responsywność strony na działania użytkownika. Jeśli po kliknięciu przycisku strona "zamiera" na pół sekundy, INP będzie złe.

CLS (Cumulative Layout Shift) — suma nieoczekiwanych przesunięć elementów podczas ładowania strony. Cel: poniżej 0,1.

CLS mierzy stabilność wizualną. Każdy zna sytuację, gdy chce kliknąć przycisk, ale w ostatniej chwili wskakuje reklama lub obraz i trafia się w coś innego. Właśnie to mierzy CLS.

Jak zmierzyć wydajność — narzędzia

Google Lighthouse to najpopularniejsze narzędzie do audytu wydajności. Jest wbudowane w Chrome DevTools (zakładka Lighthouse) i dostępne jako osobna strona pod adresem PageSpeed Insights. Generuje raport z oceną 0-100 i konkretnymi rekomendacjami.

Ważna uwaga: Lighthouse w DevTools mierzy wydajność na Twoim komputerze. PageSpeed Insights korzysta z danych laboratoryjnych i rzeczywistych (Chrome User Experience Report), co daje pełniejszy obraz.

Inne przydatne narzędzia:

  • WebPageTest — zaawansowane testy z różnych lokalizacji i przeglądarek, z wizualizacją kaskady ładowania zasobów
  • Chrome DevTools / Performance — szczegółowa analiza tego, co przeglądarka robi podczas ładowania strony
  • GTmetrix — połączenie Lighthouse z dodatkowymi metrykami i historią testów

Praktyczne sposoby na przyspieszenie strony

Optymalizacja obrazów

Obrazy to najczęściej najcięższe zasoby na stronie. Podstawowe kroki:

  • Konwertuj na nowoczesne formaty — WebP oferuje 25-35% lepszą kompresję niż JPEG, AVIF jeszcze lepszą
  • Ustaw wymiary — zawsze podawaj atrybuty width i height w HTML, żeby przeglądarka mogła zarezerwować miejsce (zapobiega CLS)
  • Lazy loading — dodaj loading="lazy" do obrazów poniżej linii zaginania (below the fold), żeby nie ładowały się od razu
  • Responsywne rozmiary — nie wysyłaj obrazu 4000px na telefon z ekranem 400px; użyj srcset

Minimalizacja i kompresja zasobów

  • Minifikacja CSS i JS — usunięcie białych znaków, komentarzy i skrócenie nazw zmiennych zmniejsza rozmiar plików o 20-40%
  • Kompresja Gzip/Brotli — konfiguracja na serwerze (np. w Nginx: gzip on;) zmniejsza transfer nawet o 70-80%
  • Usunięcie nieużywanego kodu — narzędzia takie jak Coverage w Chrome DevTools pokazują, ile CSS i JS jest faktycznie wykorzystywane

Optymalizacja ładowania zasobów

  • Critical CSS — wstrzyknij najważniejsze style inline w <head>, a resztę ładuj asynchronicznie
  • Preload kluczowych zasobów — <link rel="preload" href="font.woff2" as="font"> informuje przeglądarkę, żeby wcześniej pobrała ważne zasoby
  • Defer/async dla skryptów — <script defer src="app.js"> nie blokuje renderowania strony

Konfiguracja serwera

  • Cache HTTP — nagłówki Cache-Control pozwalają przeglądarce przechowywać statyczne zasoby lokalnie
  • CDN (Content Delivery Network) — serwowanie zasobów z serwerów geograficznie bliskich użytkownikowi
  • HTTP/2 lub HTTP/3 — nowsze wersje protokołu pozwalają na równoległe ładowanie wielu zasobów

Ile kosztuje wolna strona?

Warto policzyć konkretne koszty. Jeśli strona firmowa generuje 10 000 odwiedzin miesięcznie i ma współczynnik konwersji 2%, to daje 200 konwersji. Badania pokazują, że skrócenie czasu ładowania z 5 do 2 sekund może zwiększyć konwersję o 15-25%. To potencjalnie 30-50 dodatkowych konwersji miesięcznie — bez żadnych wydatków na reklamę.

Od czego zacząć?

Jeśli nie wiesz, od czego zacząć optymalizację, oto plan działania:

  1. Zmierz — uruchom PageSpeed Insights dla swojej strony i zanotuj wyniki
  2. Obrazy — to zwykle daje największy efekt przy najmniejszym nakładzie pracy
  3. Kompresja — włącz Gzip/Brotli na serwerze, jeśli jeszcze tego nie masz
  4. Cache — skonfiguruj nagłówki cache dla statycznych zasobów
  5. Zmierz ponownie — porównaj wyniki i przejdź do kolejnych optymalizacji

Szybkość strony to proces ciągły, nie jednorazowe zadanie. Regularne audyty i monitoring pozwalają wyłapywać regresje na bieżąco, zanim zaczną wpływać na użytkowników i pozycje w wyszukiwarce.