WWW • 2025-09-24

Core Web Vitals - co się naprawdę liczy

Wprowadzenie

Core Web Vitals to trzy wskaźniki, które Google wykorzystuje do oceny realnego doświadczenia użytkownika: LCP (szybkość pojawienia się głównej treści), INP (responsywność interakcji), CLS (stabilność układu). Dobre wartości to nie tylko SEO - to niższy bounce, wyższe konwersje i mniej frustracji użytkowników. Poniżej krótki przewodnik „co i jak” dla stron firmowych i sklepów.

Kroki / praktyka

1. Diagnoza aktualnego stanu

Uruchom PageSpeed Insights i sprawdź dane CrUX (field data).
Zidentyfikuj główne szablony: Home, Oferta/Produkt, Blog, Koszyk/Checkout.
Zanotuj kluczowy element LCP (np. hero image, nagłówek), największe bloki JS (INP) i źródła przesunięć układu (CLS).
Dodaj na stronę web-vitals.js (RUM), aby zbierać metryki od realnych użytkowników.

2. Wdrożenie rekomendowanych działań

LCP (<= 2,5 s – dobrze)

Kompresuj i preloaduj hero image; używaj AVIF/WEBP, sizes/srcset.
Krytyczny CSS inline, reszta defer/async; minimalizuj blokujący CSS/JS.
Włącz HTTP/2+, CDN, skróć TTFB (cache, SSR/edge, optymalizacja bazy).

INP (<= 200 ms – dobrze)

Redukuj JS: code-splitting, tree-shaking, usuwaj zbędne biblioteki.
Odkładaj ciężkie skrypty (chaty, mapy, A/B) do po interakcji.
Skracaj Main Thread: web workers, memoizacja, mniejsze React hydraty (islands/partial).

CLS (<= 0,1 – dobrze)

Redukuj JS: code-splitting, tree-shaking, usuwaj zbędne biblioteki.
Odkładaj ciężkie skrypty (chaty, mapy, A/B) do po interakcji.
Skracaj Main Thread: web workers, memoizacja, mniejsze React hydraty (islands/partial).

3. Weryfikacja efektów i monitoring

Monitoruj field data (CrUX) i własny RUM (np. w GA4/BigQuery/Sentry).
Ustaw alerty: wzrost LCP/INP/CLS > próg przez 3 dni.
Co release – budżet wydajności (max JS/CSS, LCP cel, CLS cel) i regresy testami Lighthouse CI.

flowchart LR A[LCP - treść szybko widoczna] --> D[Lepsze UX + SEO + konwersje] B[INP - błyskawiczna reakcja] --> D C[CLS - stabilny układ] --> D %%Style classDef kpi fill:#003e7b,color:#ffffff,stroke:#ff6201,stroke-width:2px classDef out fill:#ff6201,color:#000000,stroke:#003e7b,stroke-width:2px class A,B,C kpi class D out

Checklist

Zmierz CWV na kluczowych szablonach - PSI + CrUX (field) i RUM na produkcji
Ustal element LCP i go zoptymalizuj - Preload, kompresja, krytyczny CSS
Zredukuj JS pod INP - Code-splitting, async/defer, usuń zbędne biblioteki
Zastabilizuj layout (CLS) - Wymiary mediów, preload fontów, brak „skaczących” banerów
Skróć TTFB - Cache, CDN, optymalizacja serwera/bazy, edge-rendering
Wprowadź budżety wydajności - Limity KB/requests, testy w CI, alerty
Szkolenie zespołu + procedury - „Definicja ukończenia” zawiera CWV i kontrolę regresji

Podsumowanie

Core Web Vitals to praktyczne kryteria jakości: szybkość pierwszego wrażenia (LCP), natychmiastowa reakcja (INP) i brak skakania strony (CLS). Zadbaj o nie na poziomie architektury (serwer/CDN), kodu (JS/CSS) i kontentu (obrazy/fonty) – efekty zobaczysz zarówno w SEO, jak i sprzedaży.