Core Web Vitals: co to jest i jak poprawić te czynniki

Zastanawiasz się, jak działa Twoja strona internetowa? Poprawnie czy coś wymaga poprawy? Odpowiedzi na te pytania dostarczą Ci wskaźniki Core Web Vitals. Co to jest, na co wskazują i jak je poprawić? Sprawdź, by Twoi odwiedzający doświadczyli jak najlepszego kontaktu z witryną.

Co to jest Core Web Vitals

Core Web Vitals to wskaźniki Google i czynnik rankingowy. Określają one jakość doświadczenia użytkownika ze stroną WWW. Dotyczą one czasu ładowania serwisu, jego interaktywności i stabilności wizualnej. To odpowiednio:

• LCP (Largest Contentful Paint), czyli największe wyrenderowanie treści,
• INP (Interaction to Next Paint), czyli interakcja z następnym renderowaniem,
• CLS (Cumulative Layout Shift), czyli skumulowane przesunięcie układu.

LCP (Largest Contentful Paint)

Największe wyrenderowanie treści określa prędkość wczytywania strony internetowej. Pokazuje, ile czasu potrzeba, aby załadował się największy, pojedynczy element witryny w sekcji above the fold, czyli części serwisu widocznej zaraz po otwarciu, bez przewijania w dół. Może to być tekst lub materiał wizualny (jak grafika, wideo).

Google wskazuje, że strona WWW przyjazna użytkownikom to taka, której LCP wynosi do 2,5 sekundy.

INP (Interaction to Next Paint)

Wskaźnik Interakcja z następnym renderowanie mierzy, jak szybko strona reaguje na wszystkie polecenia odwiedzającego. Obejmują one klikanie myszą, dotknięcie urządzenia z ekranem dotykowym, naciśnięcie klawisza na klawiaturze fizycznej lub ekranowej.

W marcu 2024 roku INP zastąpiło poprzednio obowiązujący wskaźnik FID (First Input Delay). Określał on czas reakcji strony WWW jedynie na pierwsze polecenie użytkownika.

INP strony powinno wynosić do 200 milisekund.

CLS (Cumulative Layout Shift)

Skumulowane przesunięcie układu określa wizualną stabilność strony podczas jej ładowania. Wskazuje, jak bardzo zmienia się układ strony niewynikający z działań odwiedzającego, powodujące niekontrolowane przesunięcia się różnych elementów, np. przycisków.

CLS mierzy 5 sekund.

Wskaźnik ten powinien wynosić do 0,1.

Jak i gdzie mierzyć Core Web Vitals

Istnieje wiele narzędzi, z pomocą których poznasz wartość wskaźników CWV dla swojej strony WWW. Poniżej znajdziesz najpopularniejsze z nich.

Google Search Console

Tutaj wartości wskaźników CWV znajdziesz w części „Eksperymenty i personalizacja” w „Podstawowe wskaźniki internetowe”.

Google Search Console dostarcza informacje w postaci wykresów, osobno dla urządzeń mobilnych i desktopowych.

PageSpeed Insights

Drugie darmowe narzędzie od Google’a to PageSpeed Insights.

Wystarczy, że podasz w okienku adres URL Twojej strony WWW lub konkretnej podstrony i klikniesz „Analizuj”.

Narzędzie przekaże Ci różne informacje:

W raporcie znajdziesz szczegółowe informacje o wydajności strony:

• First Contentful Paint (pierwsze wyrenderowanie treści oznacza czas wyrenderowania pierwszego tekstu lub obrazu);
• Speed Index (indeks szybkości wskazuje, jak szybko strona zapełnia się widocznymi treściami);
• Largest Contentful Paint (wyrenderowanie największej części treści oznacza czas wyrenderowania największego tekstu lub obrazu);
• Total Blocking Time (wyrażony w milisekundach suma wszystkich okresów między pierwszym wyrenderowaniem treści a czasem do pełnej interaktywności, gdy długość zadania przekroczyła 50 ms);
• Cumulative Layout Shift (zbiorcze przesunięcie układu to miara ruchu elementów w widocznym obszarze)

W dalszej części analizy wydajności serwisu znajdziesz:

• dane z diagnostyki, które wskażą Ci, jakie obszary wymagają poprawy, powinny zostać poprawione lub mogłyby być ulepszone;
• zaliczone audyty, czyli aspekty, które prezentują się bardzo dobrze.

Wtyczka Web Vitals

Jeśli zależy Ci na szybkim i prostym wglądzie w dane o ładowaniu, interaktywności i stabilności strony, pomyśl o zainstalowaniu wtyczki Web Vitals.

Podaje ona wartości najważniejszych wskaźników.

Jak poprawić Core Web Vitals

Raporty o doświadczeniu użytkownika z Twoją stroną internetową wskazują, że coś wymaga poprawy? Oto wskazówki, jak możesz to polepszyć UX swojej witryny.

Jak poprawić LCP

1. Zadbaj o hosting: sprawdź, jak prezentuje się wydajność serwera, który obsługuje Twoją stronę WWW. To od niego w dużej mierze zależy wydajność Twojej witryny. W razie potrzeby wybierz lepszy pakiet lub zmień rodzaj hostingu, np. ze współdzielonego na dedykowany lub w chmurze.
2. Unikaj dużych plików w sekcji above the fold: gdy w górnej części strony znajdują się „ciężkie” pliki, np. zdjęcia, usuń je stamtąd. Jeśli chcesz, aby pozostały w tym miejscu, zmniejsz ich rozmiar.

Jak poprawić CLS

1. Dodawaj atrybuty rozmiaru (szerokość: width, i wysokość: hight) materiałom wizualnym (grafiki, zdjęcia, wideo). Dzięki temu przeglądarka zarezerwuje miejsce dla tego contentu w trakcie ładowania się strony. W ten sposób unikniesz przeskakiwania zawartości witryny.
2. Zarezerwuj miejsce dla reklam: należą do treści wczytywanych z opóźnieniem, stąd mogą pojawiać się przez nie przeskoki strony. Aby tego uniknąć, zarezerwuj konkretnej wielkości miejsce dla reklam. A jeśli nie znasz ich rozmiaru, bo ktoś Ci je dostarcza, ustal minimalną wielkość lub prawdopodobny rozmiar na podstawie wcześniejszych reklam.

Jak poprawić INP

1. Zoptymalizuj JavaScript: sprawdź poprawność kodu i zaktualizuj go. Gdy jest go zbyt wiele i spowalnia on działanie strony – usuń zbędne fragmenty.
2. Skompresuj obrazy: duże rozmiary plików graficznych mogą spowalniać działanie strony, dlatego aby temu zapobiec, zredukuj ich wielkość (jednocześnie pamiętając o tym, by zadbać o ich dobrą jakość). Dobrą opcją jest korzystanie z formatu WebP.
3. Korzystaj z serwerów CDN: czyli Content Delivery Network to rozproszone serwery, które zapewnią Ci szybsze dostarczanie treści do swoich odbiorców na całym świecie.

Core Web Vitals a SEO

Core Web Vitals to jeden z 200 czynników rankingowych Google. To znaczy, że wpływa on na pozycjonowanie strony WWW. I choć – jak wskazuje John Müller – nie są one jednymi z najważniejszych aspektów, to mimo to dobrze jest zadbać, aby wskaźniki te miały dobre wartości. Dlaczego? Bo tego oczekuje Twój odbiorca.

Oczekuje on, że strona WWW, którą odwiedza, będzie działać sprawnie i szybko. Chętniej będzie odwiedzać serwisy, które mają krótki czas ładowania, prędko reagują na jego polecenia i na których nie występują niespodziewane przesunięcia czy przeskoki contentu.

To z kolei wiąże się z szansą na częstsze odwiedziny i niższy współczynnik odrzuceń (sytuacji, kiedy odwiedzający wchodzi na stronę i bez żadnego działania, np. kliknięcia linku, zamyka stronę). A pamiętaj, że zachowanie odwiedzającego Twoją witrynę również ma znaczenie dla Google’a. Jeśli szybko będzie on rezygnować z odwiedzin, nie będzie to dobrze postrzegane.