Wskaźniki Core Web Vitals – czym są, jak je zmierzyć i poprawić?

SEO od dawna nie skupia się wyłącznie na technicznych aspektach związanych z budową zaplecza, linkowaniu czy skomplikowanych strukturach witryn. Każda kolejna aktualizacja algorytmów pokazuje, że coraz większe znaczenie ma wartość przekazywanych treści oraz wygoda korzystania ze strony. 

Najlepszym dowodem na to, że Google zmierza właśnie w tym kierunku, jest zapowiadana na maj tego roku prawdziwa rewolucja. Od maja 2021 roku Core Web Vitals oficjalnie staną się czynnikami rankingowymi.

Czym dokładnie są, w jaki sposób je mierzyć i jak zadbać o dobre wyniki? Tego wszystkiego dowiesz się z naszego poradnika. Zapraszamy!

Czym są Core Web Vitals?

Core Web Vitals po polsku określane są jako Podstawowe Wskaźniki Internetowe. Jest to zestaw wskaźników, które w ogólnej definicji mają mierzyć i określać komfort korzystania ze strony przez użytkownika. Mówimy tutaj przede wszystkim o szybkości wczytywania strony oraz dostępności w czasie jej renderowania. 

W skład Core Web Vitals zaliczamy trzy wskaźniki:

• LCP (Largest Contentful Paint) – czas renderowania największego fragmentu strony,
• FID (First Input Delay) – czas od momentu wejścia użytkownika w pierwszą interakcję aż do odpowiedzi na nią,
• CLS (Cumulative Layout Shift) – suma wszystkich zmian i przesunięć układu elementów strony.

Dlaczego Core Web Vitals są tak ważne?

Google od dłuższego czasu duży nacisk kładzie nie tylko na jakość prezentowanych treści, ale również na szybkość i czytelność umieszczanych w organicznych wynikach wyszukiwania witryn. Konsekwencją tej strategii jest oficjalny komunikat, w którym firma ostrzega, iż od maja 2021 roku Podstawowe Wskaźniki Internetowe określające „witalność” strony, staną się oficjalnie czynnikami rankingowymi. 

Jak zapewnia Google, treść na stronach wciąż będzie miała największe przełożenie na pozycjonowanie stron internetowych w rankingach, jednak Core Web Vitals pozwolą algorytmom promować strony oferujące czytelnikom maksymalny komfort podczas korzystania z nich. 

Poziom jakości i optymalizacji witryny, a tym samym spełnienia każdej z trzech składowych Core Web Vitals określany jest za pomocą trzystopniowej kolorowej skali. Zielony wynik oznacza pełną zgodność z wymaganiami Google, pomarańczowy daje sygnał, że strona wymaga poprawy, czerwony natomiast oznacza zły wynik zdecydowanie poniżej zalecanych wartości. 

Co w sytuacji, gdy dana witryna nie wywiąże się z wszystkich czynników? 

Ten temat został poruszony w jednej z ostatnich rozmów z Johnem Muellerem, który sam nie jest przekonany, jak to w praktyce będzie wyglądało. Nie wiemy zatem, jaką wagę mają poszczególne składowe, a także wpływ wyników „wymagających poprawy” na pozycję w rankingach. W tej sytuacji najlepiej założyć, że każdy z czynników powinien mieścić się w zielonym zakresie.

Core Web Vitals – Podstawowe Wskaźniki Internetowe w 2021

Jak już wcześniej wspomnieliśmy, Core Web Vitals to mierzalne wskaźniki określające jakość doświadczeń użytkownika związanych z obsługą danej strony. Poniżej przyjrzymy się temu, czym dokładnie każdy z nich jest, jakie są wymagania Google i co zrobić, aby je spełnić.

LCP - Largest Contentful Paint (wczytywanie strony)

Czas ładowania strony to jeden z podstawowych wskaźników jej odpowiedniej optymalizacji. Chociaż znany od dawna, to właśnie od maja stanie się czynnikiem rankingowym. Ponieważ całkowity czas ładowania strony nie jest do końca uniwersalny, LCP mierzy czas renderowania największego widocznego w oknie przeglądarki elementu. Mamy na myśli tutaj wszystko to, co widzimy, jeszcze przez scrollowaniem (tak zwane AboveTheFold). Czas wczytywania największego widocznego elementu powinien wynosić mniej niż 2,5 sekundy.

Ponieważ strona wczytuje się etapami, zgodnie z kodem HTML, największy widoczny element jest zmienny – aż do momentu pełnego wczytania każdego z nich. Fragmenty niewidoczne i ładujące się poza ekranem nie będą brane pod uwagę. Jednak każdy z elementów, który pojawi się, ale w skutek renderowania zostanie przesunięty poza pole widzenia, wciąż może mieć wpływ na wynik.

Skala wyników LCP:

• GOOD – poniżej 2,5 sekundy
• NEEDS IMPROVEMENT – od 2,5 do 4 sekund
• POOR – powyżej 4 sekund

Jak poprawić wynik LCP?

Na słaby wynik LCP może mieć wpływ wiele elementów – od wolnego serwera, przez obciążający (lub blokujący renderowanie) kod JavaScript i CSS, aż po brak optymalizacji grafik.

Pierwszą z kwestii, którą należy sprawdzić po uzyskaniu słabego wyniku LCP, będzie przeanalizowanie czasu odpowiedzi serwera. Takie opóźnienie wynika z czasu, jaki upływa od wysłania zapytania do momentu otrzymania odpowiedzi z serwera.

Równie często za opóźnienia na stronie odpowiada kod JavaScript i CSS. Tutaj mamy duże pole do działania, ale każda strona wymaga indywidualnego podejścia. Podstawowym działaniem będzie minifikacja plików CSS oraz JS.

Poprawę wyniku LCP w pierwszej kolejności obejmuje optymalizacja:

• czasu odpowiedzi serwera,
• stylów CSS i kodu JS,
• wielkości grafik,
• czcionek.

FID - First Input Delay (interaktywność)

FID to czynnik bezpośrednio związany z interaktywnością danej strony, ale tak samo jak LCP, powiązany jest z czasem jej ładowania. Ma na celu pomiar czasu, w który strona zareaguje na wejście przez użytkownika w interakcję. W tym wypadku brane pod uwagę są kliknięcia linków i przycisków, czy skorzystanie z menu nawigacyjnego. Czas ten powinien wynosić mniej niż 100 milisekund.

Skala wyników LCP:

• GOOD – poniżej 100 milisekund
• NEEDS IMPROVEMENT – od 100 do 300 milisekund
• POOR – powyżej 300 milisekund

Jak poprawić wynik FID?

Jednym z najczęściej spotykanych problemów przekładających się na słaby wynik FID jest kod JavaScript. Jego odpowiednia optymalizacja pozwala przeglądarce szybciej rozpatrzyć polecenia użytkownika. Dodatkowo na spowolniony czas reakcji może mieć kod pochodzący spoza strony, czyli third party script. Jego ograniczenie, a co za tym idzie zmniejszenie liczby procesów, pozytywnie przekłada się na czas reakcji strony.

Optymalizację strony pod kątem FID należy zacząć od:

• zmniejszenia liczby zapytań do serwera,
• skrócenie czasu wykonywania kodu JavaScript
• ograniczenie ilości kodu z zewnętrznych serwisów,
• korzystanie z pamięci przeglądarki – cache.

CLS – Cumulative Layout Shift (stabilność strony)

Każdy z nas to zna – wchodzimy na stronę, chcemy kliknąć dany link lub menu, a w tej samej chwili layout strony się przemieszcza i klikamy w coś zupełnie innego. Właśnie przed takimi sytuacjami ma chronić uwzględnienie CLS w czynnikach rankingowych. Pomiar ten pozwala sprawdzić ilość przesunięć układu strony w czasie jej wczytywania i wyświetlania.

W przeciwieństwie do pozostałych czynników CLS zbiera dane cały czas, a nie tylko przez pierwsze chwile po włączeniu strony lub wejściu w interakcję. Co ważne, pomiar ten nie dotyczy nowych elementów, ani zmian rozmiaru już tych istniejących. 

Skala wyników CLS:

• GOOD – poniżej 0,1
• NEEDS IMPROVEMENT – od 0,1 do 0,25 
• POOR – powyżej 2,5 

Jak poprawić wynik CLS?

Przesunięcia layoutu są najczęściej skutkiem asynchronicznego ładowania elementów czy dynamicznie dodawanego contentu. Często mają miejsce na stronach, gdzie doładowywane grafiki nie uwzględniają deklarowanych wielkości, a ich dopasowywanie do wielkości okna przeglądarki powoduje zmiany w wyglądzie strony. 

Tutaj z pomocą przychodzi przede wszystkim skrupulatne dodawanie atrybutów związanych z szerokością i wysokością wczytywanych elementów, odpowiednie rezerwowanie przestrzeni w CSS, a także ostrożne umieszczanie embedowanych treści (np. postów z serwisów społecznościowych).

Optymalizacja strony pod kątem CLS to przede wszystkim:

• dodawanie atrybutów dotyczących wymiarów grafik i filmów,
• uwzględnianie odpowiednich przestrzeni w CSS,
• korzystanie z font-display w CSS.

Jak mierzyć Core Web Vitals?

Co prawda Google zapewnia, że do czasu aktualizacji udostępni jeszcze wiele materiałów ułatwiających dostosowanie strony do nowych wymagań, to już teraz bez problemu możemy samodzielnie przeanalizować wyniki każdego z czynników Core Web Vitals. Oto najprostsze metody:

Google PageSpeed Insights

Jedną z najszybszych metod na sprawdzenie wyniku danej strony jest skorzystanie z dobrze znanego narzędzia PageSpeed Insights. Oprócz danych uzyskanych za pomocą silnika Lighthouse narzędzie wyświetla także wyniki z testów w czasie rzeczywistym dla LCP, FID oraz CLS. Jedyne co trzeba zrobić to wpisać adres analizowanej strony.

Web.dev

Web.dev podobnie jak PageSpeed Insights daje dostęp do pomiarów czynników Core Web Vitals. Przedstawiane są w przyjaznej formie, czytelnej nawet dla początkujących administratorów stron. Tutaj jednak bazujemy tylko na danych laboratoryjnych.

Search Console

Ponieważ Core Web Vitals niebawem mają stać się jednym z czynników rankingowych, to nie mogło ich zabraknąć także w dobrze znanym każdemu administratorowi narzędziu – Search Console. Co prawda, na razie oferuje dość ograniczoną funkcjonalność, to już teraz w sekcji Ulepszenia znajdziemy zakładkę „Podstawowe wskaźniki internetowe”. Tam publikowane są wszystkie ostrzeżenia dotyczące przekroczenia wymaganych przez Google wartości.

Analiza z poziomu przeglądarki Chrome

Tutaj mamy dwie możliwości. Pierwsza to włączenie narzędzi dla deweloperów w Chrome. Po przejściu do zakładki Performance i zaznaczeniu Web Vitals otrzymujemy możliwość dokonywania pomiaru. Drugą opcją jest zainstalowanie wtyczki Web Vitals, która w wygodny i przejrzysty sposób prezentuje zmierzone wartości z zakresu LCP, FID oraz CLS.

Core Web Vitals – nowy czynnik rankingowy w 2021

To, że Core Web Vitals już od maja 2021 roku będą miały realny wpływ na pozycję w rankingach wyników wyszukiwania, jest pewne. Mimo iż wciąż pozostaje wiele pytań i niewiadomych, to optymalizacji pod kątem nowych czynników rankingowych lepiej nie zostawiać na ostatnią chwilę i przygotować się z odpowiednim wyprzedzeniem. Owszem, wartościowe treści wciąż mają mieć tu pierwszeństwo. Jednak ciekawa i dobrze przygotowana treść, prezentowana na zoptymalizowanej pod kątem Core Web Vitals stronie z pewnością będzie miała pierwszeństwo w organicznych wynikach wyszukiwania.