Core Web Vitals

Core Web Vitals – czym są LCP, INP i CLS oraz jak je mierzyć?

Core Web Vitals to trzy podstawowe metryki doświadczenia użytkownika na stronie: LCP mierzy szybkość załadowania głównej treści, INP mierzy responsywność po interakcji, a CLS mierzy stabilność układu. W praktyce pomagają sprawdzić, czy strona szybko pokazuje najważniejszą treść, reaguje bez irytującego opóźnienia i nie przesuwa elementów podczas ładowania.(1)

Nie są to abstrakcyjne wskaźniki dla programistów. Core Web Vitals łączą techniczne SEO, UX i konwersje, bo pokazują, jak realni użytkownicy odbierają stronę w przeglądarce. Google rekomenduje dbanie o dobre wyniki Core Web Vitals, ale same dobre metryki nie gwarantują wysokich pozycji. Nadal liczy się trafność treści, intencja zapytania, jakość strony i konkurencja w SERP.(2)

Core Web Vitals

Czym są Core Web Vitals?

Core Web Vitals to zestaw metryk, który Google i Chrome wykorzystują do oceny podstawowej jakości doświadczenia użytkownika na stronie. Aktualnie najważniejsze są trzy obszary: ładowanie, interaktywność i stabilność wizualna.(1)

MetrykaCo mierzyDobry wynikWymaga poprawySłaby wynik
LCPCzas załadowania największego widocznego elementu treścido 2,5 s2,5–4,0 spowyżej 4,0 s
INPCzas reakcji strony na interakcję użytkownikado 200 ms200–500 mspowyżej 500 ms
CLSSkumulowane przesunięcia układu stronydo 0,10,1–0,25powyżej 0,25

Najważniejsza zmiana względem starszych artykułów o Core Web Vitals dotyczy interaktywności. Dawniej w tym miejscu pojawiał się FID, czyli First Input Delay. Od marca 2024 roku aktualna metryka responsywności to INP, czyli Interaction to Next Paint. Jeżeli tekst nadal opisuje FID jako główną metrykę Core Web Vitals, wymaga aktualizacji.(3)

LCP – jak szybko pojawia się główna treść strony?

LCP, czyli Largest Contentful Paint, mierzy, po jakim czasie w widocznym obszarze ekranu ładuje się największy element treści. Może to być duży obraz, blok tekstu, grafika hero albo inny dominujący element, który użytkownik widzi po wejściu na stronę. Dobry wynik LCP to maksymalnie 2,5 sekundy.(1)

Czynnik LCP

Jeśli wynik mieści się pomiędzy 2,5 a 4 sekundami, strona wymaga poprawy. Wynik powyżej 4 sekund oznacza problem, który użytkownik najczęściej odczuwa jako wolne ładowanie strony.

W praktyce LCP pogarszają:

  • za duże obrazy hero;
  • brak kompresji i nowoczesnych formatów obrazów;
  • wolny serwer albo długi TTFB;
  • blokujące zasoby CSS i JavaScript;
  • fonty ładowane w sposób opóźniający renderowanie;
  • slider lub baner, który staje się największym elementem nad foldem.

Co poprawić jako pierwsze? Najczęściej warto zacząć od identyfikacji elementu LCP w PageSpeed Insights albo Lighthouse. Jeśli jest nim obraz, sprawdź rozmiar, format, lazy loading, preload i sposób wyświetlania. Jeśli jest nim tekst albo sekcja hero, sprawdź CSS, fonty i czas odpowiedzi serwera.

INP – czy strona szybko reaguje po kliknięciu?

INP, czyli Interaction to Next Paint, mierzy responsywność strony po interakcjach użytkownika. Chodzi nie tylko o pierwsze kliknięcie, ale o całościowe doświadczenie: kliknięcia, tapnięcia i interakcje z klawiaturą w trakcie wizyty. Dobry wynik INP to maksymalnie 200 ms.(1)

W starszych materiałach w tym miejscu pojawiał się FID. W aktualnej wersji Core Web Vitals jego rolę przejęła metryka INP.

Czynnik FID

Wynik od 200 do 500 ms wymaga poprawy, a powyżej 500 ms oznacza słabą responsywność. Użytkownik może wtedy kliknąć przycisk, ale strona przez chwilę nie pokazuje żadnej reakcji. To buduje wrażenie, że coś się zawiesiło.

INP najczęściej pogarszają:

  • ciężki JavaScript wykonywany w wątku głównym;
  • zbyt dużo skryptów zewnętrznych;
  • rozbudowane formularze i elementy interaktywne;
  • źle napisane event listenery;
  • pop-upy, widżety, czaty i skrypty marketingowe;
  • długie taski JavaScript blokujące renderowanie.

Najbardziej praktyczna diagnoza polega na rozdzieleniu problemu na dwie warstwy. Najpierw sprawdź, czy problem widać w danych terenowych, czyli u realnych użytkowników. Potem w narzędziach laboratoryjnych szukaj konkretnych skryptów i interakcji, które blokują reakcję strony.

CLS – czy układ strony nie skacze podczas ładowania?

CLS, czyli Cumulative Layout Shift, mierzy stabilność wizualną strony. Wysoki CLS oznacza, że elementy strony przesuwają się już po rozpoczęciu ładowania. Użytkownik chce kliknąć link albo przycisk, ale reklama, obraz lub font doczytuje się później i przesuwa układ. Dobry wynik CLS to maksymalnie 0,1.(1)

Czynnik CLS

Wynik od 0,1 do 0,25 wymaga poprawy, a powyżej 0,25 oznacza słabą stabilność układu.

Najczęstsze przyczyny problemów z CLS:

  • obrazy bez określonych wymiarów;
  • reklamy i embedowane elementy bez zarezerwowanego miejsca;
  • fonty powodujące przeskok tekstu;
  • banery cookie i pop-upy wstawiane nad treścią;
  • dynamiczne sekcje, które doczytują się po czasie;
  • zmiana wysokości elementów po załadowaniu CSS lub JavaScript.

CLS warto poprawiać szczególnie na stronach z reklamami, listingami, rozbudowanymi nagłówkami i dużymi obrazami. Nawet jeśli strona ładuje się szybko, skaczący układ może psuć odczucie jakości.

Jak mierzyć Core Web Vitals?

Core Web Vitals najlepiej mierzyć kilkoma narzędziami, bo każde odpowiada na inne pytanie. Jedno pokazuje realne dane użytkowników, inne pomaga debugować konkretny problem techniczny.

NarzędzieCo pokazujeKiedy użyć
Google Search ConsoleProblematyczne grupy URL-i w danych terenowychGdy chcesz zobaczyć, czy problem dotyczy całego typu podstron
PageSpeed InsightsDane terenowe i laboratoryjne dla URL-aGdy chcesz szybko sprawdzić konkretny adres
LighthouseTest laboratoryjny w kontrolowanych warunkachGdy potrzebujesz technicznej diagnozy do wdrożenia
Chrome DevToolsSzczegółowe debugowanie zasobów i interakcjiGdy programista szuka przyczyny problemu
Chrome User Experience ReportDane zagregowane z realnych wizyt użytkowników ChromeGdy analizujesz trend i dane origin/page-level
Page Speed Insights od Google
web dev od Google
Chrome Web Vitals (wtyczka do przeglądarki Chrome)

Najważniejsze rozróżnienie: field data i lab data to nie to samo.

Field data to dane z realnych wizyt użytkowników. W PageSpeed Insights i Search Console wynik opiera się na danych z Chrome User Experience Report, jeżeli dla strony jest wystarczająco danych. To najlepszy sygnał do oceny, czy problem realnie dotyka użytkowników.(4)

Lab data to wynik testu w kontrolowanym środowisku. Pomaga znaleźć przyczynę problemu, ale nie zawsze odpowiada temu, co widzą realni użytkownicy. Dlatego nie warto panikować tylko dlatego, że jeden test laboratoryjny pokazał gorszy wynik. Najpierw sprawdź dane terenowe i trend.(5)

Jak interpretować wyniki Core Web Vitals?

Core Web Vitals powinno się interpretować na poziomie konkretnego szablonu strony, a nie tylko pojedynczego URL-a. Jeśli problem dotyczy wszystkich wpisów blogowych, kategorii albo stron produktowych, zwykle przyczyna leży w szablonie, obrazach, skryptach lub komponentach wspólnych dla wielu URL-i.

Praktyczna kolejność analizy:

  1. Sprawdź raport Core Web Vitals w Google Search Console.
  2. Zobacz, które grupy URL-i mają problem.
  3. Wybierz reprezentatywny URL z problematycznej grupy.
  4. Sprawdź go w PageSpeed Insights.
  5. Zidentyfikuj, która metryka jest problemem: LCP, INP czy CLS.
  6. Przekaż programiście konkretne zalecenia z Lighthouse i DevTools.
  7. Po wdrożeniu monitoruj dane terenowe, bo raporty Core Web Vitals nie aktualizują się natychmiast.

Nie każdy słaby wynik oznacza ten sam typ pracy. Słaby LCP często wymaga optymalizacji obrazów, serwera i krytycznego CSS. Słaby INP zwykle prowadzi do JavaScriptu i skryptów zewnętrznych. Słaby CLS najczęściej wynika z układu, obrazów, reklam, fontów i dynamicznych elementów.

Czy Core Web Vitals są czynnikiem rankingowym?

Core Web Vitals są częścią szerszego tematu page experience, ale nie należy traktować ich jak magicznej dźwigni SEO. Google komunikuje, że dobre doświadczenie strony może pomagać w wyszukiwarce, zwłaszcza gdy wiele stron ma podobnie przydatną treść. Jednocześnie trafność i jakość contentu pozostają kluczowe.(2)

Najprostsza interpretacja jest taka: Core Web Vitals rzadko uratują słabą treść, ale mogą przeszkadzać dobrej stronie, jeśli użytkownicy mają fatalne doświadczenie. Dlatego warto poprawiać je szczególnie na stronach, które już mają potencjał: rankują, mają wyświetlenia, zbierają ruch albo wspierają konwersję.

Najczęstsze błędy przy pracy nad Core Web Vitals

Największy błąd to poprawianie wyniku w jednym narzędziu bez zrozumienia, co mierzymy. PageSpeed Insights, Lighthouse i Search Console nie są tym samym raportem. Jeśli test laboratoryjny pokazuje problem, ale dane terenowe są dobre, priorytet może być niższy. Jeśli dane terenowe są złe dla całej grupy URL-i, problem jest poważniejszy.

Drugi błąd to skupienie się wyłącznie na homepage. W SEO często ważniejsze są wpisy blogowe, kategorie, produkty, landing page i strony usług. To one rankują na konkretne zapytania i to one powinny być częścią próbki.

Trzeci błąd to traktowanie Core Web Vitals jako jednorazowej optymalizacji. Wyniki mogą się pogorszyć po dodaniu nowego motywu, wtyczki, skryptu reklamowego, czatu, formularza albo banera. Dlatego monitoring jest ważniejszy niż pojedynczy test.

Checklista: co poprawić jako pierwsze?

Jeśli nie wiesz, od czego zacząć, użyj tej kolejności:

  1. Sprawdź, czy problem widać w Google Search Console.
  2. Ustal, która metryka jest słaba: LCP, INP czy CLS.
  3. Dla LCP sprawdź największy element nad foldem, obrazy, serwer, CSS i fonty.
  4. Dla INP sprawdź JavaScript, skrypty zewnętrzne, widżety i ciężkie interakcje.
  5. Dla CLS sprawdź wymiary obrazów, reklamy, fonty, embedy i dynamiczne sekcje.
  6. Testuj kilka typów URL-i, nie tylko stronę główną.
  7. Po wdrożeniu poczekaj na dane terenowe i dopiero wtedy oceniaj efekt.

W praktyce największy zwrot daje poprawa elementów wspólnych dla całego szablonu. Jeśli jeden fix poprawia wszystkie wpisy blogowe albo wszystkie strony produktowe, ma większy sens niż kosmetyczna optymalizacja pojedynczego adresu.

FAQ

Co wchodzi w skład Core Web Vitals?

Aktualnie Core Web Vitals obejmują trzy metryki: LCP, INP i CLS. LCP mierzy ładowanie głównej treści, INP mierzy responsywność strony po interakcji, a CLS mierzy stabilność układu.(1)

Czy FID nadal jest Core Web Vital?

Nie. FID był wcześniejszą metryką interaktywności, ale od marca 2024 roku został zastąpiony przez INP. Starsze artykuły, które nadal opisują FID jako aktualną metrykę Core Web Vitals, wymagają aktualizacji.(3)

Jak sprawdzić Core Web Vitals dla konkretnego URL-a?

Najprościej użyć PageSpeed Insights. Wpisujesz adres strony i sprawdzasz wyniki LCP, INP i CLS. Jeśli dla URL-a są dostępne dane terenowe, zobaczysz realne doświadczenie użytkowników. Jeśli danych jest za mało, narzędzie pokaże głównie wynik laboratoryjny.(4)

Czym różnią się dane z Search Console i Lighthouse?

Search Console pokazuje dane terenowe z realnych wizyt i grupuje podobne URL-e. Lighthouse wykonuje test laboratoryjny w kontrolowanych warunkach. Search Console pomaga ustalić priorytety, a Lighthouse pomaga znaleźć techniczną przyczynę problemu.(5)

Czy dobry wynik Core Web Vitals gwarantuje wyższe pozycje?

Nie. Dobry wynik Core Web Vitals nie gwarantuje topowych pozycji. Może jednak pomagać, gdy strona ma dobrą treść i konkuruje z podobnie trafnymi wynikami. Słabe doświadczenie użytkownika może ograniczać potencjał strony, szczególnie na konkurencyjnych zapytaniach.(2)

Jak często monitorować Core Web Vitals?

Dla aktywnie rozwijanej strony warto sprawdzać raport w Google Search Console co najmniej raz w miesiącu oraz po większych zmianach technicznych. Po wdrożeniu poprawek trzeba dać danym terenowym czas na odświeżenie.

Źródła

  1. Google Search Central – Understanding Core Web Vitals and Google search results. Adres źródła: developers.google.com/search/docs/appearance/core-web-vitals.
  2. Google Search Central – Understanding page experience in Google Search results. Adres źródła: developers.google.com/search/docs/appearance/page-experience.
  3. Google Search Central Blog – Introducing INP to Core Web Vitals. Adres źródła: developers.google.com/search/blog/2023/05/introducing-inp.
  4. Google PageSpeed Insights docs – About PageSpeed Insights. Adres źródła: developers.google.com/speed/docs/insights/v5/about.
  5. web.dev – Core Web Vitals workflows with Google tools. Adres źródła: web.dev/articles/vitals-tools.
Leave a Comment

Polecane

Tematyka popularna: