Wstęp do SXO: Szybkość ładowania vs szybkość interakcji. Główne metryki wydajnościowe zorientowane na użytkownika

W maju 2020 roku Google ponownie wywołało niemałe emocje w świecie SEO ogłaszając, że już za rok pojawi się duża aktualizacja wyników organicznych o nazwie Page Experience Update. Ma ona być oparta na informacjach zaczerpniętych z badań branżowych i wewnętrznych studiów przypadku, które jasno pokazują, że użytkownicy preferują strony dbające o pozytywne doświadczenia potencjalnego konsumenta, a nie tylko odwiedzającego witrynę przypadkowego użytkownika wyszukiwarki.

Ten nowy zestaw metryk wchodzący już niedługo w skład sygnałów rankingowych opisaliśmy w osobnym artykule: Core Web Vitals – przygotuj się na zmiany. Jednak Core Web Vitals, jak i całe Page Experience, to dopiero wierzchołek góry lodowej w temacie User Experience i nie jest to pierwsza wskazówka od Google sygnalizująca, w którym kierunku zmierza ten lodowiec.

Timeline Update’ów Google skoncentrowanych na User Experience:

Ostatnie 10 lat pokazuje, że właściwym pytaniem, jakie powinniśmy sobie dziś zadać nie jest: “co użytkownik może zrobić dla nas”, tylko: “co my możemy zrobić dla użytkownika?”.

W dzisiejszych czasach żadna strona internetowa nie jest tworzona wyłącznie z myślą o urządzeniach stacjonarnych. Postępujący proces cyfryzacji i zmiany w sposobie korzystania z Internetu pokazują, że wersja mobilna jest absolutnie niezbędna. W ciągu ostatnich kilku lat wyszukiwarka Google nieustannie przesuwa punkt ciężkości pomiędzy „mobile first” a „mobile only”. Czy zatem strony internetowe nadążają ze zmianami jakie zachodzą w wyszukiwarce?

Mobile-First vs Mobile-Only

Wraz z szybkim rozpowszechnieniem się smartfonów, projektowanie stron internetowych również przesunęło się w kierunku responsywności i „mobile first”. Sklepy internetowe oraz strony www wzbogaciły swoją koncepcję o mobilne wersje. To nowe podejście podyktowane jest zmianą zasadniczych priorytetów. Prawidłowe wyświetlanie na urządzeniach mobilnych ma najwyższy priorytet przy tworzeniu stron internetowych. Wersje na komputery stacjonarne są nadal rozwijane, jednak ich znaczenie jest dopiero na drugim miejscu.

Programiści stają więc przed nowymi wyzwaniami: muszą skupić się na opracowaniu wydajnego, mobilnego designu, w którym ogromne znaczenie ma np. krótki czas ładowania. Tutaj liczy się każdy bajt. Wyświetlane powinno być tylko to, co istotne, dlatego deweloperzy nie mogą kopiować z już istniejących stron, które zostały zoptymalizowane dla komputerów stacjonarnych. Podążając za trendami, niektóre firmy, takie jak Snapchat, stworzyły aplikacje działające wyłącznie na urządzeniach mobilnych. W przeciwieństwie do rozwiązań „mobile first”, produkty „mobile only” w ogóle nie są realizowane na komputery stacjonarne.

Funkcjonalność aplikacji stanowi spore wyzwanie. Muszą one spełniać oczekiwania, jakie klienci mają wobec tradycyjnych sklepów internetowych. Ponadto, powinny być zorientowane na użytkownika, szybkie, uporządkowane i nastawione na sprzedaż.

Sklepy internetowe powinny oferować zarówno zoptymalizowane rozwiązania dla komputerów stacjonarnych, jak i dla urządzeń mobilnych, aby zachować zgodność z ogólnymi zachowaniami zakupowymi: przeglądanie na urządzeniach mobilnych, zakup na komputerze stacjonarnym. Biorąc pod uwagę całkowite przejście Googlebotów na indeksację mobilną oraz to, że ponad 50% ruchu w Polsce generują urządzenia mobilne (wykres poniżej), trend jest nieodwracalny i należy się do niego solidnie przygotować.

Aby Twoja witryna pozostawała konkurencyjna na szybko zmieniającym się i technologicznie ewoluującym rynku, ważne jest, abyś nadążał za nowościami oraz wcielał je w życie.

Dlaczego szybkość interakcji jest ważniejsza od szybkości ładowania?

Kiedy tworzysz nowoczesną stronę internetową, ważne jest, aby mierzyć, optymalizować i monitorować. To podstawa pozostania w czołówce wyników organicznych. Wydajność odgrywa znaczącą rolę w sukcesie każdego przedsięwzięcia internetowego, ponieważ strony o wysokiej wydajności angażują i zatrzymują użytkowników lepiej niż te o słabej. Dlatego już dziś witryny powinny skupić się na optymalizacji pod kątem metryk wydajnościowych zorientowanych na User Experience.

Użytkownicy w coraz większym stopniu polegają na mobilnym dostępie do treści i usług cyfrowych, a jeśli spojrzysz na analitykę swojej witryny, prawdopodobnie dostrzeżesz tę tendencję w swoich danych. Ci sami użytkownicy są również bardziej wymagający niż kiedykolwiek wcześniej, a kiedy oceniają doświadczenia związane z Twoją witryną, nie porównują Cię z konkurencją, ale z najlepszymi w swojej klasie usługami, z których korzystają na co dzień.

Aby lepiej zobrazować związek między wydajnością i sukcesem online każdego biznesu, należy zdefiniować czym jest wydajność:

• Wydajność to utrzymanie uwagi użytkowników

Odgrywa ona istotną rolę w sukcesie każdego przedsięwzięcia internetowego. Wysokowydajne strony angażują i zatrzymują użytkowników lepiej niż te o niskiej wydajności.

• Wydajność to poprawa konwersji

Zatrzymanie użytkowników jest kluczowe dla poprawy konwersji. Wolne strony mają negatywny wpływ na przychody, a szybkie strony zwiększają współczynnik konwersji.

• Wydajność to doświadczenie użytkownika

W User Experience szybkość ma znaczenie. Badania konsumenckie wykazały, że poziom stresu związanego z opóźnieniami w działaniu urządzeń mobilnych jest podobny do tego, który towarzyszy oglądaniu horroru lub rozwiązywaniu zadania matematycznego, i większy niż w przypadku oczekiwania w kolejce do kasy w sklepie detalicznym.

• Wydajność to ludzie

Słabo działające witryny i aplikacje mogą również powodować realne koszty dla osób, które z nich korzystają – koszty zmarnowanego czasu.

Tak więc szybkość ma znaczenie, ale co dokładnie przez to rozumiemy? Co to znaczy mieć szybką stronę?

• Strona może być szybka dla jednego użytkownika (w szybkiej sieci z wydajnym urządzeniem), ale wolna dla innego (w wolnej sieci z urządzeniem niskiej klasy).
• Dwie strony mogą zakończyć ładowanie w dokładnie tym samym czasie, ale jedna może sprawiać wrażenie, że ładuje się szybciej (jeśli ładuje zawartość stopniowo, a nie czeka do końca, aby wyświetlić cokolwiek).
• Strona może sprawiać wrażenie, że ładuje się szybko, ale potem wolno (lub wcale) reaguje na interakcje użytkownika.

Zatem mówiąc o wydajności, ważne jest, aby być precyzyjnym i odnosić się do wydajności w kategoriach obiektywnych kryteriów, które mogą być mierzone ilościowo. Kryteria te znane są jako metryki.

Nowe-stare metryki wydajnościowe zorientowane na User Experience

Tradycyjne wskaźniki wydajności, takie jak czas ładowania (OnLoad/OnReady) czy DOM Content Loaded skupiają się na technicznych szczegółach, które łatwo zmierzyć, ale te nie odzwierciedlają już tego, na czym zależy użytkownikom. Jeśli optymalizujesz tylko pod kątem skrócenia czasu ładowania, może się okazać, że masz szybko ładującą się stronę, która nadal wypada blado pod kątem User Experience.

Strona może mieć szybki całkowity czas ładowania, ale jeśli blokuje renderowanie do momentu, aż cała zawartość będzie gotowa, użytkownicy będą przez pewien czas wpatrywać się w pusty ekran. Jeśli klikanie przycisków nie działa, ponieważ główny wątek jest przytłoczony zadaniami JavaScript, mogą być sfrustrowani, nawet jeśli strona jest technicznie rzecz biorąc „załadowana”.

Dla porównania przykład ze stroną, która ma dłuższy całkowity czas ładowania, ale renderuje treść stopniowo i nie blokuje głównego wątku nadmiarem JavaScript. Doświadczenie użytkownika jest znacznie lepsze, ale sam pomiar czasu ładowania nadal ci tego nie powie.

Dlatego właśnie powstały metryki wydajności zorientowane na użytkownika (User-Centric Performance Metrics), które skupiają się na jego spojrzeniu na przeglądanie stron

Zamiast mierzyć czas ładowania za pomocą tylko jednej metryki, powinniśmy prześledzić każdy moment podczas korzystania, który wpływa na postrzeganie przez użytkownika szybkości ładowania. Kiedy użytkownik eksploruje naszą stronę internetową, zazwyczaj szuka pewnego rodzaju informacji zwrotnej:

Wydajność w świecie rzeczywistym jest bardzo zmienna ze względu m.in. na różnice w urządzeniach użytkowników i połączeniach sieciowych. Jeśli załadujesz swoją stronę używając kablowego połączenia sieciowego w swoim biurze i porównasz ją z obciążeniem przy użyciu WiFi w kawiarni, doświadczenia będą prawdopodobnie bardzo różne.

Istnieje kilka typów metryk, które są istotne dla tego, jak użytkownicy postrzegają wydajność:

• Postrzegana szybkość ładowania – jak szybko strona może się załadować i wyrenderować wszystkie swoje elementy wizualne na ekranie.
• Szybkość reakcji ładowania – jak szybko strona może się załadować i wykonać wymagany kod JavaScript, aby komponenty mogły szybko reagować na interakcję użytkownika.
• Szybkość reakcji w czasie rzeczywistym – jak szybko po załadowaniu strona jest w stanie odpowiedzieć na interakcję użytkownika.
• Stabilność wizualna – czy elementy na stronie przesuwają się w sposób, którego użytkownicy się nie spodziewają i potencjalnie zakłócają ich interakcje.
• Płynność – czy przejścia i animacje renderują się z jednakową częstotliwością i płynnie przechodzą z jednego stanu do drugiego.

Biorąc pod uwagę wszystkie powyższe typy metryk wydajności jest chyba jasne, że żadna pojedyncza metryka nie jest wystarczająca, aby uchwycić wszystkie cechy wydajności strony. To, co użytkownicy postrzegają jako „szybką” stronę, zależy od kilku metryk, które próbują to uchwycić w czasie:

Doświadczenie użytkownika	Metryka
Czy to się dzieje?	TTFB, FP, FCP
Czy jest funkcjonalne?	FMP, SI, LCP
Czy jest użyteczne?	TTI, TBT, FCI, FID
Czy jest zachwycające?	CLS

Powyższa lista przedstawia metryki mierzące wiele różnych aspektów wydajności istotnych dla użytkowników, jednak nie zawiera ona wszystkiego (np. responsywność i płynność działania nie są obecnie uwzględnione). W niektórych przypadkach istnieje duże prawdopodobieństwo, że nowe metryki zostaną wprowadzone w dalszej perspektywie, aby pokryć brakujące obszary. Najważniejsza rzecz na dzisiaj to regularne raportowanie za pomocą dashboardów lub raportów zbiorczych zmian jakie zachodzą w całym procesie optymalizacji wydajności strony.

Witryny, które optymalizują szybkość, często zauważają dynamiczny regres tych działań. Dzieje się tak dlatego, że z wydajnością strony internetowej jest jak z kondycją fizyczną: nie wystarczy jednorazowy wysiłek, trzeba zmienić styl życia.

Jednym ze sposobów rozwiązania tego problemu są budżety wydajnościowe. Budżet wydajnościowy to zestaw limitów dotyczących metryk, które wpływają na wydajność witryny. Koncepcja jest podobna do budżetu finansowego: określasz limit i upewniasz się, że go nie przekroczysz.

Do metryk dedykowanych dla budżetów wydajnościowych możemy zaliczyć:

1. Kamienie milowe dotyczące czasu ładowania: czasy oparte na doświadczeniu użytkownika podczas ładowania strony (np. Time-to-Interactive, First Contentful Paint).
2. Metryki oparte na ilości: metryki oparte na surowych wartościach (np. waga JavaScript (KB/MB), liczba żądań HTTP).
3. Reguły: wyniki generowane przez narzędzia takie jak Lighthouse lub WebPageTest. Często pojedyncza liczba lub seria do oceny twojej strony.

Dobry budżet wydajnościowy łączy różne rodzaje metryk, a te można zamknąć w konkretnym modelu.

Pomiar wydajności witryny za pomocą modelu RAIL

RAIL jest modelem wydajnościowym zorientowanym na użytkownika, który tworzy cały proces myślenia o wydajności. Model ten dzieli doświadczenie użytkownika na kluczowe akcje (np. dotknięcie ekranu, przewinięcie, załadowanie elementu) i pomaga zdefiniować cele wydajnościowe dla każdej z nich.

RAIL oznacza cztery odrębne aspekty cyklu życia witryny w wersji mobilnej:

1. Odpowiedź (Response)
2. Animację (Animation)
3. Bezczynność (Idle)
4. Ładowanie (Load)

Użytkownicy mają różne oczekiwania względem wydajności w każdym z tych kontekstów, dlatego cele wydajnościowe są definiowane w oparciu o kontekst oraz badania UX nad tym, jak użytkownicy postrzegają opóźnienia.

Zadbaj o to, by użytkownicy stali się centralnym punktem działań związanych z wydajnością. Poniższa tabela opisuje kluczowe wskaźniki postrzegania przez użytkowników opóźnień w działaniu.

Postrzeganie przez użytkowników opóźnień wydajności:

0 do 16 ms	Użytkownicy są wyjątkowo dobrzy w śledzeniu ruchu i nie lubią, gdy animacje nie są płynne. Animacje są postrzegane jako płynne tak długo, jak długo co sekundę renderowanych jest 60 nowych klatek. To 16 ms na klatkę, wliczając w to czas potrzebny przeglądarce na stworzenie obrazu nowej klatki na ekranie, co pozostawia aplikacji około 10 ms na wyprodukowanie klatki.
od 0 do 100 ms	Reaguj na działania użytkownika w tym oknie czasowym, a użytkownicy poczują, że rezultat jest natychmiastowy. Jeśli ten czas się wydłuży, połączenie między akcją a reakcją zostanie przerwane.
100 do 1000 ms	W tym przedziale czasu wszystko wydaje się być częścią naturalnego i ciągłego postępu zadań. Dla większości użytkowników w sieci ładowanie stron lub zmiana widoku jest zadaniem.
1000 ms lub więcej	Powyżej 1000 milisekund (1 sekundy), użytkownicy tracą koncentrację na wykonywanym zadaniu.
10000 ms lub więcej	Powyżej 10000 milisekund (10 sekund), użytkownicy są sfrustrowani i prawdopodobnie porzucają zadanie. Mogą, ale nie muszą, wrócić do niego później.

W kontekście RAIL cele to kluczowe mierniki wydajności związane z doświadczeniem użytkownika, na przykład naciśnij, aby rozpocząć tworzenie obrazu w czasie poniżej 100 milisekund. Ponieważ ludzka percepcja jest względnie stała, cele te najprawdopodobniej nie ulegną zmianie w najbliższym czasie.

• Odpowiedź (Response)

Cel: Zakończyć przejście zainicjowane przez wejście użytkownika w ciągu 100 ms, tak aby użytkownicy mieli wrażenie, że interakcje są natychmiastowe. Jeśli użytkownik kliknie na przycisk, musisz zareagować na jego kliknięcie, zanim zauważy opóźnienie. Dotyczy to tak naprawdę każdego wejścia, niezależnie od tego, czy jest to przełączanie kontrolki formularza, czy uruchomienie animacji. Jeśli nie nastąpi to w rozsądnym oknie czasowym, wtedy połączenie między akcją a reakcją zostanie przerwane i użytkownik to zauważy.

• Animacja (Animation)

Cel: Wyprodukuj każdą klatkę w animacji w 10 ms lub mniej. Animacja jest filarem nowoczesnych aplikacji – od przewijania do przejścia widoku. Trzeba dobrze przemyśleć to, co robimy w tym czasie, ponieważ użytkownik często będzie wchodził w bezpośrednią interakcję i naprawdę zauważy, jeśli częstotliwość odświeżania będzie się różnić.

• Bezczynność (Idle)

Cel: Zmaksymalizuj czas bezczynności, aby zwiększyć szanse, że strona odpowie na dane wprowadzone przez użytkownika w ciągu 50 ms. Jeśli użytkownik rozpocznie interakcję, będziemy chcieli odpowiedzieć mu w ciągu 100-milisekundowego okna odpowiedzi, a nie utknąć w środku 2-sekundowego renderowania szablonu.

• Ładowanie (Load)

Cel: dostarczaj treść i stań się interaktywny w mniej niż 5 sekund. Kiedy strony ładują się powoli, uwaga użytkownika odpływa, a sami użytkownicy postrzegają zadanie jako przerwane. Strony, które ładują się szybko, mają dłuższe średnie sesje, niższy współczynnik odrzuceń i wyższą oglądalność reklam.

RAIL to narzędzie pozwalające spojrzeć na doświadczenie użytkownika w witrynie jako na podróż składającą się z różnych interakcji. Zrozumienie tego, jak użytkownicy postrzegają Twoją witrynę, pomoże Ci wyznaczyć cele wydajnościowe mające największy wpływ na doświadczenia użytkowników:

• skup się na użytkowniku,
• reaguj na dane wejściowe użytkownika w czasie poniżej 100 ms,
• wytwarzaj obraz w czasie poniżej 10 ms podczas animacji lub przewijania,
• maksymalizuj czas bezczynności głównego wątku,
• załaduj interaktywną zawartość w czasie poniżej 5000 ms.

Podsumowanie

Istnieje duże prawdopodobieństwo graniczące z pewnością, że zaangażowanie użytkowników na stronie wzrośnie, gdy doświadczenia w wyszukiwarce będą coraz lepsze. Patrząc wstecz na niektóre aktualizacje i zmiany algorytmów w wyszukiwarce od 2011 roku, Google dawało zawsze bardzo dużo czasu na przygotowanie się do kluczowych zmian (ostatnia zmiana dotycząca nadchodzącego update’u Page Experience była ogłoszona już w maju 2020).

Zmiana w sposobie indeksowania na mobile-first to również ukłon w stronę rozwoju współczesnych zachowań zakupowych, który wpływa na projektowanie i realizację rozwiązań typu e-commerce. Łączenie nowych metryk wydajnościowych skoncentrowanych na użytkowniku z tymi już istniejącymi dużo wcześniej oraz zaliczenie ich do czynników rankingowych spowoduje, że wyniki jakie zobaczymy, będą bardziej przyjazne użytkownikom, niezależnie z jakiego urządzenia wejdą oni w interakcję z witryną.

Wydajność witryny to mapa, dzięki której można spojrzeć na doświadczenie użytkownika w kontakcie z witryną jak na podróż składającą się z poszczególnych interakcji. Kiedy poznasz obszar każdej interakcji, będziesz wiedział, co czuje w danym momencie użytkownik, a co za tym idzie, czy Twoje cele są realizowane. Czasami wymaga to dodatkowego wysiłku, ale jeśli będziesz przyjazny dla użytkownika, użytkownik właśnie u Ciebie najprawdopodobniej dokona konwersji.

Źródła:

• https://www.brightedge.com/blog/core-web-vitals-preparing-page-experience-update
• https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-web-traffic-statistics/
• https://blog.marketingblatt.com/en/responsive-design-mobile-first-vs.-mobile-only
• https://developers.google.com/web/tools/chrome-user-experience-report/
• https://web.dev/lighthouse-performance/
• https://web.dev/user-centric-performance-metrics/
• https://web.dev/fast/
• https://web.dev/performance-budgets-101/
• https://web.dev/rail/
• https://developers.google.com/search/blog/2020/05/evaluating-page-experience

Tekst oryginalnie został opublikowany 13.04.2021 w domenie Sempai.pl – link.