Core Web Vitals — czym są i jak je poprawić?
Czym są Core Web Vitals?
Core Web Vitals to zestaw trzech metryk wydajności strony internetowej, zdefiniowanych przez Google jako kluczowe wskaźniki doświadczenia użytkownika (UX). Od 2021 roku są oficjalnym czynnikiem rankingowym Google, wchodzącym w skład tzw. Page Experience signals.
Core Web Vitals mierzą trzy fundamentalne aspekty interakcji użytkownika ze stroną: szybkość ładowania, responsywność i stabilność wizualną. Ich wpływ na pozycjonowanie jest udokumentowany przez Google. Każda z metryk ma zdefiniowane progi — dobry, wymagający poprawy i słaby — a Google zbiera dane z rzeczywistych użytkowników (dane terenowe, tzw. field data) za pośrednictwem Chrome User Experience Report (CrUX).
Trzy metryki szczegółowo
LCP (Largest Contentful Paint)
LCP mierzy czas ładowania największego elementu widocznego na ekranie (tzw. viewport) — może to być główny obraz, blok tekstu, element video czy grafika w tle. LCP odzwierciedla moment, w którym użytkownik postrzega stronę jako „załadowaną".
Progi LCP:
- Dobry: poniżej 2,5 sekundy
- Wymaga poprawy: 2,5–4,0 sekundy
- Słaby: powyżej 4,0 sekundy
Najczęstsze przyczyny słabego LCP:
- Wolne odpowiedzi serwera (wysoki TTFB)
- Blokowanie renderowania przez CSS i JavaScript
- Niezoptymalizowane obrazy (zbyt duże, brak lazy loading, brak nowoczesnych formatów)
- Render-blocking zasoby w sekcji
<head>
Jak poprawić LCP:
- Zoptymalizuj obrazy — stosuj formaty WebP/AVIF, odpowiednie wymiary i atrybut
loading="lazy"(ale nie dla obrazu LCP — ten powinien ładować się priorytetowo zfetchpriority="high") - Wdróż CDN, aby skrócić czas odpowiedzi serwera
- Zminimalizuj blokujące zasoby CSS/JS — przenieś niekrytyczne style do asynchronicznego ładowania
- Zastosuj preload dla kluczowych zasobów (
<link rel="preload">) - Rozważ SSG lub server-side rendering dla szybszego dostarczania HTML
INP (Interaction to Next Paint)
INP (Interaction to Next Paint) mierzy responsywność strony — jak szybko reaguje ona na interakcje użytkownika, takie jak kliknięcia, dotknięcia ekranu czy wpisywanie tekstu. INP zastąpił wcześniejszą metrykę FID (First Input Delay) w marcu 2024 roku, ponieważ FID mierzył jedynie opóźnienie pierwszej interakcji, natomiast INP uwzględnia wszystkie interakcje podczas całej sesji użytkownika i raportuje najgorszy wynik (z pominięciem outlierów).
Progi INP:
- Dobry: poniżej 200 ms
- Wymaga poprawy: 200–500 ms
- Słaby: powyżej 500 ms
Najczęstsze przyczyny słabego INP:
- Długie zadania JavaScript blokujące główny wątek (long tasks)
- Nadmierna ilość event listenerów i złożona logika obsługi zdarzeń
- Ciężki framework JavaScript renderujący duże drzewa DOM
- Brak optymalizacji third-party skryptów (analityka, reklamy, widgety)
Jak poprawić INP:
- Rozbij długie zadania JS na mniejsze fragmenty (
requestIdleCallback,scheduler.yield()) - Zmniejsz rozmiar i złożoność DOM — mniej elementów = szybsze renderowanie
- Opóźnij ładowanie skryptów zewnętrznych, które nie są krytyczne
- Stosuj
content-visibility: autow CSS dla elementów poza viewportem - Unikaj synchronicznych operacji w handlerach zdarzeń
CLS (Cumulative Layout Shift)
CLS mierzy stabilność wizualną strony — czy elementy przesuwają się niespodziewanie podczas ładowania i interakcji. Nic nie frustruje użytkowników bardziej niż próba kliknięcia przycisku, który nagle zmienia pozycję, bo załadował się baner reklamowy powyżej.
Progi CLS:
- Dobry: poniżej 0,1
- Wymaga poprawy: 0,1–0,25
- Słaby: powyżej 0,25
CLS jest obliczany jako suma wyników przesunięć layoutu (layout shift scores) zgrupowanych w okna sesji. Wynik każdego przesunięcia to iloczyn dwóch współczynników: frakcji viewportu objętej przesunięciem i dystansu przesunięcia.
Najczęstsze przyczyny wysokiego CLS:
- Obrazy i elementy embed bez zdefiniowanych wymiarów (
width/height) - Dynamicznie wstrzykiwane reklamy, banery i widgety
- Webfonty powodujące FOIT/FOUT (migotanie tekstu)
- Treść ładowana asynchronicznie i wstawiana nad widocznym contentem
Jak poprawić CLS:
- Zawsze definiuj wymiary obrazów i elementów iframe (atrybut
aspect-ratiow CSS lubwidth/heightw HTML) - Rezerwuj miejsce na reklamy i dynamiczne elementy za pomocą kontenerów o stałych wymiarach
- Stosuj
font-display: swapz preloadem fontów, aby zminimalizować przesunięcia tekstu - Unikaj wstawiania treści powyżej istniejącego contentu po załadowaniu strony
- Używaj CSS
containitransformzamiast właściwości powodujących reflow
Jak sprawdzić Core Web Vitals?
Dostępne są zarówno narzędzia laboratoryjne (symulujące warunki), jak i terenowe (dane z prawdziwych użytkowników):
Dane terenowe (field data) — najważniejsze:
- Google Search Console — raport Core Web Vitals dla całej witryny, grupujący URL-e po szablonach
- PageSpeed Insights — dane CrUX dla konkretnego URL-a i całej domeny
- Chrome UX Report (CrUX) — surowe dane dostępne przez BigQuery i CrUX API
Dane laboratoryjne (lab data):
- Chrome DevTools / Lighthouse — lokalne testy w kontrolowanych warunkach
- WebPageTest — zaawansowane testy z różnych lokalizacji i urządzeń
Warto pamiętać, że Google do celów rankingowych wykorzystuje dane terenowe, nie laboratoryjne. Wynik Lighthouse na poziomie 100 nie gwarantuje dobrych Core Web Vitals w terenie, jeśli rzeczywiste warunki użytkowników (wolniejsze urządzenia, niestabilne połączenia) znacząco odbiegają od laboratoryjnych.
Wpływ na SEO
Core Web Vitals są częścią sygnałów Page Experience w algorytmie Google, obok HTTPS, braku interstitiali i responsywności mobilnej. Strony z dobrymi Core Web Vitals mają przewagę w rankingach — to szczególnie istotne przy porównywalnej jakości treści i profilu linków. Lepsza wydajność techniczna może przesądzić o wyższej pozycji.
Poza bezpośrednim wpływem na SEO, dobre Core Web Vitals przekładają się na:
- Niższy bounce rate — szybkie strony zatrzymują użytkowników
- Wyższy współczynnik konwersji — badania Google pokazują, że poprawa LCP o 100 ms zwiększa konwersję o nawet 1,3%
- Lepszy UX — użytkownicy chętniej wracają na strony, które działają płynnie
- Pozytywny wpływ na CTR — Google może wyświetlać badge „szybka strona" w wynikach mobilnych
Podsumowanie priorytetów
Jeśli Twoja strona ma problemy z Core Web Vitals, zacznij od metryki, która ma najgorsze wyniki w raporcie Google Search Console. Zazwyczaj najszybsze wygrane daje optymalizacja LCP (kompresja obrazów, CDN, preload), następnie CLS (wymiary obrazów, rezerwacja miejsca), a na końcu INP (optymalizacja JavaScript). Sprawdź nasz poradnik jak poprawić szybkość strony, aby poznać konkretne kroki optymalizacji. Regularne monitorowanie i iteracyjna poprawa to klucz do utrzymania dobrych wyników w dłuższej perspektywie.