Core Web Vitals: LCP, FID, CLS – dlaczego te metryki są istotne?

Techniki tworzenia serwisów internetowych i aplikacji webowych są wciąż nowe i coraz bardziej cieszą oko. Ważne jest jednak, aby w parze z atrakcyjnością szła również wydajność.
Jeśli przy tworzeniu strony internetowej zaciągniemy tzw. dług technologiczny, który w perspektywie wpłynie na jakość korzystania z serwisu, to efekt nie będzie korzystny ani dla użytkownika końcowego ani dla robotów indeksujących, które odwiedzają i weryfikują strony.

Autorem tekstu jest Kacper Grębski, Padawan Searcher’s Experience Optimization w Idea Hills. Rozwija się w pozycjonowaniu i optymalizowaniu serwisów internetowych pod kątem użyteczności i wydajności. Prywatnie gra na skrzypcach, gitarze basowej i tańczy Popping.

Strony powinny być wydajne, dostępne i wygodne w odbiorze – do takich wniosków doszedł Google, czego wynikiem były zaprezentowane w 2020 roku podstawowe wskaźniki internetowe Core Web Vitals.

Wdrożenie algorytmu Page Experience i związanych z nim metryk zostało przesunięte z maja na czerwiec 2021. Przedstawiciele po stronie Google przy okazji oficjalnej informacji o zmianie terminu, poinformowali również o tym, w jaki sposób metryki Core Web Vitals będą zyskiwać na znaczeniu w czasie.

Przyjrzyjmy się więc, czym dokładniej są podstawowe wskaźniki internetowe Core Web Vitals, jak możemy sprawdzać te wartości i jakie zmiany wprowadzić, aby poprawić wyniki.

Czym są metryki Core Web Vitals?

Core Web Vitals to podstawowe wskaźniki internetowe, które określają w formie ilościowej kluczowe aspekty użytkowania strony z punktu widzenia doświadczeń użytkownika (UX).

Na metryki Core Web Vitals składa się prędkość wczytywania, interaktywność i stopień przesunięć ładowanej treści.

Od czerwca 2021 roku te metryki będą zyskującym na znaczeniu czynnikiem rankingowym wpływającym na pozycję stron internetowych w wyszukiwarce. 
Chociaż Google zapowiada, że wartość merytoryczna stron wciąż będzie najważniejsza, a ogół zmian związanych z Core Web Vitals to raczej proces niż drastyczny, jednorazowy zabieg, warto przygotować się najlepiej już na początku.

Elementy składowe Core Web Vitals

Wyróżniamy trzy podstawowe spośród wszystkich metryk: First Input Delay, Largest Contentful Paint oraz Cumulative Layout Shift, przy czym First Input Delay jest wypadkową kilku z nich.

Largest Contentful Paint (LCP)

Largest Contentful Paint to czas ładowania największego elementu na stronie.

Ze względu na budowę stron, najczęściej jest to grafika główna, ale zdarza się również, że LCP to tło, wideo, cały kontener a nawet nagłówek, czy też paragraf treści.  

Wynik LCP jest podawany w sekundach i powinien wynosić od 0 do maksymalnie 2,5 sekundy. Czas ładowania LCP pomiędzy 2,5 a 4 sekund wymaga poprawy, powyżej 4 sekund jest rozumiany jako zły.

First Input Delay (FID)

First Input Delay to czas, jaki potrzebuje strona, aby umożliwić użytkownikowi interakcję w postaci kliknięcia poszczególnego elementu, rozwinięcia menu, czy scrollowania.

Wynik FID jest podawany w milisekundach. Optymalny FID wynosi poniżej 100 milisekund, wymagający poprawy pomiędzy 100 a 300ms, powyżej 300ms jest uznawany za zły. 

Cumulative Layout Shift (CLS)

Cumulative Layout Shift to poziom niestabilności elementów, czyli suma ich przesunięć na stronie. W CLS brane są pod uwagę jedynie te z elementów, które przesunęły się bez wcześniejszej interakcji użytkownika. Na wynik CLS składają się dwa, przemnożone przez siebie czynniki:

Impact Fraction * Distance Fraction = Cumulative Layout Shift

Całkowite przesunięcie powinno mieć wartość poniżej 0,1, wynik do 0,25 wymaga poprawy, ponad 0,25 jest uważany za zły.

Impact Fraction CLS  

Określa, jak bardzo przesunięcie danego elementu miało wpływ na całość widocznego obszaru strony. Jeżeli przykładowo doładowująca się grafika, która pierwotnie zajmowała 50% ekranu, przesunie się o 25% wielkości ekranu, to finalnie przesunięcie będzie dotyczyło 75% wielkości ekranu, czyli wartość impact fraction wyniesie 0,75.

Distance Fraction CLS

To odległość, jaką pokonał dany element podczas przesunięcia. Jeśli odległość wyniesie 25% viewportu, distance fraction będzie wynosić 0,25.

Jak są mierzone metryki Core Web Vitals? 

Sprawdzając dowolną stronę z wykorzystaniem Pagespeed insight można zauważyć, że poza samym wynikiem Google udostępnia informację na temat tego, w jaki sposób są mierzone poszczególne elementy wydajności strony – za pomocą ogólnodostępnego kalkulatora.
Możemy sprawdzić, jak poprawienie poszczególnych elementów może wpłynąć na ogólny wynik strony.
Warto w tym miejscu zwrócić uwagę na różnicę pomiędzy wynikami rzeczywistymi i laboratoryjnymi. Te drugie są spekulacją nie podpartą wystarczającą ilością danych od użytkowników, więc często dane laboratoryjne są nieprecyzyjne, mogą dać jedynie sugestie związane z wydajnością.

Aktualny Lighthouse działa w wersji 6 i w tej wersji wartości procentowe poszczególnych elementów uległy zmianie ze względu na zapowiedzianą aktualizację związaną z Core Web Vitals. Warto jednak zaznaczyć, że nawet jeśli przykładowo Cumulative Layout Shift (CLS) stanowi jedynie 5% ogólnego wyniku a będzie jednocześnie poniżej wartości uznanej przez Google za minimalną, w efekcie cały adres url zostanie oceniony jako niespełniający podstawowych wymagań.

Czy Core Web Vitals to jedyne metryki, według których Google ocenia strony internetowe pod kątem UX ? 

Odpowiedź brzmi „nie”. Do całościowej oceny serwisu Google używa również dodatkowych informacji takich jak:

• przyjazność urządzeniom mobilnym, 
• bezpieczeństwo przeglądania witryny, danych użytkowników i stosowanie szyfrowania protokołu HTTP, 
• Brak uciążliwych reklam pełnoekranowych.

Ponadto, w samych narzędziach do testowania wydajności strony widzimy, że wartości LCP, FID i CLS nie są jedynymi prezentowanymi wynikami.

To oznacza, że nawet z wyśrubowanymi wynikami Core Web Vitals nie mamy gwarancji na wysoką pozycję w wynikach wyszukiwania. Warto o serwis zadbać całościowo. W końcu, jak zawsze zaznaczają inżynierowie Google, liczy się przede wszystkim użytkownik i jakość oraz unikalność prezentowanej treści.

Jak sprawdzić wydajność strony i wyniki pod kątem Core Web Vitals?

Do wyboru mamy kilka narzędzi, dzięki którym możemy zbadać w jakiej kondycji jest nasz serwis. Narzędzia te mają wiele punktów wspólnych, a część z nich daje nam znacznie więcej przydatnych informacji. Ponadto, poza samym wynikiem, dostajemy też rekomendacje dotyczące poprawek, a jeśli strona jest oparta na WordPressie, to nawet propozycję wtyczek, które pomogą nam poprawić niektóre elementy.

Jak poprawić wydajność strony pod kątem wskaźników Core Web Vitals? 

Jeśli spojrzymy w kilka różnych raportów stworzonych z wykorzystaniem dedykowanych narzędzi lub komponentów, zobaczymy, że jest wiele standardowych punktów wspólnych, na które warto zwrócić uwagę przy optymalizacji pod kątem Core Web Vitals.
Plus podejmowania działań jest taki, że odpowiadając na zalecenia związane z CWV, wpłyniemy w wielu przypadkach na wiele elementów równocześnie.
Minus jest taki, że nie zawsze wpłyniemy na wszystkie korzystnie, na przykład decydując, w jakiej kolejności mają doładowywać się poszczególne elementy strony, możemy część przyśpieszyć kosztem innych.

Odpowiedź serwera 

Zanim zabierzemy się za optymalizację poszczególnych elementów, sprawdźmy czas odpowiedzi serwera. Jeśli serwer potrzebuje dużo czasu, aby odpowiedzieć na zapytanie przeglądarki, naturalnie wpłynie to na ogólną wydajność strony i Core Web Vitals – szczególnie LCP. 

Czas odpowiedzi możemy sprawdzić na przykład za pomocą Byte Check lub w konsoli deweloperskiej w zakładce network. 

Na prędkość serwera wpływ może mieć sama jakość i parametry usługi, którą otrzymujemy od hostingodawcy, ale też takie elementy, jak rodzaj protokołu, z którego korzystamy, ilość startowych przekierowań, wersja PHP i architektura. 

Formaty zdjęć nowej generacji

Efektem tych zmian jest znaczne zmniejszenie wielkości plików przy możliwie najmniejszej utracie ich jakości. Dzięki temu zabiegowi możemy znacznie przyspieszyć proces doładowywania się grafik na stronie. Nowe formaty to JPEG XR, JPEG 2000 i WebP.

Jeśli korzystamy z WordPressa, możemy wykorzystać do masowej zmiany formatów zdjęć i grafik wtyczkę taką jak WebP Express – rozwiązuje problem dodania zdjęć w formacie WebP bezpośrednio do biblioteki mediów z poziomu CMS-a.

Alternatywnie, lub w sytuacji kiedy strona nie jest oparta o WordPress, możemy wykorzystać jedno z narzędzi udostępnianych przez WebP Team. 

Wartości height i width 

To po prostu zarezerwowanie konkretnej przestrzeni dla elementów o konkretnej wielkości. Dzięki temu, nawet w sytuacji, kiedy baner reklamowy, lub zdjęcie nie załadowało się, jest dla tego elementu przygotowane odpowiednie miejsce. Kiedy już dany element się załaduje, nie spowoduje to przesunięcia elementów sąsiadujacych, czyli w efekcie nie wpłynie negatywnie na Cumulative Layout Shift.

Zasoby blokujące renderowanie i krytyczny JS / CSS

Jeśli dany element na naszej stronie jest potrzebny do jej działania a jednocześnie jego załadowanie jest możliwe dopiero na późniejszym etapie wczytywania strony, to w naturalny sposób cały proces opóźni się.

Patrząc w drugą stronę, element, który nie jest konieczny w pierwszej kolejności, może zaczekać z doładowaniem, lub załadować się dopiero na końcu.

Odpowiednie ustalenie reguł ładowania: opóźnionego, priorytetowego, asynchronicznego, lub odłożonego i zawarcie krytycznych linii kodu w <head> strony może w znacznym stopniu poprawić jej wydajność. 

Dynamiczne media queries 

Czyli filtrowanie i w efekcie obliczanie tylko tych z reguł CSS-a, które są potrzebne dla danego urządzenia.

Pre-ładowanie czcionek i optymalne formaty

Doładowanie właściwej dla strony czcionki powoduje czasem, że ogólna wielkości tekstu zmienia się, ponieważ wielkości poszczególnych czcionek różnią się od siebie.

Aby rozwiązać ten problem, możemy skorzystać z kilku rozwiązań takich jak:

• załadowanie czcionki podstawowej przy pierwszym buforowaniu strony,
• szybkie załadowanie czcionki i zastąpienie jej właściwą, kiedy zostanie doładowana,
• przetestowanie ładowania przy użyciu w tekście kursywy i pogrubień: czasem, kiedy w całej treści mamy jedno pogrubione słowo, potrzebne może być pobranie pogrubionej wersji czcionki tylko dla tego słowa – można rozważyć zrezygnowanie z pogrubienia, lub z pobierania tej wersji (przeglądarki mogą tworzyć “zastępcze wersje” czcionki pogrubionej i kursywy).

Ograniczenie wpływu skryptów ze źródeł trzecich 

Doładowywanie elementów ze źródeł trzecich – widgetów, map, skryptów śledzących, może wpłynąć na ogólną prędkość ładowania, dlatego zawsze warto spróbować ograniczyć ilość kodu z innych stron a także spróbować ładować poszczególne z nich po załadowaniu całej strony, jeśli to możliwe. 

Podstawowe wskaźniki internetowe – Core Web Vitals – podsumowanie

Oczywiście to tylko niektóre sposoby optymalizacji pod kątem Core Web Vitals. Najlepiej każdy przypadek analizować osobno i testować poszczególne wprowadzone zmiany.

Rekomendacje poprawy wydajności i komfortu użytkowania stron internetowych, które proponuje Google, to nie sztuka dla sztuki, tylko konkretny pomysł na poprawę “ogólnego standardu internetu”, dlatego będą one zyskiwać na znaczeniu, a sens optymalizacji będzie aktualny już zawsze.

Bez względu na to, czy planujemy stworzenie nowej strony, czy zmiany i optymalizacje już istniejącej, z pewnością sugestie, jakie możemy otrzymać analizując wydajność pod kątem Core Web Vitals okażą się praktyczne.

Oferty pracy z

Źródło grafiki ilustrującej wpis: unsplash.com

Zespół redakcyjny

RocketSpace.pl

RocketSpace.pl to magazyn portalu pracy przyszłości – RocketJobs.pl. Misją RocketSpace.pl jest zwiększanie świadomości społecznej w kwestiach związanych z rynkiem pracy. Jesteśmy tam, gdzie każdy pracownik white collar. Śledzimy na bieżąco najnowsze trendy na rynku pracy.