Core Web Vitals to złoty standard Google do mierzenia rzeczywistego doświadczenia użytkownika w sieci. To nie są opcjonalne, „miłe dodatki” — mają bezpośredni wpływ na pozycję Twojej strony w wynikach wyszukiwania oraz na to, czy użytkownicy zostaną na stronie, zaangażują się i dokonają konwersji.
Czym są Core Web Vitals?
Core Web Vitals to podzbiór Web Vitals — inicjatywy Google z 2020 roku, której celem było ujednolicenie sposobu mierzenia jakości doświadczenia użytkownika w internecie.
Skupiają się na trzech kluczowych aspektach:
- wydajności ładowania (loading performance)
- interaktywności (interactivity)
- stabilności wizualnej (visual stability)
Google przypisuje każdemu URL-owi jeden z trzech statusów:
- ✅ Good (Dobry) – spełnia wszystkie progi
- ⚠️ Needs Improvement (Wymaga poprawy) – częściowo spełnia progi
- ❌ Poor (Słaby) – nie spełnia jednego lub więcej progów
Status całej strony jest zawsze określany przez najgorszą metrykę.
Nawet jeśli LCP i INP są idealne, słaby CLS obniży ocenę całej strony do „Poor”.
Trzy Core Web Vitals
Aktualny zestaw Core Web Vitals obejmuje trzy metryki:
| Metryka | Co mierzy | Dobry | Wymaga poprawy | Słaby |
|---|---|---|---|---|
| LCP – Largest Contentful Paint | Wydajność ładowania | < 2.5 s | 2.5 – 4.0 s | > 4.0 s |
| INP – Interaction to Next Paint | Responsywność | < 200 ms | 200 – 500 ms | > 500 ms |
| CLS – Cumulative Layout Shift | Stabilność wizualna | < 0.1 | 0.1 – 0.25 | > 0.25 |
Uwaga:
FID (First Input Delay) został oficjalnie wycofany w marcu 2024 i zastąpiony przez INP, który dokładniej mierzy responsywność strony.
LCP – Largest Contentful Paint
LCP mierzy, jak długo trwa załadowanie największego widocznego elementu na stronie w obszarze widocznym dla użytkownika (viewport).
Najczęściej jest to:
- obraz hero
- duży nagłówek
- miniatura wideo
To metryka najlepiej odpowiadająca na pytanie użytkownika:
„Czy strona już się załadowała?”
Co może być elementem LCP?
<img><image>w SVG<video>(poster)- elementy blokowe z tekstem
- elementy z tłem ustawionym przez
url()w CSS
Najczęstsze przyczyny słabego LCP
- wolna odpowiedź serwera (TTFB)
- zasoby blokujące renderowanie (CSS/JS)
- nieoptymalne obrazy (JPEG/PNG)
- brak CDN
Jak poprawić LCP
- konwertuj obrazy do WebP (~30% lżejsze) lub AVIF (~50% lżejsze)
- dodaj
<link rel="preload" as="image">dla obrazu hero - eliminuj blokujący CSS i JS (inline + defer)
- wdroż CDN
- popraw TTFB (cel: < 600 ms)
INP – Interaction to Next Paint
INP zastąpił FID w marcu 2024 i znacząco poprawił sposób mierzenia responsywności.
Zamiast mierzyć tylko pierwszą interakcję, INP mierzy pełny czas od dowolnej interakcji użytkownika do wizualnej reakcji przeglądarki.
Strona z wysokim INP sprawia wrażenie „ociężałej”:
- przyciski reagują z opóźnieniem
- menu laguje
- formularze „zacinają się”
Najczęstsze przyczyny słabego INP
- długie zadania JS (> 50 ms)
- ciężkie skrypty zewnętrzne
- nieoptymalne event listenery
- zbędne re-renderowanie komponentów
Jak poprawić INP
- dziel długie zadania (
scheduler.yield(),setTimeout) - używaj Web Workers
- stosuj debounce i throttle
- używaj code splitting
- ogranicz skrypty zewnętrzne
CLS – Cumulative Layout Shift
CLS mierzy stabilność wizualną strony — czyli jak bardzo elementy przesuwają się podczas ładowania lub interakcji.
Wysoki CLS powoduje jedne z najbardziej frustrujących sytuacji:
klik → element się przesuwa → klik w coś innego.
Co powoduje przesunięcia layoutu?
- obrazy bez określonych wymiarów
- reklamy i iframe’y
- fonty (FOIT/FOUT)
- dynamicznie wstrzykiwana treść
Jak poprawić CLS
- ustawiaj
widthiheightdla<img>i<video> - rezerwuj miejsce dla reklam (
min-height) - używaj
font-display: optionallub preload fontów - nie dodawaj treści nad istniejącą zawartością
- używaj
aspect-ratiow CSS
Dlaczego Core Web Vitals są ważne dla SEO
Google wprowadziło Core Web Vitals jako czynnik rankingowy w aktualizacji Page Experience (2021) — a ich znaczenie stale rośnie.
Są częścią większego zestawu sygnałów obejmujących:
- mobile-friendly
- HTTPS
- brak nachalnych popupów
Kluczowe: dane pochodzą z rzeczywistych użytkowników (CrUX), a nie tylko z testów.
Wpływ biznesowy:
- niższy bounce rate
- wyższy współczynnik konwersji
- przewaga nad konkurencją przy tym samym słowie kluczowym
- słaby INP = utrata sprzedaży (checkout, formularze)
Cykl życia Core Web Vitals
Google stosuje przejrzysty model rozwoju metryk:
- Experimental – testowane metryki
- Pending – zatwierdzone, czekające na wdrożenie
- Stable – aktualne metryki (LCP, INP, CLS)
To oznacza, że w przyszłości mogą pojawić się nowe wskaźniki.
Jak mierzyć Core Web Vitals
Dane rzeczywiste (Field Data)
- Google Search Console – raport Core Web Vitals
- PageSpeed Insights – dane lab + CrUX
- CrUX (BigQuery) – analiza na dużą skalę
Dane laboratoryjne (Lab Data)
- Lighthouse (Chrome DevTools)
- WebPageTest
- GTmetrix
Ważne: tylko dane rzeczywiste wpływają na ranking.
Checklist optymalizacji Core Web Vitals
LCP
- obraz hero w WebP/AVIF
- preload obrazu hero
- TTFB < 600 ms
- CDN skonfigurowany
- CSS krytyczny inline
INP
- brak Long Tasks > 50 ms
- ograniczone skrypty zewnętrzne
- debounce/throttle
- code splitting
- Web Workers
CLS
- width/height dla
<img>i<video> - zarezerwowane miejsce dla reklam
- font-display: swap
- brak dynamicznego przesuwania treści
Podsumowanie
Core Web Vitals — LCP, INP i CLS — to nie tylko metryki wydajności, ale język, którym Google ocenia wartość Twojej strony.
Spełnienie wszystkich trzech:
- poprawia pozycje w Google
- zmniejsza frustrację użytkowników
- zwiększa konwersję
Traktuj je jako ciągły proces optymalizacji, a nie jednorazowe zadanie.
💡 Pro tip:
Włącz automatyczne monitorowanie Core Web Vitals (CrUX API lub alerty z Google Search Console). Wychwytuj spadki natychmiast po wdrożeniach — zanim wpłyną na Twoje pozycje.