Core Web Vitals – czym są i jak wpływają na SEO?

Dlaczego jedna strona, mimo że ładuje się w 2 sekundy, wydaje się płynna, intuicyjna i responsywna, podczas gdy inna, z podobnym czasem ładowania, irytuje, zamraża się przy próbie kliknięcia i powoduje frustrację z powodu uciekających przycisków? Okazuje się, że szybkość to nie wszystko. Liczy się jakość tej szybkości.

Właśnie dlatego Google stworzyło Core Web Vitals (CWV) – Podstawowe Wskaźniki Internetowe. Optymalizacja tych trzech filarów przestała być opcją – stała się jednym z najważniejszych elementów technicznego SEO, który ma bezpośredni wpływ na Twoją widoczność w wynikach wyszukiwania.

Core Web Vitals – czym są podstawowe wskaźniki internetowe?

Celem Core Web Vitals było stworzenie uniwersalnego i uproszczonego zestawu wskaźników, który w sposób jednoznaczny oceniałby jakość doświadczeń użytkownika (User Experience).

Zamiast zostawiać właścicieli stron z długą listą technicznych danych, Google wskazało trzy kluczowe obszary, które mają największy wpływ na to, jak postrzegana jest witryna. W ten sposób firma daje jasny sygnał, na czym należy skupić się w pierwszej kolejności, aby poprawić zarówno szybkość strony, jak i ogólne zadowolenie odbiorców.

Oficjalne składniki Core Web Vitals, to:

• Largest Contentful Paint (LCP) – odpowiada za postrzeganą szybkość ładowania.
• Interaction to Next Paint (INP) – mierzy responsywność i płynność interakcji.
• Cumulative Layout Shift (CLS) – ocenia stabilność wizualną interfejsu.

Jak widać, każdy z tych wskaźników dotyka innego, fundamentalnego aspektu interakcji użytkownika ze stroną. Razem tworzą kompleksowy obraz, który pozwala nawet osobom bez głębokiej wiedzy technicznej zrozumieć, czy ich strona jest przyjazna dla użytkownika, czy wręcz przeciwnie.

Core Web Vitals vs SEO

Po latach od pełnego wdrożenia aktualizacji „Page Experience” odpowiedź na pytanie o wpływ CWV na SEO jest jednoznaczna: tak, Core Web Vitals są czynnikiem rankingowym. Ale ich rola jest znacznie bardziej złożona niż prosty schemat „dobry wynik = wyższa pozycja”.

Core Web Vitals są oficjalną częścią szerszego sygnału rankingowego o nazwie Page Experience. Przy dwóch stronach o podobnie wartościowej treści, ta z lepszymi wskaźnikami Page Experience (w tym CWV) może uzyskać wyższą pozycję.

Google analizuje zachowanie użytkowników, by ocenić jakość wyników wyszukiwania. Poprawiając Core Web Vitals, bezpośrednio wpływasz na zadowolenie użytkowników, co przekłada się na lepsze wskaźniki behawioralne. A te są jednym z najsilniejszych sygnałów dla algorytmów Google.

Składniki Core Web Vitals (CWV)

Aby skutecznie poprawić wynik Core Web Vitals, musimy najpierw precyzyjnie zrozumieć, co mierzy każdy z jego komponentów. Przeanalizujmy je krok po kroku, aby dowiedzieć się, co wpływa na ich ocenę.

Largest Contentful Paint (LCP)

Pierwszym wskaźnikiem wchodzącym w skład Core Web Vitals jest Largest Contentful Paint, za pomocą którego Google sprawdza, jak szybko ładuje się największy element strony, który zostanie zaprezentowany użytkownikom. Może to być zarówno zdjęcie, jak i akapit tekstu.

Na poniższym przykładzie udostępnionym przez Google, widzimy, jak szybko ładowały się poszczególne elementy strony https://edition.cnn.com/, gdzie LCP (największy element strony), którym jest zdjęcie, został załadowany dopiero w piątej „ramce”.

Kolejnym zaprezentowanym przykładem jest strona wyników wyszukiwania Google, gdzie LCP, którym tym razem jest blok tekstu, został załadowany o wiele szybciej, w drugiej „ramce”. Widzimy, że zdjęcia zostały załadowane później, ale to właśnie wspomniany akapit stanowi największy element strony. Analizując naszą stronę pod kątem LCP, należy starać się, aby największy element danej strony został załadowany maksymalnie po upływie 2,5 sekundy.

Problem ze słabym wynikiem pod kątem LCP mogą mieć głównie właściciele sklepów internetowych w przypadku kart produktowych, dla których często największym elementem jest zdjęcie produktu, wczytywane dopiero po nazwie, cenie czy opisie. Może się również zdarzyć, że elementem LCP jest komunikat nt. ciasteczek, który z reguły ładowany jako ostatni na stronie. W takim przypadku również otrzymamy słaby wynik w Core Web Vitals.

Cumulative Layout Shift (CLS)

Kolejnym wskaźnikiem w ramach Core Web Vitals jest Cumulative Layout Shift, czyli sytuacja, w której wczytany wcześniej element strony zostaje przesunięty przez zupełnie inny, załadowany nieco później. Przykładowo wchodzimy na stronę, zaczynamy czytać interesujący nas akapit, który po chwili zjeżdża w dół strony, a w jego miejsce pojawia się zdjęcie. Jest to wyjątkowo frustrujące z punktu widzenia użytkownika (UX), gdyż skutecznie utrudnia przeglądanie danej strony i może nawet prowadzić do jej opuszczenia.

Problem ze słabym wynikiem CLS najczęściej będą miały serwisy, na których znajduje się spora ilość reklam, które często są ładowane na końcu i powodują przesuwanie się głównej zawartości na stronie. CLS może także być powodowany przez słaby wynik dla LCP, przykładowo w przypadku kart produktowych, o których wspomnieliśmy wyżej, gdzie największym elementem jest z reguły zdjęcie produktu. Jeśli najpierw zostanie wyświetlona jego nazwa lub cena, a zdjęcie zostanie wczytane na samym końcu, wspomniane elementy zostaną przesunięte w dół strony.

Interactive To Next Paint (INP)

Czy zdarzyło Ci się kiedyś kliknąć przycisk „Dodaj do koszyka” i przez chwilę… nie stało się absolutnie nic? To „zamrożenie” interfejsu, to opóźnienie między Twoją akcją a wizualną odpowiedzią strony, jest dokładnie tym, co mierzy Interaction to Next Paint (INP).

INP to wskaźnik, który ocenia ogólną responsywność strony na działania użytkownika. Mierzy on czas od momentu wykonania interakcji (takiej jak kliknięcie, dotknięcie ekranu czy wpisanie tekstu) aż do chwili, gdy na ekranie pojawi się kolejna klatka, dając użytkownikowi wizualny sygnał, że jego polecenie zostało przyjęte i jest przetwarzane.

Jakie wartości INP są dobre?

Czas jest tu mierzony w milisekundach, a im jest on krótszy, tym strona wydaje się bardziej „płynna”:

• Dobry: poniżej 200 milisekund
• Wymaga poprawy: od 200 ms do 500 ms
• Słaby: powyżej 500 milisekund

To kluczowa zmiana w stosunku do jego poprzednika, FID (First Input Delay), który mierzył tylko opóźnienie pierwszej interakcji. INP jest znacznie bardziej wymagający – analizuje wszystkie interakcje podczas wizyty i jako wynik podaje tę najwolniejszą (lub jedną z najwolniejszych).

First Input Delay (FID)

Przez lata First Input Delay (FID) był jednym z trzech filarów Core Web Vitals, odpowiedzialnym za mierzenie responsywności. Jego celem było uchwycenie pierwszego wrażenia użytkownika na temat interaktywności strony. FID mierzył czas od pierwszej interakcji użytkownika (np. kliknięcia w link lub przycisk) do momentu, w którym przeglądarka faktycznie mogła rozpocząć przetwarzanie tej akcji (czyli jak długo polecenie użytkownika musiało czekać w kolejce, zanim główny wątek przeglądarki mógł się nim zająć).

Dlaczego FID został zastąpiony?

Mimo swojej użyteczności, FID miał dwa ograniczenia:

1. Mierzył tylko pierwszą interakcję. Strona mogła mieć doskonały wynik FID, a mimo to być irytująco powolna przy każdym kolejnym kliknięciu. Nie odzwierciedlało to całościowego doświadczenia użytkownika.
2. Mierzył tylko opóźnienie, a nie całą reakcję. FID nie uwzględniał czasu potrzebnego na faktyczne wykonanie operacji i pokazanie wizualnej odpowiedzi. Mierzył tylko czas oczekiwania w kolejce.

Dlatego 12 marca 2024 roku Google oficjalnie zastąpiło FID wskaźnikiem INP (Interaction to Next Paint).

INP jest znacznie bardziej kompleksowy, ponieważ analizuje wszystkie interakcje na stronie i mierzy całkowity czas od działania użytkownika aż do wizualnej odpowiedzi.

Jak sprawdzić wartość Core Web Vitals w swojej witrynie?

Znamy na to co najmniej kilka sposobów, które nie wymagają od użytkownika większej wiedzy technicznej. Wystarczy wybrać jedno z proponowanych rozwiązań, które okaże się najwygodniejsze dla właściciela witryny.

Page Speed Insight

To podstawowe narzędzie od Google, dostępne online dla każdego. Wystarczy wejść na stronę pagespeed.web.dev, wkleić adres URL swojej witryny i kliknąć „Analizuj”. Po chwili otrzymujemy czytelny panel z oceną Core Web Vitals, bazujący na danych zbieranych od realnych użytkowników Chrome w ciągu ostatnich 28 dni.

Po przeanalizowaniu witryny PageSpeed Insights prezentuje szczegółowy raport, który na pierwszy rzut oka może wydawać się skomplikowany. Kluczem jest zrozumienie wartości dla 75 centyla oraz procentowego rozkładu doświadczeń.

Wartość, którą PageSpeed Insights podaje jako główny wynik dla każdego wskaźnika (np. LCP 1,2 s), to nie jest zwykła średnia. Jest to wartość dla 75. centyla. Oznacza to, że 75% użytkowników strony doświadczyło wyniku równego tej wartości lub lepszego. Google używa tej miary, ponieważ chce mieć pewność, że strona jest szybka dla większości użytkowników, a nie tylko w idealnych warunkach. Pod każdym wskaźnikiem znajduje się kolorowy pasek i procentowy podział, który pokazuje, jakiego doświadczenia doznali wszyscy użytkownicy w ciągu ostatnich 28 dni.

Analiza Core Web Vitals (na podstawie przykładu ze zrzutu ekranu):

• Largest Contentful Paint (LCP): 1,2 s.

Wynik jest doskonały. Wartość 1,2 s dla 75. centyla mieści się z ogromnym zapasem w progu „Dobry” (≤ 2,5 s). Potwierdza to rozkład procentowy – aż 93% wszystkich wczytań strony miało „dobry” wynik LCP.

• Interaction to Next Paint (INP): 166 ms.

Również doskonały wynik. 166 ms to poniżej „dobrego” progu 200 ms. Strona jest bardzo responsywna. Zdecydowana większość, bo 81% wizyt, miała „dobry” wynik INP. Jednak 15% doświadczyło już pewnych opóźnień, co warto mieć na uwadze.

• Cumulative Layout Shift (CLS): 0,12.

Tutaj mamy problem. Wynik 0,12 dla 75. centyla przekracza próg „Dobry” (≤ 0,1) i wpada w kategorię „Wymaga poprawy”. Rozkład procentowy pokazuje, że 65% wizyt miało „dobry” wynik CLS, podczas gdy 13% miało wynik „Słaby”.

Analiza pozostałych ważnych wskaźników:

• First Contentful Paint (FCP): 1,1 s.

Pokazuje, kiedy na ekranie pojawia się jakikolwiek pierwszy element. Porównując FCP do LCP, możemy ocenić, jak szybko po pierwszym elemencie pojawia się ten najważniejszy. Wynik jest świetny (próg to ≤ 1,8 s). Oznacza to, że strona bardzo szybko pokazuje użytkownikowi pierwszy element.

• Time to First Byte (TTFB): 0,5 s.

To fundament szybkości. Mierzy, jak szybko serwer odpowiada na pierwsze zapytanie. Wynik również doskonały (próg  to ≤ 0,8 s). Świadczy o bardzo szybkiej odpowiedzi serwera, co jest fundamentem dla dobrego LCP. To dowód na wysoką jakość hostingu lub dobrą optymalizację backendu.

Google Search Console

Kolejną możliwością jest weryfikacja w Google Search Console, jednak aby uzyskać dostęp do tych danych, witryna musi zostać wcześniej zweryfikowana. W momencie, kiedy posiadacie konto w GSC, wystarczy przejść do zakładki Podstawowe wskaźniki internetowe (w menu po lewej stronie po rozwinięciu listy Eksperymenty i personalizacja), gdzie znajdziecie pełen wykaz adresów niespełniających norm dot. CWV – zarówno w obrębie witryny mobile, jak i desktop.

Jeśli jednak nie posiadacie konta w Google Search Console, warto je założyć ze względu na ogrom cennych danych, które narzędzie analizuje oraz udostępnia.

Wtyczka Lighthouse do Google Chrome

To oficjalna wtyczka, którą można zainstalować w przeglądarce. Wtyczka ta jest po prostu wygodnym skrótem do uruchomienia analizy za pomocą API PageSpeed Insights.

Co więcej, w panelu Narzędzi dla deweloperów (DevTools), wbudowanym w każdą przeglądarkę Chrome także znajdziemy zakładkę Lighthouse:

Gdy w panelu DevTools zostawimy domyślne ustawienia (Tryb Nawigacja) i uruchomimy audyt, otrzymamy pełny, szczegółowy raport.

Natomiast jeżeli wybierzemy opcję „Okres” to analizie poddajemy aktualny czas interakcji ze stroną. Klikasz przycisk „Rozpocznij okres”. Wchodzisz w interakcję ze stroną – klikasz w przyciski, otwierasz menu, filtrujesz produkty, przewijasz itd. Po wykonaniu czynności klikasz „Zakończ okres”. Lighthouse wygeneruje raport, który pokaże, co działo się podczas tych interakcji.

Profesjonalny audyt SEO

Zweryfikuj, czy Twoja strona działa prawidłowo

Zobacz więcej

Konsola w przeglądarce

Trzecia opcja to konsola w przeglądarce, która pokazuje wszystkie ładujące się elementy witryny oraz czas trwania procesu. Wystarczy kliknąć prawym przyciskiem myszy i wybrać “zbadaj element” i wybrać zakładkę “Wydajność” . To narzędzie dla specjalistów, które pozwala na monitorowanie Core Web Vitals w czasie rzeczywistym podczas interakcji ze stroną.

Na wykresach znajdziemy mnóstwo szczegółowych informacji na temat szybkości ładowania się strony, które przydadzą się także podczas przeprowadzania audytu SEO strony. Za pomocą znajdującej się tutaj linii czasu będziemy w stanie prześledzić wszystkie kroki, jakie muszą się odbyć przed jej pełnym wczytaniem. Zdarzenia, które zajmują wyjątkowo dużo czasu, są automatycznie oznaczane na czerwono.

GTmetrix

GTmetrix to zaawansowane narzędzie, które do analizy wykorzystuje silnik Google Lighthouse, prezentując znane nam wskaźniki Core Web Vitals, ale wzbogaca je o kluczowe funkcje diagnostyczne. Jego największe atuty to szczegółowy wykres kaskadowy (Waterfall Chart), który pozwala prześledzić ładowanie każdego zasobu, możliwość wyboru globalnej lokalizacji serwera testowego oraz opcja symulacji na rzeczywistych urządzeniach z systemem Android. Dzięki temu jest to idealne narzędzie do głębokiej analizy technicznej i zrozumienia, jak poszczególne skrypty czy obrazy wpływają na ogólną prędkość ładowania strony.

Czy należy się bać niskich wyników CWV?

I tak, i nie.

Niski wynik w Core Web Vitals to nie jest natychmiastowa katastrofa dla Twojej strony. To bardziej jak kontrolka „check engine” w samochodzie. Nie oznacza ona, że musisz w panice porzucać auto na poboczu. Oznacza jednak, że powinieneś jak najszybciej umówić się do mechanika, aby zdiagnozować i naprawić usterkę, zanim przerodzi się w poważną awarię.

Ignorowanie niskich wyników Core Web Vitals to strategiczny błąd. Jest to świadome godzenie się na to, że konkurencja z lepszymi wskaźnikami zyskuje przewagę. Celem nie jest pogoń za idealnym wynikiem 100/100 we wszystkich kategoriach. Celem jest osiągnięcie progu „Dobry” (zielony kolor) dla wszystkich trzech wskaźników Core Web Vitals, ponieważ to właśnie ten próg Google uznaje za wyznacznik pozytywnego doświadczenia użytkownika.

Jak poprawić wyniki Core Web Vitals?

Po dokonaniu szczegółowej analizy strony należy krok po kroku ocenić wartość poszczególnych elementów Core Web Vitals. Jeśli znajdują się one w środkowym przedziale poniższej tabeli, oznacza to, że przy niewielkim nakładzie prac można doprowadzić czas ładowania strony do normy, jeśli jednak wszystkie wartości znajdują się w przedziale czerwonym, oznacza to, że czeka Was mnóstwo pracy.

Jak poprawić LCP (Largest Contentful Paint)?

Poniżej znajduje się lista konkretnych działań, które są w stanie znacznie poprawić LCP w witrynie. W niektórych przypadkach wprowadzenie wszystkich z wymienionych rozwiązań może być jednak uniemożliwione ze względu na wybrany hosting bądź CMS, a także różnice w strukturze kodu strony. Dlatego należy zweryfikować, który z poniższych podpunktów jest możliwy do realizacji, a później wprowadzać go krok po kroku, stale monitorując wygląd strony po każdej zmianie, bowiem nie w każdym przypadku przyniosą one oczekiwane efekty.

Co należy zrobić:

• zoptymalizować działania usług hostingowych,
• korzystać z nowych formatów obrazów (WebP),
• skompresować nie tylko pliki graficzne, ale i tekstowe,
• zminifikować kod CSS,
• skompresować JavaScript,
• skorzystać z sieci dostarczania treści (CDN),
• zastosować Inline Critical CSS,
• wyeliminować opóźnienia ładowania zasobów,
• ograniczyć lub usunąć czcionki w plikach CSS, które blokują renderowanie,
• korzystać z renderowania po stronie serwera,
• podzielić długie zadania,
• ograniczyć zewnętrzne skrypty do minimum,
• jeśli to możliwe, zastąpić skrypty JS CSS3 lub HTML.

Jak poprawić CLS (Cumulative Layout Shift)?

CLS to największy problem większości witryn w sieci. Mogłoby to sugerować, że jego poprawa wiąże się z długimi i wymagającymi działaniami, które w ostateczności i tak nie przyniosą oczekiwanych efektów. Nic bardziej mylnego – znając dobrze strukturę swojej strony oraz wykorzystany CSM, można dobrać takie rozwiązania, które pozwolą raz na zawsze uporać się ze zbyt wysokim czasem ładowania strony. Większość z nich jest jednak uniwersalna i ich odpowiednie wprowadzenie nie powinno doprowadzić do uszkodzenia wyglądu oraz sprawności witryny.

Co należy zrobić:

• dodawać atrybuty width i height do obrazów i wideo,
• rezerwować stałą przestrzeń dla reklam, banerów i elementów <iframe>,
• używać symboli zastępczych obrazu dla miniatur wideo,
• minimalizować filmy w części strony widocznej na 1 ekranie,
• unikać wstawiania dynamicznej treści powyżej istniejących elementów,
• zastosować czcionki statyczne,
• używać SVG, gdy tylko jest to możliwe,
• unikać wypełniacza przed załadowaniem,
• elementy interfejsu użytkownika dodać dopiero w miejscu widocznym po przewinięciu.

Jak poprawić INP (Interactive to Next Paint)?

Gdy użytkownik wchodzi w interakcję ze stroną, a główny wątek jest zajęty wykonywaniem długiego zadania JavaScript, interakcja musi czekać w kolejce. Celem INP jest skrócenie tego oczekiwania i jak najszybsze dostarczenie wizualnej odpowiedzi.

Co należy zrobić:

• zidentyfikować i zdiagnozować powolne interakcje,
• używać setTimeout do odraczania wykonania kodu,
• unikać „layout thrashing” (naprzemiennego odczytu i zapisu do DOM),
• zminimalizować rozmiar DOM,
• używać elementu content-visibility do leniwego renderowania elementów poza ekranem,
• zwrócić uwagę na koszty wydajności podczas renderowania kodu HTML za pomocą JavaScriptu.

Czy Twoja witryna jest już zoptymalizowana pod kątem Core Web Vitals?

Już wiesz, czym są core web vitals – i że to znacznie więcej niż trzy tajemnicze skróty w technicznym raporcie. To miara realnych doświadczeń Twoich użytkowników. Test cierpliwości przy ładowaniu (LCP), płynności interakcji (INP) i stabilności interfejsu (CLS). Wiesz również, że Google traktuje je jako istotny sygnał rankingowy, a Twoi klienci jako argument za tym, by zostać i dokonać zakupu lub wrócić do konkurencji. Pytanie brzmi – co zrobisz z tą wiedzą?
Optymalizacja Core Web Vitals to nie jednorazowe zadanie, ale ciągły proces i jeden z filarów nowoczesnego SEO.

Jeśli chcesz, aby Twoja witryna była nie tylko bogata w treść, ale i doskonała technicznie, odezwij się do nas. Pomożemy Ci przełożyć skomplikowane dane na konkretne działania, które przyniosą realne rezultaty.

Tekst zaktualizowany, w pierwotnej wersji ukazał się na blogu w 2020 roku.

Spodobał Ci się ten artykuł?

Zapisz się na newsletter - nie spamujemy!