Core Web Vitals to zestaw metryk wprowadzony przez Google w celu pomiaru jakości doświadczeń użytkownika na stronie internetowej. W ich skład wchodzą:

• Largest Contentful Paint (LCP) mierzy czas ładowania największego elementu na stronie — może nim być obraz, wideo czy też blok tekstu.
• First Input Delay (FID) ocenia, jaki jest czas reakcji strony na pierwszą interakcję użytkownika, na przykład kliknięcie. 
• Cumulative Layout Shift (CLS) weryfikuje stabilność layoutu strony, mierząc ile elementów na stronie „skacze” podczas ładowania.

Metryki te powstały, aby w prosty sposób móc umożliwić wyznaczenie słabo zoptymalizowanych stron. Google na podstawie swoich badań określił, że istnieje korelacja pomiędzy długim czasem LCP a ogólną słabą optymalizacją stron. Analogiczna korelacja występowała również w przypadku pozostałych CWV. Rozumienie i optymalizacja tych metryk może znacznie poprawić doświadczenie użytkowników na Twojej stronie, a co za tym idzie — mieć wpływ na to, jak performuje ona w wynikach wyszukiwania Google. 

Definicja i omówienie Largest Contentful Paint

Metryka Largest Contentful Paint (LCP) mierzy wydajność ładowania stron. Określa czas,  jaki jest potrzebny na wyświetlenie największego elementu pojawiającego się na pierwszym ekranie strony. Jak już wspominaliśmy, może być to obraz, film, blok tekstu lub inny element blokowy HTML.

Idealny czas LCP, według Google, to 2,5 sekundy lub mniej, a akceptowalny czas to 4 sekundy. Gorsze wyniki oznaczają, że strona jest słabo zoptymalizowana.

Element LCP określany jest dopiero po całkowitym wczytaniu strony. Proces wyboru elementu LCP dobrze obrazuje poniższa grafika, na której dopiero w ostatniej klatce na osi czasu określony jest właściwy element — grafika z osobami zakwalifikowanymi do debaty.

W tym momencie warto wspomnieć, że dane dotyczące czasu LCP (ale też pozostałych CWV) jakie widoczne są w narzędziach takich jak:

• PageSpeed Insights
• Google Search Console

Są to dane z CrUX (Chrome UX Report), a więc pochodzą bezpośrednio z przeglądarek użytkowników korzystających z naszej strony. Dlaczego jest to kluczowe? Dane pochodzące od użytkowników mogą znacznie różnić się od wyników pokazywanych w narzędziach testujących. To natomiast sprawia, że bardzo dobrym narzędziem do testowania czasu wczytywania oraz wyznaczania, który element na stronie jest elementem LCP, jest devTools w przeglądarce Chrome. Po przygotowaniu poprawnych ustawień w zakładce Performance możemy odtwarzać wczytywanie strony przez użytkowników.

Definicja i omówienie First input delay

First Input Delay (FID) to metryka, która mierzy interaktywność strony, określając czas, jaki upływa od momentu, gdy użytkownik pierwszy raz próbuje interakcji (np. kliknięcia), do momentu, gdy strona jest w stanie na tę interakcję odpowiedzieć.First Input Delay (FID) to metryka, która mierzy interaktywność strony, określając czas, jaki upływa od momentu, gdy użytkownik pierwszy raz próbuje interakcji (np. kliknięcia), do momentu, gdy strona jest w stanie na tę interakcję odpowiedzieć.

Optymalny czas FID, według Google, to mniej niż 100 milisekund, a akceptowalny to 300 milisekund. 

Czas FID najczęściej występuje pomiędzy załadowaniem i wyświetleniem pierwszych treści na stronie (FCP) a interaktywnością strony (TTI). Jeżeli w tym czasie użytkownik wykona jakąkolwiek interakcję ze stroną np. kliknięcie, będzie musiał poczekać na procesowanie odpowiedzi na to kliknięcie do czasu, aż główny wątek zakończy wczytywanie strony.

Google uznał jednak, że FID nie jest najlepszą metryką na problemy z przeciążonym głównym wątkiem i „lagiem” pomiędzy interakcją a rozpoczęciem odpowiedzi na tę interakcję, ponieważ dotyczy ona tylko problemów podczas wczytywania strony. W związku z tym powstała metryka Interaction to Next Paint (INP), która wejdzie w życie w marcu 2024 roku. INP będzie mierzył występowanie tego problemu (opóźnienie w rozpoczęciu odpowiedzi przez przeglądarkę) dla wszystkich interakcji podczas korzystania ze strony, a nie tylko tych występujących na etapie wczytywania strony.

Definicja i omówienie Cumulative layout shift

Cumulative Layout Shift (CLS) mierzy stabilność wizualną strony, rejestrując, jak wiele elementów na stronie się przesuwa podczas ładowania. Wynik CLS jest liczony od 0 do 1, gdzie 0 oznacza brak przesunięcia, a 1 oznacza znaczne przesunięcie.

Według Google, dobry wynik CLS to mniej niż 0,1, akceptowalny to mniej niż 0,25.

CLS odpowiada głównie na problem „uciekających” elementów klikalnych. Czyli przykładowo w sytuacji, gdy zamiast kliknąć pożądany przez nas produkt, przez przesunięcie klikamy coś całkowicie innego (niebieskim kolorem widzimy wszystkie przesunięcia, jakie są widoczne podczas wczytywania).  

Bez zagłębiania się we wzory, na ostateczny wynik CLS składa się pole powierzchni przesuwanego elementu oraz cały „ślad”, jaki zostawił podczas ruchu. Dobrze pokazują to poniższe grafiki.

Im większy element blokowy jest przesuwany, tym większy wynik CLS. Im większe przesunięcie elementu blokowego, tym większy wynik CLS. 

Ponownie warto zwrócić uwagę, na to, że dane dotyczące wyniku CLS pochodzą z CrUX, a więc mogą dotyczyć nie tylko przesunięć układu podczas wczytywania strony, ale też tych podczas jej użytkowania. Czyli po kliknięciu „Rozwiń” na stronie, treści, które się pojawią, również mogą być zliczone jako niestabilność wizualna. Wydarzy się to, jeżeli pojawienie się treści (czyli przesunięcie układu) nastąpi po czasie dłuższym niż 500 milisekund od interakcji użytkownika (kliknięcia „Rozwiń”).

Powinniśmy również uważać na narzędzia testujące, mierzące CLS, ponieważ pomiary dokonywane są w syntetycznym środowisku. Ponownie dobrym wyborem do testów będzie poprawnie skonfigurowany devTools.

Jak Core Web Vitals wpływa na pozycjonowanie stron?

Google, jako najpopularniejsza wyszukiwarka na świecie, dąży do tego, aby strony, do których odsyła były jak najlepszej jakości. Dzięki temu jakość doświadczenia użytkowników, jak i ich zadowolenie wzrastają. Dwie (a może trzy?) pieczenie na jednym ogniu. Core Web Vitals stało się integralną częścią „Page Experience” – jednego z czynników rankingowych Google i ma bezpośredni wpływ na pozycje stron.

Kryje się za tym również coś innego — strony, które są dobrze zoptymalizowane są znacznie prostsze w poprawnym odczytaniu przez crawlery Google i innych przeglądarek. To natomiast zmniejsza liczbę zasobów, jakie Google musi poświęcić na stronę podczas procesu jej weryfikacji. Optymalizacja czasu wczytywania, obciążenie głównego wątku procesora, czy też stabilność wizualna ekranu mają wpływ na nasze pozycje w sposób pośredni. Jeżeli zarządzamy serwisem, w którym jest kilkadziesiąt/kilkaset tysięcy lub też kilka milionów podstron, które odwiedzają roboty Google, to skrócenie czasu wczytywania 0,1 s dla miliona podstron daje nam potencjalnie ~28h oszczędności pracy crawlera, w sytuacji, gdy każdą z podstron chcielibyśmy odwiedzić tylko jeden raz. Czyli realnie CWV ma ogromne znaczenie dla średnich i dużych serwisów borykających się z problemem niskiego Crawl budget’u (lub innych problemów związanych z indeksacją serwisu). 

Czy Core Web Vitals wpływa na konwersje na stronie?

Poprawa Core Web Vitals ma również bezpośredni wpływ na konwersje na stronie. Jakość doświadczenia użytkownika na stronie jest kluczowym czynnikiem wpływającym na decyzję o podjęciu określonej akcji, takiej jak zakup produktu, zapisanie się do newslettera czy też wypełnienie formularza kontaktowego.

• LCP wpływa na pierwsze wrażenie użytkownika na stronie. Strony, które ładują się szybko, mają większą szansę na zatrzymanie użytkowników, którzy potencjalnie mogą zostać klientami.
• FID jest kluczowy dla responsywności strony. Strony, które szybko reagują na interakcje, zmniejszają ryzyko utraty klienta, co z kolei może prowadzić do wyższej konwersji.
• CLS wpływa na odczucia użytkowników w kontekście stabilności strony. Strony, które są stabilne i nie skaczą podczas ładowania, są mniej frustrujące dla użytkowników.

Poprawa czasu wczytywania (LCP) może sprawić, że większa liczba użytkowników doczeka pełnego wczytania strony i będzie miała szansę na dotarcie do naszego produktu. Według badań Google, jeżeli czas wczytywania strony na urządzeniach mobilnych wynosi 3 sekundy, to więcej niż połowa użytkowników porzuci wczytywanie strony. Poprawa interaktywności (FID, CLS) zwiększy zadowolenie klienta z korzystania ze strony, a więc ponownie przełoży się na wyższy współczynnik konwersji. 

Jak Core Web Vitals wpływają na Bounce Rate?

Wskaźnik odrzuceń, znany również jako Bounce Rate, to procent odwiedzin jednej strony, po których użytkownik opuszcza witrynę bez przeglądania innych stron. Wysoki wskaźnik odrzuceń może wskazywać na problemy z doświadczeniem użytkownika, a tu właśnie pojawiają się Core Web Vitals.

LCP, FID i CLS są bezpośrednio związane z jakością doświadczenia użytkownika. Jeżeli strona ładuje się powoli (wysoki LCP), nie reaguje na interakcje (wysoki FID) lub jej elementy przesuwają się podczas ładowania (wysoki CLS), użytkownicy mogą szybko opuścić stronę, co doprowadzi do zwiększenia wskaźnika odrzuceń i zmniejszenia współczynnika konwersji. Optymalizacja Core Web Vitals może poprawić wrażenie użytkownika z korzystania ze strony, a więc pomóc w zmniejszeniu współczynnika odrzuceń.

Jak reklamy mogą wpływać na CWV?

Reklamy Google osadzone w serwisie są często kluczowym źródłem dochodów dla wielu stron internetowych, ale mogą również negatywnie wpływać na wartość CLS (Cumulative Layout Shift). Reklamy, zwłaszcza te dynamiczne lub te, które nie mają zdefiniowanego miejsca na stronie, mogą powodować przesunięcia w układzie strony.

Z punktu widzenia UX i SEO, istotne jest, aby reklamy były właściwie optymalizowane, aby minimalizować ich wpływ na CLS. Optymalizacja może obejmować takie działania jak zarezerwowanie przybliżonej przestrzeni dla reklam, które mają największą szansę na pojawienie się w określonym miejscu. Pomoże też używanie formatów reklamowych, które są mniej inwazyjne dla układu strony.

Kto powinien optymalizować Core Web Vitals na stronie?

W kontekście SEO optymalizacja Core Web Vitals na stronie powinna być priorytetem przede wszystkim dla średnich i dużych serwisów. Będą to serwisy takie jak portale informacyjne, contentowe, czy sklepy internetowe. Czyli wszystkie serwisy posiadające i regularnie publikujące dużą liczbę podstron.  

Jeżeli jednak spojrzymy na konwersję lub dobre postrzeganie naszego brandu, to dojdziemy do wniosku, że każda strona internetowa powinna zadbać o swoich użytkowników i ich Page Experience, a więc każda strona powinna zadbać o dobre wyniki CWV.

Narzędzia do mierzenia Core Web Vitals

Zrozumienie i monitorowanie Core Web Vitals jest kluczowe dla każdej strony internetowej. Istnieje wiele narzędzi, które mogą pomóc w mierzeniu i analizie tych metryk. Spośród nich, wyróżnić można:

• Google PageSpeed Insights
• Google Search Console
• Chrome UX Report
• Lighthouse
• Chrom DevTools
• WebPageTest.

Do testów można zdecydowanie wyróżnić ostatnie dwa (DevTools oraz WebPageTest), ponieważ to one pozwalają na bardzo dokładne odwzorowanie warunków, w jakich korzystają z naszej witryny użytkownicy i pomiary CLS oraz LCP. 

W celu testowania FID zalecane jest skorzystanie ze skryptu w języku JavaScript, który można znaleźć na stronie https://web.dev/fid/#measure-fid-in-javascript.

Do dokładnej weryfikacji danych laboratoryjnych z danymi użytkowników korzystających z serwisu, powinniśmy skorzystać z danych właśnie od użytkowników, czyli z raportu CrUX lub też, z Search Console (Raport Core Web Vitals).

Podsumowanie

Realnie metryki CWV mają za zadanie w jak najprostszy sposób namierzać strony, słabo zoptymalizowane, długo wczytujące się i niestabilne. Strony, z których korzystanie pozostawia po sobie złe wrażenie. Optymalizacja tych metryk ma istotne znaczenie dla doświadczenia użytkownika, wpływa na ranking SEO i konwersje na stronie.

W przyszłości Core Web Vitals będzie prawdopodobnie ewoluować (tak jak dzieje się to już z FID i INP), dostarczać kolejnych metryk — które w lepszy sposób będą mierzyć doświadczenie użytkowników. W związku z tym optymalizacja szybkości i użyteczności strony dalej powinna odgrywać ważną rolę w procesach pozycjonowania i zwiększania konwersji. 

Piotr Smargol

Lubi nowe wyzwania i nie boi się zmian. Pracę w branży SEO zaczął w 2018 roku, a obecnie zajmuje stanowisko Head of SEO w Efectowni. Prywatnie miłośnik aktywnego spędzania wolnego czasu, w pracy — z lenistwa automatyzuje, co może. Specjalizuje się w technicznym SEO i analizie danych.