Chrome UX report

Zastanawiałeś się kiedyś jak Twoja strona internetowa wypada na tle konkurencji? Zapewne nie raz. Na rynku jest wiele narzędzi, które oferują porównywanie ruchu z SimilarWeb na czele, a ostatnio Google Analytics wprowadza funkcję benchmarkingu o czym więcej możesz przeczytać tutaj: https://bettersteps.pl/blog/analityczne-newsy-pazdziernik-2024

Dzisiaj chciałbym się skupić na aspekcie wydajnościowym strony internetowej.

Dlaczego wydajność strony ma znaczenie?

Wydajność to kluczowy aspekt w sukcesie każdego przedsięwzięcia online. Strony ładujące się szybciej i odpowiednio reagujące na działanie użytkowników lepiej ich angażują i przyciągają uwagę niż te działające wolno.

Korzystając z naszej strony użytkownicy oceniają ją i porównują do konkurencji, dlatego czas wczytywania jest kluczowy dla pozostawienia dobrego wrażenia.

Powyższy przykład obrazuje jak może wyglądać porównanie strony ładującej się szybko do strony ładującej się wolno. Te kilka sekund to czas, który może wywołać nie tylko frustracje u użytkownika, ale także doprowadzić do porzucenia naszej strony.

Nie zapominajmy, że może to być też kryterium decydujące o zakupie /skorzystaniu z usług właśnie u nas, a nie u konkurenta.

Powstało wiele opracowań mówiących o tym, że szybkość witryny ma bezpośrednią korelację ze współczynnikiem konwersji. Możemy przyjąć założenie, że każde spowolnienie naszej witryny to strata pieniędzy.

Poniższy wykres przedstawia zależność jak czas ładowania strony wpływa na współczynnik konwersji ecommerce. Widzimy, że istnieje zależność, że wraz ze wzrostem czasu wczytywania strony, cvr maleje.

Jak mierzyć czas wczytywania?

Wiemy już, że czas wczytywania to bardzo ważna metryka, ale jak ją najlepiej mierzyć?

Ze znanych metryk określających szybkość witryny czas ładowania z pewnością jest najłatwiejszą metryką do zmierzenia, ale czy najlepszą to spróbujemy zaraz określić.

Czas ładowania określa nam moment w którym strona wczyta się całkowicie wraz ze wszystkich jej zależnymi elementami, czyli skryptami zewnętrznymi.

Natomiast w trakcie wczytywania występuje wiele stanów, które określają w jaki sposób strona może być użyteczna i postrzegana przez użytkowników.

W związku z tym ocenianie strony tylko przez pryzmat szybkości czasu ładowania nie jest wiarygodne, ponieważ te różne etapy, różnie wpływają na percepcje użytkownika.

Na przestrzeni lat i wielu badań Google zdefiniował 3 kluczowe wskaźniki nazywane Core Web Vitals, za pomocą który możemy określić status naszej strony pod kątem właśnie szybkości.

Są to:

Największe wyrenderowanie treści (LCP): mierzy wydajność wczytywania.

LCP odpowiada czasowi renderowania największego obrazu, bloku tekstu lub filmu w widocznym obszarze w odniesieniu do czasu, w którym użytkownik po raz pierwszy otworzył stronę.Aby wygodnie korzystało się z witryny, LCP powinno pojawiać się w ciągu 2,5 sekundy od wczytania strony.

Interakcja do kolejnego wyrenderowania (INP): mierzy interaktywność.

INP to dane, które oceniają ogólną responsywność strony na interakcje użytkowników na podstawie obserwacji czasu, jaki upływa od kliknięcia, dotknięcia czy interakcji z klawiaturą do kolejnego wyrenderowania w całym okresie wizyty użytkownika na stronie. Ostateczna wartość INP to najdłuższa zaobserwowana interakcja z pominięciem wartości odstających.Aby zapewnić użytkownikom wygodę, strony powinny mieć INP krótszy niż 200 milisekund.

Skumulowane przesunięcie układu (CLS): mierzy stabilność wizualna.

CLS to pomiar największej serii wartości przesunięcia układu dla każdego nieoczekiwanego przesunięcia układu, do którego doszło w całym okresie działania strony. Aby zapewnić użytkownikom wygodę, strony powinny mieć wskaźnik CLS 0,1 lub mniejszy.

Jak sprawdzić te wartości dla mojej strony oraz stron mojej konkurencji?

Jest naprawdę wiele sposobów na sprawdzenie Core Web Vitals oraz innych metryk określających wydajność strony. Do najprostszych z nich należą

1. Wykonanie skanu strony w jednym z dedykowanych narzędzi:
   1. Lighthouse pobiera adres URL i przeprowadza serię kontroli strony, aby wygenerować raport o jej wydajności. Narzędzie Lighthouse można uruchomić na wiele sposobów, w tym możliwość łatwego audytu strony w Narzędziach deweloperskich w Chrome.
   2. PageSpeed Insights udostępnia dane laboratoryjne i polowe na temat strony. Wykorzystuje Lighthouse do zbierania i analizowania danych laboratoryjnych na temat strony, a rzeczywiste dane terenowe są oparte na zbiorze danych z Raportu na temat użytkowania Chrome.
2. Skorzystanie z raportu Chrome User Experience (CrUX)

Raport CrUX - co to takiego?

Raport Chrome User Experience to publiczny raport prezentujący jak użytkownicy Chrome korzystają ze stron internetowych na całym świecie.

Dane raportu na temat użytkowania Chrome są zbierane z prawdziwych przeglądarek na całym świecie. Zbierany jest zestaw wymiarów i metryk, które pozwalają właścicielom witryn określić, jak użytkownicy odbierają ich strony.

Dane te są używane przez Google m.in do określania jakości strony wykorzystywanego przez algorytmy SEO oraz SEM.

Nie wszystkie strony są uwzględnione w raporcie - to czy strona się tam znajdzie w głównej mierze zależy od tego czy jest dostępna publicznie i czy jest wystarczająco popularna, aby zbiór pomiarów był istotny statystycznie. Nie ujawniono dokładnej liczby użytkowników, która jest wymagana, jeśli nie znajdziesz jakieś strony w raporcie to prawdopodobnie dlatego, że ruch na niej z przeglądarek Chrome był zbyt mały - w tym wypadku musisz skorzystać z opcji opisanych w punkcie 1 wcześniejszego rozdziału.

Dane zbierane przez Chrome są dostępne publicznie i można się do nich dostać z poziomu wielu narzędzi.

Jeśli chcemy stworzyć prosty raport dla jednej strony możemy skorzystać z gotowego generatora raportu Lookers Studio dostępnego tutaj https://developer.chrome.com/docs/crux/dashboard?hl=pl

Wygeneruje nam to naprawdę solidny raport Looker Studio i co najciekawsze możemy to zrobić naprawdę praktycznie dla każdej strony

Te same dane są dla nas dostępne również w Big Query i daje nam to pełną dowolność w przygotowywaniu raportów i agregacji danych.

Ja pozwoliłem sobie przygotować porównawczy raport dla gigantów ecommerce z branży modowej:

• zalando.pl
• modivo.pl
• answear.com

Taki sam raport w prosty sposób możesz przygotować dla swojej strony zestawiając ją ze swoimi konkurentami.

Pełna dokumentacja zbioru danych w BQ dostępna jest tutaj: https://developer.chrome.com/docs/crux/bigquery?hl=pl

Jeżeli chcesz, żebym przygotował taki raport dla Ciebie napisz do mnie przez formularz kontaktowy.
Szablon raportu looker studio dostępny jest pod tym linkiem: https://lookerstudio.google.com/reporting/0e3b0d34-8893-4b33-9d4e-f76a5bf4da60
Zapytanie SQL dla zbioru Chrome UX w BQ dostępne jest pod tym linkiem: https://console.cloud.google.com/bigquery?sq=732008615078:39986a306225406bbab34b85a94d4e88
W zapytaniu w komentarzach znajduje się instrukcja jak należy je zmodyfikować. Po wygenerowaniu tabeli w big Query w dashboardzie Looker Studio trzeba ją ustawić jako źródło dla raportu poprzez aktualizacje istniejącego źródła