Korzystaj z testów A/B, aby oceniać wpływ szybkości witryny na dane biznesowe.
W ciągu ostatnich kilku lat stwierdzono, że szybkość działania witryny ma duży wpływ na wygodę użytkowników, a jej poprawa korzystnie wpływa na różne wskaźniki biznesowe, takie jak współczynniki konwersji i odrzuceń. W tym celu opublikowaliśmy wiele artykułów i studiów przypadków, w tym m.in.: How Website Performance Affects Conversion Rates (Jak skuteczność strony internetowej wpływa na współczynniki konwersji) na stronie Cloudflare, Milliseconds Make Millions i Shopping for Speed na eBay.com.
Choć ta kwestia jest jasna, wiele firm nadal ma problemy z ustalaniem priorytetów prac nad zwiększeniem szybkości witryny, ponieważ nie wie dokładnie, jak wpływa to na ich użytkowników, a w konsekwencji na swoją działalność.
Gdy brakuje danych, można łatwo opóźnić pracę witryny i skupić się na innych zadaniach. Typowy scenariusz to sytuacja, w której niektórzy pracownicy firmy zdają sobie sprawę, jak ważna jest szybkość witryny, ale nie potrafią przygotować jej argumentu i przekonać wiele zainteresowanych osób do odpowiedniej inwestycji.
W tym artykule znajdziesz ogólne wskazówki dotyczące korzystania z testów A/B do oceny wpływu szybkości witryny na wskaźniki biznesowe, co pozwala na skuteczniejsze podejmowanie decyzji w tej sprawie.
Krok 1. Wybierz stronę do przeprowadzenia testu A/B
Twoim celem jest sprawdzenie hipotezy, że szybkość strony ma związek z danymi biznesowymi. Dla uproszczenia możesz początkowo ograniczyć się do wskazywania pojedynczej strony do analizy. W przyszłości możemy objąć wiele stron tego samego typu, aby zweryfikować uzyskane wyniki, a potem uwzględnić je w innych obszarach witryny. Sugestie, od czego zacząć, znajdziesz na dole tego kroku. Proces wyboru strony zależy od kilku aspektów:
- Test A/B należy przeprowadzać tylko na urządzeniach mobilnych użytkowników. Witryny partnerów, którym pomagamy, generują na całym świecie średnio ponad 50% (i zwiększają) ruch z urządzeń mobilnych. Może on jednak znacznie się zwiększyć w zależności od regionu i branży. Urządzenia mobilne są bardziej wrażliwe na wolniejsze strony z powodu ograniczeń przetwarzania i pamięci oraz mniej stabilnej sieci. Wzorce użytkowania z dowolnego miejsca oznaczają też, że oczekiwania związane z szybkością są wyższe.
Strona wybrana do testowania powinna być ważną częścią ścieżki konwersji. Każda witryna ma inne przeznaczenie, więc każda śledzi inne wyznaczniki sukcesu. Dane te są zwykle powiązane z ścieżką użytkownika, która jest analizowana za pomocą ścieżki. Aby na przykład dokonać zakupu, użytkownicy witryny e-commerce będą musieli przejść przez stronę główną, strony kategorii, strony produktów i strony płatności. Jeśli optymalizujesz kampanię pod kątem konwersji, jedna z tych stron będzie dobrym wyborem.
Strona powinna mieć jeden cel. Jeśli Twoja witryna nie ma konkretnej misji, najlepiej unikać używania w teście strony głównej. Strony główne wielu witryn komercyjnych stanowią portale do szerokiej gamy funkcji, które sprawiają, że analiza jest niebezpieczna. Jeśli np. optymalizujesz kampanię pod kątem liczby odsłon na sesję w witrynie z wiadomościami, wyklucz niekomercyjne części witryny i skup się na sekcjach i artykułach, na których można zarabiać.
Wybrana strona powinna generować wystarczająco dużo ruchu, aby nie trzeba było długo czekać na wyniki istotne statystycznie.
Wybrana strona powinna działać stosunkowo wolno. Właściwie to im wolniej, tym lepiej. Oznacza to nie tylko, że usprawnienie strony będzie łatwiejsze, ale także, że dane powinny być znacznie bardziej przejrzyste. Możesz to szybko przejrzeć w raporcie dotyczącym szybkości w Google Analytics lub raporcie dotyczącym podstawowych wskaźników internetowych w Search Console, by sprawdzić, które z Twoich stron działają najwolniej.
Strona powinna być względnie stabilna. Dopóki test się nie zakończy, nie aktualizuj stron (czyli takich, które mogą mieć wpływ na dane biznesowe). Im mniej czynników zewnętrznych należy wziąć pod uwagę, tym czystsza będzie analiza.
Powyższe wskazówki pomogą Ci lepiej zrozumieć, które strony nadają się do egzaminu. Strony docelowe reklam są również dobrym wyborem, ponieważ prawdopodobnie masz do dyspozycji wbudowane dane dotyczące firmy, testy A/B i analizy. W razie potrzeby poniżej znajdziesz kilka propozycji dla poszczególnych branż:
- Witryny w sieci reklamowej: sekcje, artykuły
- Witryny sklepowe: strony kategorii, strony produktów
- Odtwarzacze multimedialne: strony odkrywania/wyszukiwania filmów, strony odtwarzania filmów
- Usługi i odkrywanie (podróże, samochody do wypożyczenia, rejestracja usług itp.): początkowa strona wypełniania formularza
Krok 2. Pomiar skuteczności
Wskaźniki można mierzyć na 2 ogólne sposoby: w module i w terenie. Osobiście uważamy, że bardziej przydatne są dane pomiarowe dostępne w polu Real User Monitoring (RUM), ponieważ odzwierciedlają wrażenia rzeczywistych użytkowników. Przykłady bibliotek i usług, które mogą pomóc w raportowaniu danych RUM, to Perfumy, Monitorowanie wydajności Firebase i Zdarzenia Google Analytics.
Dostępnych jest wiele rodzajów danych, ponieważ służą one do rejestrowania różnych aspektów wrażeń użytkowników. Pamiętaj, że Twoim celem jest ustalenie, czy występuje bezpośrednia korelacja między szybkością działania a danymi biznesowymi. Dlatego warto śledzić kilka wskaźników szybkości działania, aby sprawdzić, który z nich ma najsilniejszy związek z osiągnięciem sukcesu. Ogólnie zalecamy, aby zacząć od podstawowych aplikacji internetowych. Biblioteka web-vitals.js może pomóc w zmierzeniu niektórych podstawowych wskaźników internetowych w tej dziedzinie. Pamiętaj jednak, że obsługa przeglądarek nie jest w 100%obsługiwana. Oprócz podstawowych wskaźników internetowych warto też sprawdzić inne wskaźniki internetowe. Możesz też zdefiniować dane niestandardowe, np. „Czas do pierwszego kliknięcia reklamy”.
Krok 3. Utwórz warianty szybkości
Na tym etapie wdrożysz zmiany, aby utworzyć szybszą wersję strony i porównać ją z bieżącą wersją.
Warto pamiętać:
- Unikaj wprowadzania jakichkolwiek zmian w interfejsie użytkownika oraz UX. Niezależnie od tego, czy jedna strona jest szybsza od drugiej, zmiany muszą być niewidoczne dla użytkowników.
- Pomiary są również kluczowym aspektem tego etapu. W trakcie programowania należy używać narzędzi do testowania laboratoryjnych, takich jak Lighthouse, aby wskazać wpływ zmian na wydajność. Pamiętaj, że zmiany jednego wskaźnika często wpływają na inny. Gdy strony będą już aktywne, trzymaj się RUM, aby uzyskać dokładniejszą ocenę.
Tworzenie wariantów skuteczności może odbywać się na różne sposoby. Na potrzeby testu należy zrobić to w najprostszy sposób. Poniżej znajdziesz kilka propozycji.
Szybsze tworzenie strony
- Możesz ręcznie zoptymalizować obrazy na stronie testowej za pomocą takiego narzędzia jak Squoosh.
- Użyj pokrycia kodu z Narzędzi deweloperskich, aby ręcznie wyeliminować nieużywany kod JavaScript lub CSS tylko na tej stronie
- Efektywne ładowanie skryptów innych firm
- Aby wyodrębnić i wbudować w tekście najważniejsze elementy CSS, użyj np. narzędzia Krytyczne.
- Usuń niekrytyczny kod JavaScript, który nie wpływa na wygodę użytkowników i który możesz wykonać na potrzeby testu (np. niektóre biblioteki innych firm).
- Zaimplementuj leniwe ładowanie na poziomie przeglądarki, które nie jest obsługiwane przez wszystkie przeglądarki, ale może znacznie zwiększyć wydajność tam, gdzie jest obsługiwane.
- Usuń niekrytyczne tagi analityczne lub ładuj je asynchronicznie
Dodatkowe optymalizacje, które warto wziąć pod uwagę, znajdziesz w sekcjach Szybkie wczytywanie i Lista kontrolna wydajności frontendu. Możesz też użyć PageSpeed Insights, aby uruchomić narzędzie Lighthouse, które wskazuje możliwości poprawy skuteczności.
Spowalnianie działania strony
Jest to prawdopodobnie najprostszy sposób tworzenia wariantów, który można osiągnąć przez dodanie prostego skryptu, spowolnienie czasu reakcji serwera, wczytywanie większych obrazów itp. Financial Times wybrał tę opcję podczas testowania wpływu skuteczności na jej wskaźniki biznesowe: otwórz stronę Szybsze FT.com.
Przyspieszanie wczytywania strony
Jeśli do strony testowej (np. do strony ze szczegółami produktu) prowadzi zwykle inna strona (np. stronę główną), wstępne pobieranie lub wstępne renderowanie strony produktu bezpośrednio ze strony głównej grupy testowej przyspieszy jej kolejne wczytywanie. Pamiętaj, że w tym przypadku część testów A/B (krok 4) jest przeprowadzana na stronie głównej. Dodatkowo wszystkie te czynniki mogą spowolnić działanie pierwszej strony, więc pamiętaj o zmierzeniu wyników i weź to pod uwagę podczas analizy wyników testu (krok 5).
Krok 4. Utwórz test A/B
Gdy masz 2 wersje tej samej strony, z których jedna działa szybciej, następnym krokiem jest podział ruchu, aby zmierzyć wpływ. Testów A/B można przeprowadzać na ogół wiele metod i narzędzi, ale trzeba pamiętać, że nie wszystkie metody nadają się do pomiaru wpływu na szybkość działania.
Jeśli używasz narzędzia do testowania A/B, takiego jak Optimizely lub Optimize, zdecydowanie zalecamy skonfigurowanie testu po stronie serwera zamiast testu po stronie klienta, ponieważ testy A/B po stronie klienta często polegają na ukryciu treści strony do czasu wczytania eksperymentu, co oznacza, że sam test A/B zniekształciłby dane, które chcesz mierzyć. Jeżeli możesz przeprowadzać testy po stronie klienta, rozważ skonfigurowanie eksperymentu na innej stronie i zmianę linków do strony testowej, aby umożliwić podział ruchu. Dzięki temu test po stronie klienta nie przeciągnie strony testowej w dół.
Przykład zmian skuteczności testów A/B na stronie ze szczegółami produktu (PDP) w ramach testów po stronie serwera:
Żądanie trafia do backendu, który rozdziela użytkowników między 2 różne wersje strony. Choć ogólnie jest to dobra konfiguracja, do skonfigurowania podziału po stronie serwera potrzeba często zasobów IT.
Oto przykład konfiguracji testowania po stronie klienta z wykorzystaniem poprzedniej strony (strona główna na diagramie poniżej) do uruchomienia testowego JavaScriptu:
Testowy JavaScript manipuluje linkiem wychodzącym, by udostępnić 2 grupom testowym użytkowników linki do 2 wersji PDP. Możesz je łatwo skonfigurować i utrzymywać za pomocą popularnych narzędzi do testów A/B, takich jak Optimizely czy Optimize, i nie wpływa na test wydajności, ponieważ testowy kod JavaScript działa na innej stronie.
Możesz też wybrać 2 strony, które działają i działają bardzo podobnie (np. w przypadku 2 bardzo podobnych produktów). Zastosuj zmiany w jednym z nich, a następnie porównaj różnice w danych w czasie. Oznacza to, że nie przeprowadzasz odpowiednich testów A/B, ale i tak możesz uzyskać całkiem wnikliwe dane.
Jeśli strona testowa służy jako strona docelowa w kampaniach reklamowych, możesz skorzystać z wbudowanych narzędzi do testów A/B Twojej sieci reklamowej, takich jak test porównawczy na Facebooku lub Wersje robocze i eksperymenty Google Ads. Jeśli jest to niemożliwe, możesz użyć 2 kampanii o tej samej konfiguracji i ustawić jako cele różne strony docelowe.
Krok 5: Przeanalizuj test A/B
Gdy przeprowadzisz test już wystarczająco długo i zdobędziesz wystarczająco dużo danych, aby mieć pewność co do jego wyników, czas zebrać wszystkie informacje i przeprowadzić analizę. Sposób, w jaki to zrobisz, zależy od tego, jak przebiegł test. Przyjrzyjmy się różnym opcjom.
Jeśli test został przeprowadzony na stronach docelowych reklam za pomocą wspomnianych wyżej narzędzi, analiza powinna być tak prosta jak odczytanie wyniku. Jeśli używasz wersji roboczych i eksperymentów Google, przejrzyj porównanie za pomocą ScoreCard.
Platformy takie jak Optimizely i Optimize umożliwiają też łatwe sposoby interpretacji wyników i określenia wpływu szybkości wczytywania stron na Twoje strony.
Jeśli korzystasz z Google Analytics lub podobnego narzędzia, musisz samodzielnie wygenerować raport. Na szczęście Google Analytics ułatwia tworzenie raportów niestandardowych i od tego warto zacząć. Jeśli dane o szybkości wysyłania do Google Analytics są wysyłane za pomocą wymiaru niestandardowego, zajrzyj do przewodnika po raportowaniu, aby dowiedzieć się, jak je skonfigurować i uwzględnić w raportach niestandardowych. Upewnij się, że raport obejmuje datę eksperymentu i jest skonfigurowany tak, aby wyświetlać oba warianty. Co powinno się znaleźć w tym raporcie?
- Przede wszystkim musisz uwzględnić dane biznesowe, które są dla Ciebie najważniejsze: konwersje, wyświetlenia strony, wyświetlone reklamy, współczynnik konwersji, dane e-commerce, współczynnik klikalności itp.
- Inne standardowe dane, które dobrze sprawdzają się w przypadku witryny, to współczynnik odrzuceń, średni czas trwania sesji i odsetek wyjść.
Konieczne może być też odfiltrowanie treści pod kątem urządzeń mobilnych i wykluczenie botów oraz innego ruchu niegenerowanego przez użytkowników. Bardziej zaawansowana analiza obejmuje też filtrowanie według regionu, sieci, urządzeń, źródła wizyt oraz profili i typów użytkowników, np. nowych i powracających użytkowników. Każda grupa użytkowników może być mniej lub bardziej wrażliwa na wolne szybkości, więc identyfikacja tych czynników jest także dość pomocna.
Looker Studio (dawniej Studio danych) lub inne narzędzia do wizualizacji danych ułatwiają integrację różnych źródeł danych, w tym Google Analytics. Ułatwia to przeprowadzanie analiz, a także tworzenie paneli, które można udostępniać wielu zainteresowanym osobom zaangażowanym w prowadzenie nowoczesnej witryny w celu uzyskania dodatkowych informacji. Na przykład gazeta Guardian stworzyła automatyczny system alertów, który ostrzegał zespół redakcyjny o tym, że opublikowane ostatnio treści przekroczyły progi rozmiaru strony lub szybkość wczytywania i prawdopodobnie nie spełniły oczekiwań użytkowników.
Krok 6: Wyciągnij wnioski i zdecyduj o dalszych krokach.
Gdy masz już dane, które połączą dane o skuteczności z danymi biznesowymi, możesz je analizować i wyciągać wnioski.
Jeśli dostrzegasz związek między poprawą wyników a poprawą wskaźników biznesowych, podsumuj wyniki i przedstaw je w całej firmie. Omówiliśmy już szybkość stron internetowych w „języku biznesowym”. W ten sposób łatwiej przyciągniesz uwagę różnych zainteresowanych osób i ocenisz szybkość działania witryny na pierwszym planie. Następnym krokiem jest ustawienie budżetów wydajności na podstawie wyników i zaplanowanie pracy zgodnie z nimi. Wiesz, jaką wartość może przynieść ta praca, możesz ustalić odpowiednie priorytety.
Jeśli nie możesz zidentyfikować korelacji, zapoznaj się z zastrzeżeniami poniżej i oceń, czy podobne testy powinny zostać przeprowadzone w innym miejscu w witrynie (np. na całej ścieżce zakupowej czy na stronie innego typu).
Zastrzeżenia
Może być kilka powodów, dla których nie ma istotnej korelacji między danymi o szybkości witryny a danymi o firmie:
- Wybrana strona nie ma wystarczającego wpływu na badane dane biznesowe. Na przykład szybsza strona produktu może nie mieć dużego wpływu na współczynniki konwersji, jeśli strona płatności działa bardzo nieprzyjazna lub wolno działa. Warto przyjrzeć się bardziej trafnym danym, takim jak współczynniki odrzuceń, współczynniki dodania produktów do koszyka czy inne dane, które są bezpośrednio powiązane z testowaną stroną.
- Różnica w szybkości między nimi nie jest wystarczająca. Należy to ocenić na podstawie mierzonych wskaźników RUM.
- Wystąpił błąd mechanizmu testów A/B. Ruch może nie być prawidłowo rozpowszechniany lub statystyki raportowane mogą być nieprawidłowe. Aby tego uniknąć, przeprowadź test A/A, w ramach którego testujesz tę samą wersję strony za pomocą tego samego mechanizmu testowania, aby sprawdzić, czy nie ma różnicy w wynikach.
- Szybkość witryny tak naprawdę nie wpływa na wskaźniki biznesowe. Zdarza się to rzadko, ale może się zdarzyć, gdy rynek docelowy jest mniej wrażliwy na szybkość wczytywania strony (np. strona jest otwierana głównie za pomocą zaawansowanych urządzeń w silnej sieci) lub gdy zapotrzebowanie użytkowników jest bardzo duże, a wybór jest ograniczony (np. system sprzedaży biletów oferujący wyłącznie bilety na popularne koncerty). Pamiętaj, że szybsza witryna nie poprawi wrażeń użytkowników i w konsekwencji wpłyną na reputację marki.
Podsumowanie
Wdrożenie optymalizacji szybkości w całej witrynie jest kuszące, ale w dłuższej perspektywie zwykle korzystniej jest najpierw zrozumieć, co oznacza szybsze działanie witryny dla użytkowników i firmy. To różnica między stwierdzeniem: „Poprawiliśmy FCP o 1,5 sekundy” a „Poprawiliśmy FCP o 1,5 sekundy i poprawiliśmy współczynniki konwersji o 5%”. W ten sposób możesz nadawać priorytety dalszym pracy, uzyskiwać zgody różnych zainteresowanych osób i działać w całej firmie w zakresie szybkości działania witryny.