Core Web Vitals — co to jest i jak wpływa na SEO

Czym są Core Web Vitals?

Core Web Vitals to zestaw trzech konkretnych wskaźników mierzących doświadczenie użytkownika na stronie internetowej. Google wprowadził je jako oficjalny czynnik rankingowy, a ich znaczenie rośnie z każdym rokiem. Nie jest to kolejna tajemnicza metryka SEO — to rzeczywiste pomiary tego, jak szybko strona się ładuje, jak szybko reaguje na kliknięcia i jak stabilny jest jej układ wizualny.

Dla właścicieli stron oznacza to jedno: jeśli Twoja strona jest wolna, niestabilna lub niereaktywna, tracisz nie tylko użytkowników, ale też pozycje w Google. Dobra wiadomość? Core Web Vitals można zmierzyć i poprawić, a efekty są widoczne zarówno w wynikach wyszukiwania, jak i w konwersjach.

Trzy filary Core Web Vitals

Każdy z trzech wskaźników mierzy inny aspekt doświadczenia użytkownika. Zrozumienie ich jest kluczem do skutecznej optymalizacji.

LCP — Largest Contentful Paint

LCP mierzy czas ładowania największego widocznego elementu na stronie. Może to być główne zdjęcie, nagłówek, baner lub blok tekstu. Innymi słowy — ile czasu mija od momentu kliknięcia linku do momentu, gdy strona wygląda na załadowaną dla użytkownika.

• Dobry wynik: poniżej 2,5 sekundy
• Do poprawy: 2,5 — 4 sekundy
• Słaby wynik: powyżej 4 sekund

LCP to najczęściej problematyczny wskaźnik. Użytkownik, który czeka ponad 3 sekundy na załadowanie strony, z dużym prawdopodobieństwem ją opuści. A Google to widzi i uwzględnia w rankingach.

INP — Interaction to Next Paint

INP (dawniej FID — First Input Delay) mierzy responsywność strony na interakcje użytkownika. Ile czasu mija od kliknięcia przycisku, linku lub innego elementu do momentu, gdy strona wizualnie zareaguje? INP jest bardziej kompleksowy niż poprzedni wskaźnik FID, ponieważ mierzy nie tylko pierwsze, ale wszystkie interakcje podczas całej wizyty.

• Dobry wynik: poniżej 200 milisekund
• Do poprawy: 200 — 500 milisekund
• Słaby wynik: powyżej 500 milisekund

Zły INP oznacza, że strona „zamraża się" po kliknięciu. Użytkownik klika przycisk, ale nic się nie dzieje przez ułamek sekundy — albo dłużej. To frustrujące doświadczenie, które prowadzi do porzucenia strony.

CLS — Cumulative Layout Shift

CLS mierzy stabilność wizualną strony podczas ładowania. Czy elementy na stronie przeskakują, gdy się ładuje? Czy zdarzyło Ci się kliknąć przycisk, a w ostatniej chwili strona się przesunęła i kliknąłeś reklamę? To właśnie wysoki CLS — i jest to jedno z najbardziej irytujących doświadczeń w internecie.

• Dobry wynik: poniżej 0,1
• Do poprawy: 0,1 — 0,25
• Słaby wynik: powyżej 0,25

CLS nie ma jednostki czasu — to bezwymiarowa wartość obliczana na podstawie tego, jak duża część strony się przesunęła i o ile. Im mniej przesunięć, tym lepiej.

Jak mierzyć Core Web Vitals?

Google udostępnia kilka narzędzi do pomiaru Core Web Vitals. Każde z nich ma swoje zastosowanie i daje nieco inne dane.

PageSpeed Insights

Najłatwiejsze narzędzie na start. Wejdź na stronę PageSpeed Insights, wpisz URL i poczekaj na raport. Otrzymasz zarówno dane laboratoryjne (symulacja na standardowym urządzeniu), jak i dane terenowe (rzeczywiste pomiary od prawdziwych użytkowników). Dane terenowe są ważniejsze — to one wpływają na ranking w Google. Narzędzie podaje też konkretne rekomendacje, co poprawić.

Google Search Console

W sekcji „Core Web Vitals" znajdziesz raport obejmujący wszystkie strony Twojej witryny, podzielone na trzy kategorie: dobre, wymagające poprawy i słabe. To najlepsze narzędzie do monitorowania postępów w czasie, ponieważ pokazuje trendy. Zwróć uwagę, że dane z Search Console pochodzą z raportu CrUX (Chrome User Experience Report) i obejmują 28-dniowe okno pomiarowe.

Chrome DevTools i Lighthouse

Dla bardziej zaawansowanych użytkowników. Naciśnij F12 w Chrome, przejdź do zakładki Lighthouse i uruchom audyt. Otrzymasz szczegółowy raport z konkretnymi wskazówkami technicznymi. To dane laboratoryjne, więc nie odzwierciedlają dokładnie doświadczeń prawdziwych użytkowników, ale świetnie nadają się do debugowania problemów.

Jak poprawić LCP?

LCP to najczęstszy problem wydajnościowy. Oto sprawdzone sposoby na jego poprawę.

• Optymalizuj obrazy — to najczęstsza przyczyna wolnego LCP. Używaj formatu WebP zamiast JPEG/PNG, kompresuj obrazy (narzędzie Squoosh lub ShortPixel), ustawiaj wymiary width/height w HTML i stosuj lazy loading dla obrazów poniżej ekranu.
• Wybierz szybki hosting — czas odpowiedzi serwera (TTFB) bezpośrednio wpływa na LCP. Jeśli Twój hosting ma TTFB powyżej 600 ms, rozważ zmianę. CDN (Content Delivery Network) skraca czas ładowania dla użytkowników oddalonych od serwera.
• Usuń render-blocking resources — CSS i JavaScript blokujące renderowanie opóźniają pojawienie się treści. Przenieś niekrytyczny CSS poniżej fold, użyj defer/async dla skryptów JS, wstaw krytyczny CSS inline.
• Preloaduj kluczowe zasoby — dodaj <link rel="preload"> dla głównego obrazu LCP, kluczowych fontów i krytycznego CSS. Informuje to przeglądarkę, aby pobrała te zasoby w pierwszej kolejności.
• Unikaj client-side rendering — jeśli Twoja strona jest renderowana po stronie klienta (np. React SPA), LCP będzie znacznie gorszy. Rozważ SSR (Server-Side Rendering) lub SSG (Static Site Generation).

Jak poprawić INP?

INP wymaga optymalizacji JavaScriptu — to on jest głównym winowajcą słabej responsywności.

• Zmniejsz ilość JavaScriptu — audytuj skrypty na stronie. Czy wszystkie są potrzebne? Czy ten widget chata musi się ładować na każdej stronie? Każdy skrypt to dodatkowa praca dla przeglądarki.
• Użyj code splitting — zamiast ładować jeden ogromny plik JS, podziel go na mniejsze fragmenty ładowane na żądanie. Webpack, Vite i inne bundlery wspierają to natywnie.
• Przenieś ciężkie zadania do Web Workers — operacje obliczeniowe nie muszą blokować głównego wątku. Web Workers pozwalają wykonywać je w tle, nie blokując interfejsu.
• Unikaj długich tasków — zadania JavaScript trwające ponad 50 ms są uznawane za „długie" i blokują responsywność. Rozbij je na mniejsze fragmenty z użyciem requestIdleCallback lub setTimeout.
• Optymalizuj event handlery — debounce i throttle dla zdarzeń typu scroll, resize i input. Nie wykonuj ciężkich operacji DOM w każdym zdarzeniu.

Jak poprawić CLS?

CLS to najłatwiejszy wskaźnik do naprawy, jeśli wiesz, co powoduje przesunięcia.

• Zawsze podawaj wymiary obrazów i filmów — atrybut width i height w tagach <img> i <video> rezerwuje miejsce przed załadowaniem pliku, eliminując przesunięcie. W CSS użyj aspect-ratio dla kontenerów multimedialnych.
• Zarezerwuj miejsce na reklamy — reklamy to największy winowajca CLS. Ustal stały rozmiar kontenera reklamowego, nawet jeśli reklama się jeszcze nie załadowała. Użyj min-height w CSS.
• Unikaj dynamicznie wstrzykiwanych treści — bannery cookie, paski powiadomień, czaty — jeśli pojawiają się po załadowaniu strony i przesuwają treść, pogarszają CLS. Umieszczaj je w stałych pozycjach (sticky) lub jako overlay.
• Preloaduj fonty — zmiana czcionki po załadowaniu custom fonta powoduje przesunięcie tekstu (FOUT). Użyj font-display: optional lub preloaduj fonty, aby uniknąć tego efektu.
• Animuj z użyciem transform — zamiast animować width, height czy margin (które powodują reflow), używaj CSS transform. Animacje oparte na transform nie wpływają na CLS.

Wpływ Core Web Vitals na ranking w Google

Od 2021 roku Core Web Vitals jest oficjalnym czynnikiem rankingowym Google. Ale jak duży jest ich wpływ? Bądźmy szczerzy — treść, backlinki i intencja wyszukiwania nadal są ważniejsze. Strona z doskonałymi Core Web Vitals, ale słabą treścią, nie będzie wysoko w wynikach.

Jednak przy porównywalnej treści i autorytecie, Core Web Vitals mogą być czynnikiem rozstrzygającym. Jeśli Twoja strona i strona konkurenta oferują podobną treść, ale Twoja ładuje się w 1,5 sekundy, a konkurenta w 5 — Google prawdopodobnie ustawi Cię wyżej. W konkurencyjnych branżach, gdzie walka o pozycje toczy się o szczegóły, Core Web Vitals mogą być tą drobną przewagą, która robi różnicę.

Mobile vs Desktop — ważne różnice

Google stosuje indeksowanie mobile-first, co oznacza, że to wyniki mobilne mają priorytet. Core Web Vitals na urządzeniach mobilnych są zazwyczaj gorsze niż na desktopie — wolniejsze procesory, wolniejsze połączenia, mniejsze ekrany. Dlatego optymalizacja pod mobile jest absolutnie kluczowa.

W PageSpeed Insights i Search Console zobaczysz oddzielne wyniki dla mobile i desktop. Skup się najpierw na mobile. Jeśli Twoja strona ma dobre wyniki na telefonie, na desktopie z dużym prawdopodobieństwem też będzie dobrze.

Najczęstsze problemy i jak je rozwiązać

• Ogromne obrazy hero — główna przyczyna złego LCP. Kompresuj, używaj WebP, podawaj srcset dla różnych rozdzielczości.
• Render-blocking JavaScript — skrypty blokujące ładowanie strony. Dodaj async lub defer, przenieś niekrytyczne skrypty na koniec body.
• Brak wymiarów multimediów — główna przyczyna CLS. Zawsze ustawiaj width i height lub aspect-ratio.
• Zbyt wiele czcionek — każda czcionka to dodatkowy request. Ogranicz się do 2-3 wariantów. Użyj font-display: swap i preload.
• Wolny serwer — TTFB powyżej 800 ms to poważny problem. Rozważ CDN, cache serwerowy lub zmianę hostingu.

Podsumowanie — Core Web Vitals to nie opcja, to konieczność

W 2026 roku szybkość i stabilność strony to absolutne minimum. Użytkownicy oczekują natychmiastowego ładowania, a Google nagradza strony, które spełniają te oczekiwania. Zacznij od zmierzenia swoich wskaźników w PageSpeed Insights, zidentyfikuj największe problemy i napraw je kolejno, zaczynając od tych o największym wpływie.

Pamiętaj — nie musisz mieć idealnych wyników. Cel to zielone wskaźniki: LCP poniżej 2,5s, INP poniżej 200ms, CLS poniżej 0,1. Osiągnięcie tego jest realistyczne dla każdej strony. A jeśli potrzebujesz profesjonalnej pomocy w optymalizacji wydajności, Eunoiacreativ przeanalizuje Twoją stronę i wdroży niezbędne poprawki.