Core Web Vitals: czym są i jak je ulepszyć?

LCP mierzy czas, jaki upływa od rozpoczęcia ładowania strony do momentu, w którym największy element treści jest w pełni wyrenderowany na ekranie. Ten „największy element” może przybierać różne formy jak grafika rastrowa, materiał wideo, duży blok tekstu itp.

LCP koncentruje się na obszarze viewport, czyli widocznej części strony w oknie przeglądarki. Największe wyrenderowanie treści uwzględnia elementy above the fold, czyli takie, które są widoczne bez konieczności przewijania strony. Do pomiarów LCP wlicza się widoczny rozmiar elementu, pomijając takie czynniki jak marginesy, wypełnienia czy obramowania zastosowane przez CSS. Według Google Largest Contentful Paint nie powinien być dłuższy niż 2,5 sekundy:
 

FID mierzy czas od pierwszej interakcji użytkownika ze stroną (np. kliknięcie linku, użycie elementu sterującego) do chwili, w której przeglądarka jest w stanie zareagować na tę akcję. 

Opóźnienie przy pierwszym działaniu często ma miejsce, gdy główny wątek jest zajęty innym zadaniem, np. przetwarza ciężkie pliki JavaScript. W takim przypadku bieżące zadanie musi zostać zakończone, zanim przeglądarka będzie mogła zareagować na interakcję użytkownika. Google zaleca, aby wartość tego elementu Core Web Vitals nie przekraczała 100 milisekund:

CLS ocenia, jak bardzo i jak często zawartość strony „przeskakuje” podczas jej ładowania. Chodzi o nieoczekiwane zmiany układu (czyli niezainicjowane przez użytkownika), które mogą dezorientować odwiedzającego, na przykład, gdy element, który chce kliknąć, nagle zmienia swoje położenie lub rozmiar. 

Aby zmierzyć ten rodzaj podstawowego wskaźnika internetowego, Google analizuje największe serie (burst) zmian układu na stronie. Przeglądarka definiuje serię jako grupę zmian układu, które mają miejsce w ciągu jednej sekundy i trwają do maksymalnie pięciu sekund. 

Wartość CLS jest obliczana za pomocą wzoru:
 

• Ułamek wpływu – suma obszarów wszystkich niestabilnych elementów z poprzedniej i bieżącej klatki wyrażona jako procent całkowitej powierzchni widocznego obszaru. Jeśli przykładowo element zajmuje połowę widocznego obszaru w jednej klatce, a następnie przesuwa się, zajmując dodatkowe 25% wysokości widocznego obszaru w następnej klatce, jego udział w obszarze wpływu wynosi 75% (0,75),
• ułamek odległości – jest to maksymalna odległość, o jaką niestabilny element przesuwa się w klatce, wyrażona jako procent największego wymiaru widocznego obszaru. Jeśli przykładowo największy wymiar widocznego obszaru to wysokość i niestabilny element przesuwa się o 25% tej wysokości, ułamek odległości wynosi 25% (0,25).

Mając na uwadze powyższy sposób pomiaru, Google zaleca, aby wartość tej metryki Core Web Vitals nie przekraczała 0,1:

GSC korzysta z danych CrUX (Chrome User Experience Report), które są zbierane od rzeczywistych użytkowników przeglądarki Chrome. Te dane terenowe odzwierciedlają realne doświadczenia użytkowników, uwzględniając np. różnorodne urządzenia.

Google Search Console umożliwia analizę danych na poziomie poszczególnych stron. W GSC możesz zobaczyć, ile adresów URL spełnia kryteria dla każdego ze wskaźników Core Web Vitals. Dane te są zbierane z CrUX, a jeśli dla konkretnej strony jest ich za mało, Google może korzystać z danych z grupy podobnych podstron lub z całej domeny.

Raport „Podstawowe wskaźniki internetowe” zawiera wykresy dla urządzeń mobilnych i komputerów

Google PageSpeed Insights to zaawansowane narzędzie służące do analizowania wydajności stron internetowych:

Po wprowadzeniu adresu URL strony, PSI pobiera dane terenowe z Chrome User Experience Report (CrUX). Te dane odzwierciedlają rzeczywiste doświadczenia użytkowników.

Oprócz tego raport przedstawia ogólną ocenę stanu strony pod kątem wydajności, dostępności, najlepszych praktyk i SEO. Dostarcza także wskazówki, jakie elementy i w jaki sposób poprawić.

Wyniki Core Web Vitals można analizować za pomocą bardziej złożonego narzędzia, jakim jest Google Lighthouse. Jest dostępne jako rozszerzenie do Google Chrome albo jako część pakietu Chrome DevTools.

Lighthouse korzysta z danych laboratoryjnych (lab data). Oznacza to, że są generowane poprzez symulowanie ładowania i interakcji ze stroną w kontrolowanym środowisku testowym. Warunki, takie jak prędkość połączenia internetowego, rodzaj urządzenia czy przeglądarka, są ustandaryzowane.

Główną zaletą danych laboratoryjnych jest ich spójność i powtarzalność. Umożliwiają dokładne porównanie wydajności różnych stron internetowych, ponieważ każda jest testowana w tych samych warunkach.

Oprócz tego pozwalają przeprowadzać testy. Optymalizacja Core Web Vitals często będzie wymagała zidentyfikowania różnych problemów oraz powiązań między nimi. Przed wprowadzeniem zmian na główną stronę dane laboratoryjne mogą być użyte do testowania wpływu modyfikacji na wydajność. Dodatkowo developerzy są w stanie symulować konkretne scenariusze jak szybkość ładowania strony na urządzeniach o słabszych parametrach.

W pierwszej kolejności zadbaj o solidny fundament w postaci hostingu. Wybierz serwer, który oferuje szybkie czasy odpowiedzi i dobre parametry wydajnościowe. Wszystko to pomoże w załadowywaniu strony.

Jeśli na Twoją witrynę wchodzą użytkownicy z całego świata, dobrym wyjściem będzie zastosowanie sieci dostarczania zawartości (CDN – content delivery network).  Dzięki takiemu rozwiązaniu kopie zasobów są przechowywane na rozproszonych geograficznie serwerach. W rezultacie treści są szybko załadowywane, nawet jeśli odwiedzający znajduje się daleko od głównego serwera.

Oprócz tego dokonaj optymalizacji zawartości witryny. Elementy takie jak obrazy, filmy i duże bloki tekstu widoczne above the fold (czyli bez przewijania) mają znaczący wpływ na LCP. Przykładowo za pomocą różnych narzędzi da się z powodzeniem zmniejszyć rozmiar zdjęć nawet kilkukrotnie z zachowaniem tej samej jakości.

W przypadku innych treści rozważ zastosowanie lazy loadingu. Dzięki niemu zasoby, które nie są widoczne od razu po wejściu na stronę, zostaną załadowane z opóźnieniem.

Z ideą lazy loadingu jest także powiązana optymalizacja kodu JavaScript. Dobrym pomysłem może być opóźnienie ładowania skryptów, które nie są istotne dla początkowych momentów wizyty.

Optymalizacja tego wskaźnika Core Web Vitals wymaga jeszcze większego skupienia się na kwestiach związanych z kodem strony.

Poprawa kodu JavaScript:

• zredukuj ilość kodu JavaScript wysyłanego do użytkownika, przesyłając tylko ten, który jest niezbędny,
• przeanalizuj i usuń nieużywany kod JavaScript,
• dokonaj kompresji kodu, aby zmniejszyć jego rozmiar,
• rozłóż większe zadania JavaScript na mniejsze fragmenty, aby nie blokowały głównego wątku zbyt długo,
• wprowadź dynamiczne ładowanie niektórych skryptów JavaScript w zależności od interakcji użytkownika. Przykładowo, kod obsługujący określone funkcje zostanie załadowany tylko wtedy, gdy odwiedzający przewinie wystarczająco głęboko w dół,
• przejrzyj i zoptymalizuj zależności zewnętrzne, takie jak biblioteki i frameworki. W niektórych przypadkach użycie lżejszych alternatyw lub redukcja zależności przyczyni się do szybszego ładowania skryptów,
• przenieś obciążenie z głównego wątku za pomocą web workerów. Z ich pomocą można wykonywać skrypty JavaScript w tle w oddzielnych wątkach, dzięki czemu strona jest w stanie szybciej reagować na akcje użytkownika.

Optymalizacja trzeciej metryki Core Web Vitals skupia się na kwestiach związanych z rozmiarami materiałów multimedialnych, rodzajami czcionek oraz zarządzaniem treściami dynamicznymi i podręcznymi.

Obrazy i filmy:

• zawsze podawaj wymiary (szerokość i wysokość) dla obrazów i filmów. Pozwala to przeglądarce zarezerwować odpowiednią przestrzeń na te elementy przed ich całkowitym załadowaniem, zapobiegając przesunięciom.
     

Czcionki:

• FOIT (Flash of Invisible Text) to zjawisko, w przypadku którego serwer nie powiadamia przeglądarki o rodzaju zastosowanej czcionki. W rezultacie tekst jest niewidzialny. Gdy się w końcu załaduje, dochodzi do szybkiego przesunięcia,
• FOUT (Flash of Unstyled Text) przebiega podobnie, ale sam tekst jest załadowywany. Nie korzysta jednak z właściwej czcionki. Gdy zostanie załadowana, także dochodzi do zauważalnego przesunięcia zawartości,
• aby zaradzić tym zjawiskom, wykorzystaj atrybut rel="preload". Wskaże on przeglądarce, które czcionki powinny być wcześniej załadowane. Istnieją też specjalne rozszerzenia, które ułatwiają zarządzanie tym procesem.

Treści dynamiczne i podręczne:

• w przypadku dynamicznie ładowanych obrazów rozważ użycie techniki aspect ratio boxes, aby zachować proporcje elementów nawet przed ich załadowaniem, 
• nie używaj animacji, które wymuszają zmianę wyglądu układu,
• Postaraj się, by strony były kompatybilne z bfcache (back/forward cache). Bfcache przechowuje kompletny stan strony w pamięci po opuszczeniu jej przez użytkownika, co pozwala na błyskawiczne wczytanie zawartości, gdy odwiedzający powraca do niej za pomocą przycisków Wstecz lub Dalej w przeglądarce.