Wskaźniki Core Web Vitals – co mierzą i jak poprawić wyniki strony?

Wyszukiwarka Google regularnie modyfikuje algorytmy pozycjonowania, aby strony wyświetlane na liście wyników lepiej i precyzyjniej trafiały do oczekiwań użytkowników. Jedną z najważniejszych nowości są wskaźniki Core Web Vitals, które od 2022 roku wpływają na pozycje witryn. Co warto wiedzieć na ten temat?

Core Web Vitals w pigułce: najważniejsze informacje

Czym właściwie są Core Web Vitals (CWV)? Nazwę można przetłumaczyć jako „podstawowe wskaźniki internetowe” – jest to zbiór metryk, które mają na celu precyzyjną ocenę doświadczeń użytkownika (UX) na stronie. Warto wspomnieć, że UX przez długi czas był kwestią dość trudną do jednoznacznego określenia. Wiele czynników dotyczących wrażeń z korzystania z witryny zależy od indywidualnych preferencji oraz odczuć, jednak CWV jest próbą ustandaryzowania tego aspektu w postaci konkretnych wartości liczbowych.

Core Web Vitals składają się z trzech elementów, które opisują czas załadowania największego elementu treści, opóźnienie w przetwarzaniu akcji użytkownika oraz przesunięcie układu strony. Od marca 2022 roku CWV stanowią integralną część algorytmów pozycjonowania Google. To jeden z najważniejszych powodów, by zadbać o ich optymalizację – nie można jednak przy tym zapominać także o użytkownikach, którzy również zyskają na przywiązaniu wagi do UX.

Gdzie znaleźć informacje o aktualnej wartości wskaźników?

Metryki Core Web Vitals są obsługiwane w pełni przez wyszukiwarkę Google. Aby sprawdzić obecne dane, wystarczy zalogować się do konta Google Search Console. Wartości dla CWV znajdują się w sekcji „Podstawowe wskaźniki internetowe”. Można je podejrzeć także za pomocą PageSpeed Insights lub w narzędziach programistycznych przeglądarki Chrome.

Dlaczego metryki Core Web Vitals są tak istotne?

Podczas szukania interesujących stron internauci zwracają uwagę nie tylko na zawartość witryny, lecz także na wrażenia podczas przeglądania. Z tego względu zadbanie o CWV pozwoli Ci zarówno poprawić pozycję strony w wynikach wyszukiwania, jak i zadbać o użytkowników. Witryna zgodna z wytycznymi Google w tym zakresie będzie po prostu działać sprawniej, co bezpośrednio przełoży się na lepszy odbiór, a potencjalnie także na większe zainteresowanie ofertą.

LCP, FID, CLS – co znaczą te skróty?

Zapoznając się z informacjami o CWV, można spotkać się z trzema niezwykle istotnymi skrótami: LCP, FID i CLS. To nazwy podstawowych wskaźników wchodzących w skład metryk Core Web Vitals, o których wspomnieliśmy nieco wcześniej. Warto jednak poświęcić trochę czasu, by przybliżyć dokładne znaczenie każdego z tych akronimów.

• LCP – „Largest Contentful Paint”, czyli „największe wyrenderowanie treści”. To sposób na określenie czasu ładowania strony z perspektywy użytkownika. Niektóre elementy mogą ładować się dłużej niż inne – z tego względu Google zwraca uwagę przede wszystkim na najistotniejszą część witryny, określaną właśnie jako LCP. W efekcie możliwe jest zmierzenie realnych odczuć dotyczących czasu wczytywania zamiast „sztywnego” pomiaru czasu od otrzymania zapytania do jego pełnej realizacji.
• FID – „First Input Delay”; „opóźnienie przy pierwszym działaniu”. To metryka, która mierzy opóźnienie pomiędzy akcją użytkownika a reakcją witryny. Wybór opcji z menu, kliknięcie linku, wpisanie adresu e-mail w formularzu: wszystkie z tych czynności są mierzone w celu wyznaczenia wartości FID. Co istotne, dla niektórych stron (m.in. blogów) wskaźnik ten będzie mieć niewielkie znaczenie, jednak w przypadku bardziej interaktywnych witryn jest on naprawdę kluczowy.
• CLS – „Cumulative Layout Shift”, co tłumaczymy jako „łączne przesunięcie układu”. W tym przypadku mowa o wizualnej stabilności strony, tj. sprawdzeniu przesunięć elementów witryny podczas ładowania. Jeśli jakakolwiek część strony znajdzie się w innym miejscu przed wczytaniem całości, prawdopodobnie oznacza to potrzebę wprowadzenia pewnych poprawek.

Każda z powyższych metryk ma również określone wartości dla stron dobrej jakości, wymagających poprawy oraz witryn słabej jakości:

• LCP – odpowiednio poniżej 2,5 s, pomiędzy 4 s oraz powyżej 4 s;
• FID – mniej niż 100 ms, mniej niż 300 ms i więcej niż 300 ms;
• CLS – do 0,1, do 0,25 oraz ponad 0,25.

Jak zadbać o odpowiednie wartości wskaźników CWV?

Wszystkie ze wskaźników CWV służą do nieco innych celów, by wspólnie umożliwić skuteczne zadbanie o doświadczenie użytkownika. W efekcie optymalizacja każdego z nich również będzie przebiegać w nieco inny sposób. Oto przydatne wskazówki, które pomogą osiągnąć wartości LCP, FID i CLS zgodne z wytycznymi Google.

Jak zmniejszyć wartość LCP?

1. Usuń niepotrzebne skrypty, które mogą spowalniać ładowanie strony.
2. Wybierz odpowiedni hosting pod kątem sprawnej obsługi wszystkich użytkowników.
3. Skompresuj i uprość kod CSS – choć są to tylko pliki tekstowe, złożony szablon również może znacznie wpłynąć na czas ładowania.
4. Skorzystaj z formatów graficznych, które umożliwiają bezstratną kompresję, np. PNG czy WebP.
5. Postaw na tzw. lazy loading– ładowanie grafik dopiero wtedy, gdy użytkownik przewinie stronę.

Zmniejszenie wartości FID

1. Zadbaj o wydajność skryptów JavaScript. JS to główne narzędzie do interakcji ze stroną – warto zatem zapewnić szybkie wykonanie kodu.
2. Skorzystaj z cache przeglądarki. Zapis danych w pamięci podręcznej pomoże w szybkim ładowaniu zawartości strony, a szczególnie w obsłudze interaktywnych elementów.
3. Usuń zbędne skrypty – podobnie jak w przypadku LCP, mogą one negatywnie wpłynąć na wartość FID.

Redukcja CLS w Core Web Vitals

1. Podczas dodawania nowych elementów interfejsu umieść je poniżej istniejącej zawartości (tzw. below the fold). W ten sposób użytkownicy będą mieć pewność co do lokalizacji różnych części układu strony.
2. Jeśli na Twojej stronie znajdują się reklamy, pamiętaj o tym, by przygotować dla nich odpowiednie, określone i stałe miejsce.
3. Również w tym przypadku warto sprawdzić skrypty na stronie – niektóre z nich mogą na przykład służyć do ukrywania elementów HTML, które przed pełnym załadowaniem nadal będą widoczne.
4. W przypadku zamieszczania na witrynie zawartości graficznej, pamiętaj o precyzyjnym określeniu rozmiarów zdjęć, wideo i animacji.