Nie powinieneś być ekspertem, aby móc zrozumieć metryki wydajności

W czerwcu 2021 roku pod nazwą Page Experience Update przeprowadzono aktualizacje algorytmów Google*, które objęły kluczowe wskaźniki jakości w ramach Core Web Vitals. Web Vitals to inicjatywa Google mająca na celu opracowanie ujednoliconych wytycznych dla twórców witryn internetowych wysokiej jakości.
*Aktualizacja „doświadczenia strony” (Page Experience Update) — 25 czerwca 2021 roku [Moz 2022].

Wydawcy witryn internetowych nie powinni być ekspertami od wydajności, aby móc zrozumieć atrybuty, które wpływają na jakość doświadczeń płynących z użytkowania serwisu. Inicjatywa Web Vitals ma na celu uproszczenie oceny wydajności serwisów internetowych, poprzez pomiar i analizę trzech kluczowych wskaźników – szybkości wczytywania (ładowania), interaktywności i stabilności wizualnej (loading, interactivity, and visual stability). Te wskaźniki to Largest Contentful Paint (LCP), First Input Delay (FID) oraz Cumulative Layout Shift (CLS). Każdy z nich jest mierzalny, reprezentuje odrębny aspekt doświadczeń użytkownika i odzwierciedla rzeczywisty komfort korzystania z witryny internetowej [Walton 2020a].

Internetowy ekosystem, który będzie spełniał wszystkie wymagania użytkowników

W 2021 roku wprowadzono zmiany w rankingu Google polegające na uwzględnieniu „wyglądu i działania stron internetowych”, przy czym „wyglądu” nie należy w tym miejscu rozumieć jako względnego, subiektywnego elementu dizajnu, zależnego od gustu odbiorcy. Celem aktualizacji jest wyróżnienie w rankingu tych serwisów, które mają wysokie walory użytkowe. Aktualizacja uwzględnia atrybuty wyrażone przy pomocy trzech wskaźników: LCP, FID oraz CLS [Jose 2021]. Web Performance Working Group opracowała również standaryzowane interfejsy API, w tym User Timing API, Long Tasks API oraz Element Timing API, które mogą być przydatne do wdrażania własnych niestandardowych metryk [Walton 2022].

Largest Contentful Paint

W ujęciu historycznym twórcy serwisów internetowych koncentrowali się przede wszystkim na pomiarach szybkości wczytywania głównej zawartości serwisu i jej widoczności dla użytkowników. Jednak na podstawie obserwacji członków grupy roboczej W3C Web Performance Working Group oraz badań przeprowadzonych w Google wywnioskowano, że dokładniejszych informacji na temat wydajności dostarcza pomiar czasu wyrenderowania największego elementu witryny, co opisano wskaźnikiem Largest Contentful Paint (LCP).

Źródło: Walton [2019]

Wartość wskaźnika LCP jest wyrażana w sekundach i oznacza czas wyrenderowania największego elementu graficznego lub bloku tekstu pojawiającego się w widocznym obszarze, w stosunku do momentu pierwszego załadowania strony. LCP jest wskaźnikiem zorientowanym na użytkownika, który oddaje wyniki pomiaru postrzeganej szybkości ładowania. Oznacza punkt na osi czasu, w którym prawdopodobnie załadowana została główna treść strony. Aby zapewnić odpowiednio dobre UX, witryny powinny wyświetlić „największy fragment treści” przed upływem 2,5 sekundy lub wcześniej [Walton 2019].

First Input Delay (FID)

W przypadku witryn internetowych pierwsze wrażenie zależy przeważnie od projektu graficznego i atrakcyjności wizualnej. Trudno jest jednak zmierzyć, jak bardzo użytkownikom podoba się dizajn witryny stosując narzędzia algorytmiczne i syntetyczne wskaźniki jakości. Możliwy jest za to pomiar szybkości wczytywania serwisu i czasu reakcji.
Pierwsze wrażenie w obszarze szybkości wczytywania witryny opisywane jest przy pomocy wskaźnika First Contentful Paint (FCP). Ale wskaźnik ten dotyczy jedynie fragmentu zagadnienia. Równie ważne jest, jak szybko reaguje witryna, gdy użytkownicy próbują wchodzić w interakcję z jej poszczególnymi elementami. Atrybut ten wyrażany jest przy pomocy metryki First Input Delay (FID).

Źródło: Walton [2020]

FID pokazuje czas od pierwszej interakcji użytkownika ze stroną, np. gdy kliknie wybrane hiperłącze, do momentu, w którym przeglądarka jest w stanie faktycznie rozpocząć przetwarzanie programów obsługi zdarzeń w odpowiedzi na tę interakcję. Według Web Vitals czas ten nie powinien przekraczać 100 milisekund. Niska wartość FID oznacza większą użyteczność strony [Walton 2020b].

Cumulative Layout Shift (CLS)

Większość użytkowników Internetu doświadczyło, jak wybrane elementy strony internetowej nieoczekiwanie zmieniły swoje położenie względem innych. Przykładowo, dokładnie w czasie próby kliknięcia w hiperłącze ono zmieniło swoje położenie, przez co aktywowany został inny element witryny. Nieoczekiwana zmiana położenia zawartości strony ma przeważnie miejsce, gdy poszczególne elementy są ładowane asynchronicznie lub elementy DOM są dynamicznie dodawane do strony powyżej istniejącej zawartości. Zjawisko to może być wywołane przez element graficzny lub materiał wideo o nieznanych wymiarach, albo reklama lub widżet, które dynamicznie zmieniają swój rozmiar. Doświadczenia tego typu najczęściej zmniejszają komfort przeglądania witryny, ale w niektórych przypadkach mogą negatywnie oddziaływać na konwersję celu.

Źródło: Walton i Mihajlija [2019]

Kumulatywne przesunięcie układu (CLS) to metryka zorientowana na użytkownika służąca do pomiaru tzw. stabilności wizualnej witryny. Pomaga zmierzyć, jak często użytkownicy doświadczają nieoczekiwanych zmian układu. Niska wartość CLS świadczy o dużej stabilności wizualnej. Seria zmian układu ma miejsce, gdy jedna lub więcej pojedynczych zmian układu występuje szybko po sobie, z mniej niż jedną sekundą przerwy pomiędzy każdą zmianą i maksymalnie pięcioma sekundami dla całkowitego czasu trwania okna sesji. Aby zapewnić użytkownikom odpowiednie UX, witryny powinny dążyć do uzyskania wyniku CLS na poziomie 0,1 lub niższym [Walton i Mihajlija 2019].

W jaki sposób pozyskiwane są wartości wskaźników?

Metryki wydajności mierzone są zazwyczaj na dwa sposoby:

w warunkach laboratoryjnych (in the lab), przy wykorzystaniu narzędzi symulujących ładowanie strony w spójnym, kontrolowanym środowisku,
w terenie (in the field), w warunkach monitoringu rzeczywistych użytkowników, faktycznie wchodzących w interakcje ze stroną.

Testowanie wydajności w warunkach laboratoryjnych jest niezbędne podczas opracowywania nowych funkcjonalności, które nie są jeszcze dostępne w środowisku produkcyjnym. Chociaż testowanie w laboratorium dostarcza wartościowych wskazówek, niekoniecznie odzwierciedla to, jak wszyscy użytkownicy korzystają z serwisu w warunkach naturalnego użytkowania.

Pomiary laboratoryjne i terenowe uzupełniają się.

Dane laboratoryjne dostarczają informacji o tym, jak hipotetyczni użytkownicy mogą postrzegać dany serwis internetowy i jak zachowuje się on w warunkach symulowanych. Jednak wydajność witryny może się znacząco różnić w zależności od rodzaju/typu urządzenia, na którym jest przeglądana i lokalnych przepustowości sieci internetowej. Wydajność witryny zależy także od sposobu w jaki użytkownik wchodzi w interakcje ze stronami. Przykładowo, witryny, które prezentują spersonalizowane treści lub reklamy mogą mieć różne charakterystyki wydajności, w zależności od konfiguracji środowiska, w którym są uruchamiane. Test laboratoryjny nie wykryje tych różnic. Jedynym sposobem, aby zweryfikować wydajność serwisu internetowego jest pomiar wykonywany w warunkach rzeczywistego użytkowania. Dane terenowe opisują, w jaki sposób użytkownicy wchodzili w rzeczywiste interakcje z serwisem i są pozyskiwane w drodze monitorowania zachowań użytkowników (Real User Monitoring, RUM) [Bisch i in. 2022].

Źródła

Bisch, A, Mimani, G., Osmani, A., Sweeny, E. (2022). Core Web Vitals workflows with Google tools. Web Vitals. https://web.dev/vitals-tools/
Jose, J. (2021). More time, tools, and details on the page experience update. Google Search Central Blog. https://developers.google.com/search/blog/2021/04/more-details-page-experience
Moz (2022). Google Algorithm Update History. A History of Major Google Algorithm Updates from 2000–Present. Moz. https://moz.com/google-algorithm-change
Walton, P. (2019). Largest Contentful Paint (LCP). https://web.dev/lcp/
Walton, P. (2020a). Web Vitals. https://web.dev/vitals/
Walton, P. (2020b). First Input Delay (FID). https://web.dev/fid/
Walton, P. (2022). User-centric performance metrics. https://web.dev/user-centric-performance-metrics/#how-metrics-are-measured
Walton, P., Mihajlija, M. (2019). Cumulative Layout Shift (CLS). https://web.dev/cls/