Core Web Vitals: Co musisz wiedzieć

Czym są Core Web Vitals

Core Web Vitals (CWV) to podzbiór sygnałów Page Experience używanych przez Google do rankingu. W przeciwieństwie do testów laboratoryjnych Lighthouse, CWV są mierzone na rzeczywistych użytkownikach za pomocą Chrome User Experience Report (CrUX).

Trzy aktualne metryki CWV:

LCP — Largest Contentful Paint

LCP mierzy czas do wyświetlenia największego widocznego elementu na stronie — zazwyczaj jest to obrazek hero lub H1.

Wartość	Ocena
≤ 2.5 sekundy	✅ Dobrze
2.5 – 4.0 sekundy	⚠️ Wymaga poprawy
> 4.0 sekundy	❌ Źle

Jak poprawić LCP

• Optymalizuj obrazy — konwertuj na WebP lub AVIF, dodaj loading="eager" dla obrazów hero.
• Preload LCP element — dodaj <link rel="preload" as="image">.
• Użyj CDN — zmniejsza TTFB.
• Usuń blokujące zasoby — przenieś niekrytyczne JS i CSS do defer/async.
• Renderowanie po stronie serwera — SSR znacznie poprawia LCP dla SPA.

CLS — Cumulative Layout Shift

CLS mierzy kumulacyjne przesunięcie elementów strony podczas ładowania.

Wartość	Ocena
≤ 0.1	✅ Dobrze
0.1 – 0.25	⚠️ Wymaga poprawy
> 0.25	❌ Źle

Jak poprawić CLS

• Określ rozmiary obrazów — zawsze dodawaj width i height.
• Zarezerwuj miejsce na reklamy — ustaw stałe rozmiary dla bloków reklamowych.
• Nie wstawiaj treści nad istniejącą — banery i powiadomienia o plikach cookie powinny być na dole.
• Preload czcionki — FOUT powoduje przesunięcia.

INP — Interaction to Next Paint

INP zastąpił FID w marcu 2024 roku. Mierzy opóźnienie między interakcją użytkownika a aktualizacją ekranu.

W przeciwieństwie do FID, INP śledzi wszystkie interakcje i bierze najgorszą wartość.

Wartość	Ocena
≤ 200 ms	✅ Dobrze
200 – 500 ms	⚠️ Wymaga poprawy
> 500 ms	❌ Źle

Jak poprawić INP

• Podziel długie zadania — każdy JS > 50ms blokuje przeglądarkę.
• Zmniejsz rozmiar pakietu JS — dzielenie kodu i tree shaking.
• Unikaj synchronizacyjnych operacji w obsłudze zdarzeń.
• Sprawdź skrypty stron trzecich — chatboty i analityka często powodują słaby INP.

Jak mierzyć Core Web Vitals

Dane z rzeczywistego świata

• Google Search Console → "Doświadczenie na stronie".
• PageSpeed Insights — łączy dane z rzeczywistego świata i dane laboratoryjne.
• CrUX Dashboard w Looker Studio.

Dane laboratoryjne

• Lighthouse w Chrome DevTools.
• WebPageTest — szczegółowe testowanie waterfall.

Wpływ CWV na SEO

Google potwierdził: CWV jest czynnikiem rankingowym, ale treść jest nadal ważniejsza.

Praktycznie: jeśli Twoja strona jest w zielonej strefie, CWV nie przeszkodzi w wzroście.