W maju 2021 Google wprowadziło nowy czynnik rankingowy, na który składały się 3 metryki, znane jako Core Web Vitals. Uważane za bardzo ważne w kontekście doświadczeń użytkowników, stały się również drogowskazem dla specjalistów SEO czy Web Developerów, w jaki sposób tworzyć czy optymalizować serwis, tak by mógł zostać lepiej oceniony przez Google. W poniższym artykule przedstawię czym są podstawowe wskaźniki internetowe od Google, jak się je mierzy, a także co warto jeszcze o nich wiedzieć w kontekście pozycjonowania i samego User Experience.
Spis Treści
- Core Web Vitals – co to takiego?
- Najważniejsze wskaźniki Core Web Vitals
- Core Web Vitals – narzędzia i sposoby mierzenia
- Dlaczego Core Web Vitals mają znaczenie dla SEO?
- Jak poprawić wyniki Core Web Vitals?
Core Web Vitals – co to takiego?
Podstawowe wskaźniki internetowe (Core Web Vitals) są zestawem metryk wydajnościowych, które stały się integralną częścią oceny jakości strony internetowej w Google. Skupiają się na takich elementach jak:
- prędkość (szybkość ładowania zasobów serwisu),
- responsywność (związana z interakcją użytkownika),
- stabilność wizualna (np. przesunięcia układu treści).
Dlaczego analiza i poprawa serwisu pod tym kątem są aż tak ważne? Ano dlatego, że m.in. jakość treści i wygoda użytkowania strony są dla Google priorytetem. O ile w przypadku oceny dostarczanych treści Google regularnie wprowadza kolejne aktualizacje algorytmu, tak w przypadku wygody użytkowania dopiero wprowadzenie Core Web Vitals w maju 2021 roku pozwoliło na realną ocenę jakości i możliwość optymalizacji pod tym kątem w oparciu o konkretne informacje widoczne w narzędziach.
Reasumując, Google zdefiniowało te wskaźniki, by móc przełożyć doświadczenie użytkowników na mierzalne dane, a to jasno oznacza że wygoda korzystania z serwisu = wyższa ocena w rankingu Google.
Najważniejsze wskaźniki Core Web Vitals
Wyróżniamy trzy najważniejsze wskaźniki Core Web Vitals. Są to:
LCP (Largest Contentful Paint) – wyrenderowanie największej części treści
Wskaźnik LCP mierzy czas, jaki upływa od momentu wejścia na stronę do załadowania (wyrenderowania) największego elementu w obszarze okna przeglądarki (Viewport). Najczęściej dotyczy takich elementów jak:
- video
- grafiki
- bloki tekstowe
- animacje
Optymalnym wynikiem jest LCP poniżej 2,5 sekundy. Przekroczenie tej wartości może wskazywać na wolno ładującą się stronę, co w konsekwencji negatywnie wpływa na doświadczenie użytkownika i ocenę samego Google’a.
Źródło: https://web.dev/articles/lcp?hl=pl
W jaki sposób możemy poprawić wynik LCP? Oczywiście każdy przypadek należy rozpatrywać indywidualnie, a na każdy problem może mieć wpływ kilka rzeczy np. wolny hosting, niezoptymalizowany prawidłowo kod, a przede wszystkim sama zawartość i układ struktury elementów danej podstrony. W tym kontekście zmniejszenie rozmiaru przesyłanych plików, czy ilości treści w widocznym obszarze okna przeglądarki, może przyczynić się do poprawy wyniku.
INP (Interaction to Next Paint) – czas do kolejnego wyrenderowania
Wskaźnik INP zastąpił poprzedni wskaźnik FID (First Input Delay) i jest miarą interaktywności strony na podstawie danych z Event Timing Api. INP mierzy czas opóźnienia pomiędzy momentem, gdy użytkownik wchodzi w interakcję z danym elementem strony (np. kliknięcie w button lub odnośnik), a momentem, gdy przeglądarka jest w stanie odpowiedzieć na tę interakcję i wyświetlić nowy widok. Wskaźnik INP jest bardziej precyzyjny niż FID, ponieważ bierze pod uwagę różne interakcje na danej podstronie, a nie tylko pierwszą z nich.
Źródło: https://web.dev/articles/inp?hl=pl
Optymalnym wynikiem dla INP jest czas poniżej 200 ms, zaś wynik do 500 ms uważany jest za dobry, lecz wymagający poprawy. W zależności od analizowanego problemu, wynik dla wskaźnika INP możemy poprawić m.in. poprzez:
- optymalizację kodu JavaScript,
- kompresję grafik,
- minimalizację żądań sieciowych,
- korzystanie z CDN (sieć rozproszonych serwerów)
Gra jest warta świeczki, ponieważ optymalizacja serwisu pod względem responsywności wpłynie też pozytywnie na wygodę użytkowania witryny i zmniejszenie ryzyka zakończenia danej sesji przez użytkownika.
CLS (Cumulative Layout Shift) – skumulowane przesunięcie układu
Wskaźnik CLS mierzy stabilność strony poprzez identyfikację problemów związanych z przemieszczaniem się układu treści i innych elementów w trakcie ładowania podstrony. Zmiana układu najczęściej dotyczy grafik, przycisków np. typu „Call to action”, a także bloków tekstowych i nagłówków, których przesunięcie wpływają negatywnie na wygodę użytkowania witryny.
Źródło: https://web.dev/articles/cls?hl=pl
Optymalny wynik CLS wynosi 0,1 lub mniej, a na jego wysokość duży wpływ mają sytuacje, gdy użytkownik przypadkowo kliknie w niepożądany element. Warto wiedzieć, że na wynik mają wpływ wyłącznie zmiany w układzie dotychczasowych elementów – wszystko co zostanie dodane już w trakcie nie jest brane pod uwagę, o ile nie powoduje zmiany pozycji początkowej pozostałych elementów na analizowanej podstronie.
Przy ręcznej weryfikacji CLS bardzo przydatna jest rozszerzenie do chrome o nazwie „CLS Visualiser”, dzięki której możemy w czasie rzeczywistym śledzić ew. przesunięcia układu.
Core Web Vitals – narzędzia i sposoby mierzenia
Wiemy już, że zestaw wskaźników Core Web Vitals to jedne z kluczowych elementów, jakie powinniśmy wziąć pod uwagę podczas analizy serwisu internetowego – tak z punktu widzenia doświadczeń użytkowników, jak i poprawy wyników SEO. W jaki sposób możemy je zmierzyć, by móc ocenić aktualną kondycję serwisu pod tym kątem?
Na początek warto wspomnieć, że mamy dwa źródła danych o Core Web Vitals tj. dane laboratoryjne oraz dane rzeczywiste. Pierwsze z nich dotyczą pomiarów wykonanych za pomocą specjalistycznych narzędzi w przeglądarce Chrome, aplikacjach czy samodzielnie, dzięki wykorzystaniu otwartego kodu udostępnionego przez Google pod adresem: https://github.com/GoogleChrome/web-vitals. Dane laboratoryjne celowo ograniczają liczbę zmiennych do jednego urządzenia, jednej sieci i jednej lokalizacji geograficznej.
Dane rzeczywiste (in. dane terenowe, dane pól) to średnia zgromadzona z odwiedzin użytkowników z ostatnich 28 dni, możliwa do weryfikacji za pomocą Google Search Console, PageSpeed Insights czy CrUX API Tool. Możemy również uzyskać te dane samodzielnie poprzez Chrome UX Report API.
Wyniki dla Core Web Vitals, przy wykorzystaniu danych pól, różnią się od tych z wykorzystaniem danych laboratoryjnych z racji większej ilości czynników, takich jak m.in.:
- różnice w zachowaniach użytkowników
- wiele sieci
- różne lokalizacje
- inaczej zoptymalizowane przeglądarki
- pamięć podręczna strony
- wykorzystanie AMP Cache
Biorąc pod uwagę dane laboratoryjne, jak i dane pól – Core Web Vitals można mierzyć na kilka niżej wymienionych sposobów.
Google PageSpeed Insights
PSI to jedno z najpopularniejszych narzędzi do pomiaru wydajności strony (dla mobile i komputerów stacjonarnych), w kontekście danych rzeczywistych, jak i danych laboratoryjnych: https://pagespeed.web.dev/
Przykładowe wyniki dla danych rzeczywistych w narzędziu PageSpeed Insights
W narzędziu PageSpeed Insights sprawdzimy wyniki dla podstawowych wskaźników internetowych, a także otrzymamy sugestie, co należy poprawić, aby zwiększyć wydajność strony i tym samym wyniki Core Web Vitals (w zakładce ”Diagnostyka”). Elementy wymagające poprawy są generowane na podstawie danych laboratoryjnych widocznych również w narzędziu „Lighthouse”, dostępnym w przeglądarce Google Chrome.
Przykładowe zalecenia do poprawy jednego ze wskaźników w narzędziu PSI
Google Search Console
Narzędzie Google Search Console to jedno z podstawowych źródeł informacji w zakresie kondycji SEO serwisu, które oferuje rozbudowane raporty związane ze skutecznością w organicznych wynikach Google czy problemów związanych ze stanem indeksacji: https://search.google.com/search-console/
Dodanie konta usługi dla danego serwisu do narzędzia GSC to również możliwość weryfikacji danych rzeczywistych dla Core Web Vitals z podziałem na wykresy dotyczące urządzeń mobilnych, jak i wersji serwisu na komputery:
Core Web Vitals dla urządzeń mobilnych (wykres GSC)
Google przyporządkowuje typy adresów i dzieli je na poprawne i problematyczne – w tym drugim przypadku mogą być „Wymagające poprawienia” lub „Słabej jakości”.
Zrzut ekranu z GSC obrazujący typ i wagę problemu oraz ilość problematycznych adresów
Po wybraniu danej zakładki możemy zobaczyć średni wynik dla danej grupy podstron, a także listę przykładowych adresów na których wystąpił problem, co jest szczególnie przydatne w dalszej analizie danego wskaźnika.
Średni wynik LCP dla wybranej grupy podstron w raporcie z narzędzia GSC
Lighthouse
Lighthouse to narzędzie typu open-source stworzone przez Google, które umożliwia audytowanie stron pod kątem jakości i wydajności. Co ważne, Lighthouse mierzy także Core Web Vitals, czego wynikiem są na bieżąco oceniane dane laboratoryjne i sugestie poprawy dla podstawowych wskaźników internetowych.
Audyt możemy wykonać przechodząc do zakładki „Lighthouse” w narzędziach deweloperskich (DevTools) w przeglądarce Google Chrome. Przy przejść do Chrome DevTools wystarczy wcisnąć klawisz F12.
Generowanie raportu w Lighthouse (w Chrome DevTools)
Audyt w Lighthouse to przede wszystkim ocena wydajności danej podstrony i dodatkowe zalecenia optymalizacyjne – dla urządzeń mobilnych i komputerów stacjonarnych (dostępne również w PageSpeed Insights). Narzędzie umożliwia szybki eksport wyników laboratoryjnych w formacie JSON czy HTML.
Zrzut głównego widoku po analizie wydajności w Lighthouse
Zakładka „Performance” w Chrome DevTools
Nie tylko Lighthouse umożliwia analizę wydajności i UX bezpośrednio w przeglądarce Google Chrome – w narzędziach dla deweloperów znajdziemy również zakładkę o nazwie „Performance”.
Audyt dostarcza „na żywo” szczegółowe dane laboratoryjne dla podstawowych wskaźników internetowych biorąc pod uwagę wszystkie interakcje użytkownika (podczas nagrywania działań na stronie), a także przesunięcia układu czy ładowanie konkretnych elementów ukazane na osi czasu.
Chrome DevTools – zakładka Performance
Rozszerzenie „Web Vitals” dla Chrome
Szczególnie przydatne w analizie Core Web Vitals jest rozszerzenie dla przeglądarki Chrome o nazwie „Web Vitals”. Dzięki temu rozszerzeniu możemy monitorować na żywo wyniki LCP, INP i CLS w trakcie przeglądania serwisu.
Sprawdź na Chrome Web Store: Web Vitals
Ocena podstawowych wskaźników internetowych w rozszerzeniu Web Vitals
Aktualizacja: wraz z wydaniem Chrome 132 rozszerzenie Web Vitals przestało być obsługiwane – jego funkcje są od teraz dostępne w panelu Wydajność w Chrome DevTools.
Więcej informacji: developer.chrome.com/blog/web-vitals-extension-merged?hl=pl
WebPageTest
To przydatne narzędzie do analizy stron i jej wydajności, wraz z danymi o Core Web Vitals czy innymi elementami wymagającymi optymalizacji w serwisie. WebPageTest umożliwia eksport wyników w różnych formatach (m.in. CSV, JSON), a także automatyczne tworzenie raportów poprzez Looker Studio.
Sprawdź: https://www.webpagetest.org/
Przykładowe wyniki dla Core Web Vitals w narzędziu WebPageTest
Chrome UX Report API
CrUX API pozwala na dostęp do rzeczywistych pomiarów UX wykonanych za pomocą przeglądarki Google Chrome. Ten ogromny zbiór danych zintegrowany z Google Search Console, PageSpeed Insights czy panelem CrUX umożliwia ocenę i monitoring wskaźników Core Web Vitals, na podstawie danych zgromadzonych z wizyt tysięcy użytkowników na stronie.
Dowiedz się więcej: https://developer.chrome.com/docs/crux/api?hl=pl
Dla wizualizacji danych z CRuX API polecamy skorzystanie z CrUX API Tool: https://core-web-vitals.vercel.app/
Przykładowe wartości danych rzeczywistych dla strony w CrUX API Tool
Dlaczego Core Web Vitals mają znaczenie dla SEO?
Od momentu wprowadzenia Core Web Vitals jako czynnika rankingowego Google, stały się one istotnym elementem strategii SEO. Istnieje kilka powodów, dla których algorytm Google’a uznaje te wskaźniki za kluczowe.
Doświadczenie użytkownika
Google zawsze stawia na poprawę doświadczeń użytkownika, a szybkość ładowania strony, jej responsywność oraz stabilność wizualna mają bezpośredni wpływ na UX. Jeśli strona jest wolna, nie reaguje właściwie na interakcje lub ma problemy z poprawnym wyświetlaniem treści, użytkownicy są bardziej skłonni opuścić ją na rzecz konkurencyjnych stron. Dla Google’a to informacja, że nie warto takiego serwisu pokazywać wysoko w wyszukiwarce.
Zachowania użytkownika
Algorytm Google’a bierze pod uwagę różne informacje, takie jak np. czas spędzony na stronie, współczynnik odrzuceń (bounce rate) czy liczbę odwiedzin. Strony mające słabe wyniki w zakresie Core Web Vitals częściej borykają się z wysokim współczynnikiem odrzuceń, co może negatywnie wpływać na ich pozycje w wynikach wyszukiwania.
Jakość i wydajność
Szybka, responsywna i stabilna wizualnie strona, sprzyja wyższym pozycjom w wyszukiwarce Google. Poprawa wyników dla podstawowych wskaźników internetowych prowadzi do lepszej oceny jakości strony przez Google, co może przełożyć się na wyższe pozycje w wynikach wyszukiwania. Szczególnie ważna w tym kontekście jest optymalizacja serwisu w wersji na mobile – dla Google priorytetem jest zapewnienie najlepszych wrażeń pod UX na urządzeniach mobilnych, z racji ich większej popularności.
Jak poprawić wyniki Core Web Vitals?
Dzięki wcześniej opisanym narzędziom jesteśmy w stanie ocenić wyniki Core Web Vitals i zidentyfikować obszary, które wymagają optymalizacji. Do najczęściej wymienianych elementów i kroków, które należy podjąć w celu poprawy wydajności i wrażeń z korzystania z serwisu jest m.in.:
- Kompresja i zmiana formatu plików graficznych,
- Minifikacja kodu JavaScript, CSS,
- Przyspieszenie czasu odpowiedzi serwera,
- Usunięcie niepotrzebnych skryptów (lub opóźnienie ich ładowania),
- Minimalizacja przesunięć układu strony,
- Optymalizacja ładowania fontów (lub ich redukcja),
Warto wiedzieć, iż poprawa niektórych elementów może prowadzić do lepszej oceny więcej niż jednego wskaźnika. Przykładowo: wolne ładowanie zasobów serwisu wpływa nie tylko na ocenę wskaźników związanych z ładowaniem konkretnego elementu (FCP, LCP), ale również np. na problemy z responsywnością i łatwością w interakcji użytkownika ze stroną (INP). W tym kontekście – optymalizacja serwisu pod kątem szybkości ładowania niektórych zasobów może przynieść korzyści na wielu płaszczyznach.
Podsumowując…
Core Web Vitals to istotne wskaźniki, które mają wpływ nie tylko na wydajność serwisu, ale również na widoczność w wynikach wyszukiwania Google. Optymalizacja strony pod kątem LCP, INP czy CLS to nie tylko poprawa wygody użytkowania serwisu, ale także wyższe pozycje na pozycjonowane frazy. Warto więc monitorować podstawowe wskaźniki internetowe i podejmować działania na rzecz ich optymalizacji.
Autor: Bartosz Rodzeń