Grzegorz Kalmus
Autor
Core Web Vitals to zestaw metryk wydajnosciowych wprowadzonych przez Google, ktore mierza realne doswiadczenie uzytkownika na stronie internetowej. Od maja 2021 roku core web vitals sa oficjalnym sygnałem rankingowym w algorytmie Google – strony z dobrymi wynikami maja realna przewage w wynikach wyszukiwania. Jesli prowadzisz biznes online i zalezy Ci na pozycji w Google, zrozumienie tych metryk jest absolutnie kluczowe.
W tym artykule wyjasniamy, czym dokladnie sa poszczegolne wskazniki, jakie sa progi dobrego i zlego wyniku, oraz – co najwazniejsze – jak konkretnie poprawic wyniki swojej strony.
Czym sa Core Web Vitals i dlaczego Google ich uzywa?
Google od lat poszukuje sposobow na ocene jakosci stron internetowych z perspektywy uzytkownika – nie tylko pod katem tresci, ale rowniez szybkosci i komfortu korzystania. Core Web Vitals to odpowiedz na to wyzwanie: trzy precyzyjnie zdefiniowane metryki, ktore razem opisuja, jak strona czuje sie w uzyciu.
Wedlug oficjalnej dokumentacji Google (developers.google.com), Core Web Vitals sa czescia szerszego zestawu sygnałow Page Experience, obejmujacego rowniez HTTPS, brak natrętnych interstitiali i przyjaznosc mobilna. Sama inicjatywa jest opisana szerzej na portalu web.dev/vitals prowadzonym przez zespol Chrome.
Trzy filary Core Web Vitals to:
- LCP (Largest Contentful Paint) – mierzy szybkosc ladowania glownej tresci
- INP (Interaction to Next Paint) – mierzy responsywnosc na interakcje uzytkownika
- CLS (Cumulative Layout Shift) – mierzy stabilnosc wizualna strony
Badania Google pokazuja, ze strony spelniajace progi Core Web Vitals maja o 24% mniejszy wskaznik porzucen (bounce rate) niz strony, ktore tych progow nie spelniaja. To przelozenie na realne wyniki biznesowe sprawia, ze optymalizacja Core Web Vitals jest inwestycja, nie kosztem.
LCP – Largest Contentful Paint: szybkosc ladowania glownej tresci
LCP mierzy czas, jaki uplywa od rozpoczecia ladowania strony do wyswietlenia najwiekszego elementu widocznego w oknie przegladarki (tzw. viewport). Tym elementem moze byc obraz, wideo, blok tekstu lub element z tlem CSS.
Progi LCP
- Dobry: ponizej 2,5 sekundy
- Wymaga poprawy: 2,5 – 4,0 sekundy
- Zly: powyzej 4,0 sekund
Google zaleca, aby co najmniej 75% odslona Twojej strony miescilo sie w kategorii „dobry”. Oznacza to, ze nawet uzytkownikow na wolniejszych polaczeniach nalezy brac pod uwage przy optymalizacji.
Najczestsze przyczyny zlego LCP
- Wolny czas odpowiedzi serwera (TTFB) – zanim przeglądarka zacznie renderowac strone, musi otrzymac odpowiedz serwera. Czas powyzej 600 ms to juz zagrozenie dla LCP.
- Zasoby blokujace renderowanie – pliki CSS i JavaScript wczytywane synchronicznie w sekcji <head> wstrzymuja renderowanie strony.
- Niezoptymalizowane obrazy – duze pliki JPEG/PNG bez kompresji i bez odpowiednich wymiarow to jeden z glownych winowajcow zlego LCP.
- Brak preloadu kluczowych zasobow – przeglądarka dowiaduje sie o glownym obrazie strony zbyt pozno.
Jak poprawic LCP – konkretne kroki
Optymalizacja obrazow:
- Konwertuj obrazy do formatu WebP lub AVIF (oszczednosc 25-80% rozmiaru vs JPEG)
- Uzywaj atrybutu
loading="eager"ifetchpriority="high"dla glownego obrazu LCP - Dodaj
<link rel="preload" as="image">w sekcji <head> dla obrazu LCP - Stosuj srcset i sizes dla obrazow responsywnych – serwuj rozmiar dostosowany do urzadzenia
Poprawa TTFB:
- Uzyj CDN (np. Cloudflare), aby serwowac tresc z serwera blizszego uzytkownikowi
- Wlacz cache na poziomie serwera (np. FastCGI Cache dla Nginx, WP Rocket dla WordPress)
- Zoptymalizuj zapytania do bazy danych jesli korzystasz z CMS
Eliminacja zasobow blokujacych renderowanie:
- Dodaj
deferlubasyncdo tagów <script> - Krytyczny CSS wbuduj inline w <head>, resztę laduj asynchronicznie
- Usun nieuzywane wtyczki i skrypty trzecich stron
INP – Interaction to Next Paint: responsywnosc na interakcje
INP zastapilo w marcu 2024 roku metrykę FID (First Input Delay). O ile FID mierzyl jedynie czas od pierwszej interakcji do poczatku obslugi zdarzenia, INP jest znacznie bardziej kompleksowy – mierzy opóznien od kazdej interakcji uzytkownika (klikniecia, tapniecia, nacisnięcia klawisza) az do wyswietlenia nastepnej klatki przez przeglądarkę.
Progi INP
- Dobry: ponizej 200 ms
- Wymaga poprawy: 200 – 500 ms
- Zly: powyzej 500 ms
Jak poprawic INP
INP jest najscislej zwiazany z JavaScriptem dzialajacym na glownym watku przegladarki. Glowne techniki optymalizacji:
- Dzielenie dlugich zadan JS (Long Tasks) – zadania trwajace ponad 50 ms blokuja watek glowny. Uzywaj
scheduler.yield()lubsetTimeout(0)by dzielić duze operacje - Lazy loading komponentow – laduj ciężkie elementy UI dopiero gdy sa potrzebne
- Usun lub odrob skrypty analityczne i reklamowe – Google Tag Manager z wieloma skryptami moze znaczaco pogorszyc INP
- Web Workers – przenosic obliczenia niepowodujace zmian UI do osobnych watkow
- Optymalizacja event handlerów – unikaj ciężkich operacji bezposrednio w obsludze klikniecia
Warto wiedziec, ze wedlug danych Chrome User Experience Report (CrUX) z 2024 roku, okolo 12% stron na swiecie ma zly wynik INP. To relatywnie nowa metryka, wiec wiele witryn jeszcze nie zostalo pod nia zoptymalizowanych – co daje Ci szansę na przewage konkurencyjna.
CLS – Cumulative Layout Shift: stabilnosc wizualna
CLS mierzy, jak bardzo elementy strony przesuwaja sie podczas ladowania – bez akcji uzytkownika. Jesli po zaladowaniu strony nagle pojawia sie baner reklamowy i przesuwa caly tekst w dol, wlasnie takiego zjawiska dotyczy CLS. Uzytkownik moze przypadkowo kliknac w zly element, co jest frustrujace i szkodliwe dla konwersji.
Progi CLS
- Dobry: ponizej 0,1
- Wymaga poprawy: 0,1 – 0,25
- Zly: powyzej 0,25
Najczestsze przyczyny zlego CLS
- Obrazy bez zdefiniowanych atrybutow width i height
- Reklamy, embedy i iframes bez zarezerwowanej przestrzeni
- Dynamicznie wstrzykiwana tresc powyzej istniejacych elementow
- Fonty internetowe powodujace FOIT/FOUT (flash of invisible/unstyled text)
Jak poprawic CLS – konkretne kroki
- Zawsze dodawaj atrybuty
widthiheightdo elementow<img> - Rezerwuj miejsce dla reklam i dynamicznych elementow przez ustawienie min-height w CSS
- Uzywaj
font-display: optionallubfont-display: swapdla fontow Google - Unikaj wstawiania elementow powyzej istniejacej tresci po zaladowaniu strony
- Stosuj
aspect-ratiow CSS dla elementow o zmiennych proporcjach
Narzedzia do mierzenia Core Web Vitals
Rozroznienie miedzy danymi laboratoryjnymi (lab data) a danymi terenowymi (field data) jest kluczowe dla prawidlowej interpretacji wynikow.
Dane terenowe (Field Data) – rzeczywiste dane uzytkownikow
Dane terenowe to pomiary zebrane od prawdziwych uzytkownikow odwiedzajacych Twoja strone – uwzgledniaja rozne urzadzenia, polaczenia i lokalizacje. Google uzywa wylacznie danych terenowych z Chrome User Experience Report (CrUX) do rankingowania.
- Google Search Console – zakładka „Podstawowe wskazniki”, dane CrUX z ostatnich 28 dni
- PageSpeed Insights (pagespeed.web.dev) – pokazuje dane terenowe z CrUX jezeli dostepne
- Chrome UX Report – surowe dane na BigQuery lub przez API
Dane laboratoryjne (Lab Data) – pomiary kontrolowane
Dane laboratoryjne pochodza z symulowanego srodowiska (stale polaczenie, stale urzadzenie). Sa swietne do debugowania, ale nie przekladaja sie bezposrednio na to, co Google widzi.
- PageSpeed Insights – dolna sekcja, dane z Lighthouse
- Google Lighthouse – wbudowany w Chrome DevTools (F12 → Lighthouse)
- WebPageTest (webpagetest.org) – zaawansowane testy z roznych lokalizacji i urzadzen
Biblioteka web-vitals.js
Google udostepnia oficjalna bibliotekę JavaScript do mierzenia Core Web Vitals w Twojej własnej analityce:
npm install web-vitals
import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(console.log);
onINP(console.log);
onCLS(console.log);Pozwala to zbierac rzeczywiste dane od uzytkownikow i wysylac je do Google Analytics lub innego systemu monitorowania.
Realne przyklady poprawy Core Web Vitals
Optymalizacja Core Web Vitals przynosi wymierne efekty potwierdzane przez firmy na calym swiecie:
- Vodafone poprawa LCP o 31% przełożyła sie na 8% wzrost sprzedazy
- Netzwelt po osiagnieciu dobrych CWV zanotowalo wzrost ruchu organicznego o 18%
- Tokopedia po zmniejszeniu LCP o 40% odnotowalo o 23% wiecej sesji z reklam Google
- NDTV redukcja CLS z 0,25 do 0,05 przełożyła sie na 50% mniej porzucan
To nie sa izolowane przypadki – poprawa szybkosci i stabilnosci stron ma bezposredni wplyw na konwersje, zaangazowanie i przychody.
Core Web Vitals a pozycjonowanie – co powinienes wiedziec
Core Web Vitals to jeden z wielu sygnałow rankingowych Google. Nie zastepuja jakosci tresci, relevancji czy linkownia – ale stanowia coraz wazniejszy element tzw. Page Experience. W praktyce oznacza to:
- Strony ze zlymi CWV moga tracic pozycje nawet przy dobrej tresci
- Poprawa CWV nie gwarantuje skoku na 1 miejsce, ale usuwa bariere, ktora moze Cie blokowac
- W niszach konkurencyjnych dobry wynik CWV moze byc czynnikiem rozstrzygajacym
Jezeli Twoja strona ma juz dobra tresc, ale wyniki CWV sa slabe, jest to jeden z pierwszych obszarow, ktory warto zoptymalizowac. Zachecamy do sprawdzenia, jak wyglada Twoja strona – skontaktuj sie z nami, a przeprowadzimy bezplatny audyt wydajnosci.
Podsumowanie – plan dzialania dla Core Web Vitals
Optymalizacja Core Web Vitals to proces, nie jednorazowe dzialanie. Oto priorytetowa lista dzialan:
- Zmierz aktualny stan – sprawdz Google Search Console i PageSpeed Insights
- Ustal najslabszy wskaznik – skup sie na jednym problemie na raz
- LCP: zoptymalizuj obrazy – WebP, preload, fetchpriority
- INP: zredukuj JavaScript – usun zbedne skrypty, podziel dlugie zadania
- CLS: dodaj wymiary do obrazow i zarezerwuj miejsce dla dynamicznych elementow
- Monitoruj regularnie – dane CrUX aktualizuja sie co 28 dni
Pamietaj, ze optymalizacja techniczna strony to integralna czesc skutecznego pozycjonowania stron internetowych. Strona szybka i stabilna to podstawa kazdej strategii SEO.
Jesli potrzebujesz profesjonalnego wsparcia przy tworzeniu stron internetowych z mysla o Core Web Vitals od samego poczatku, lub chcesz poprawic wyniki istniejacego serwisu – skontaktuj sie z nami. Dokladamy starannosci, by strony ktore tworzymy osiagaly zielone wyniki we wszystkich trzech metrykach.
