Co należy mierzyć, aby poprawić skuteczność?

Strategie pomiaru skuteczności na każdym etapie ścieżki zakupowej.

Martin Schierle

Twitter GitHub

Różne etapy ścieżki zakupowej są podatne na różne problemy ze skutecznością, dlatego wymagają odmiennych pomiarów i optymalizacji:

Ścieżka konwersji.

W tym przewodniku omówimy, jak mierzyć poszczególne kroki. W tym celu zapoznaj się z danymi zarówno laboratoryjnymi, jak i terenowymi.

Dane modułu są zbierane przez przeprowadzanie testów lokalnie, np. przy użyciu Lighthouse i innych narzędzi. Dzięki temu możesz porównywać wydajność witryny na przestrzeni czasu z wynikami konkurencji w kontrolowanym i stabilnym środowisku, ale dane te mogą nie odzwierciedlać rzeczywistej wydajności.

Dane terenowe są zbierane za pomocą statystyk pochodzących od rzeczywistych użytkowników i dlatego odzwierciedlają ich wrażenia. Nie można ich jednak łatwo porównywać z czasem ani z konkurencją. Połączenia sieciowe i smartfony zmieniają się z czasem, a różni docelowi odbiorcy mogą mieć różne urządzenia, co utrudnia porównywanie danych z danymi terenowymi. Zobacz też artykuł Pomiar skuteczności w terenie.

Aby uzyskać pełny obraz, potrzebne są oba źródła danych. W kolejnych sekcjach przedstawiamy, jak zbierać dane laboratoryjne i polowe dla różnych odpowiednich wskaźników wydajności na całej ścieżce.

Kampanie Discovery

Optymalizacja pod kątem wykrywania oznacza optymalizację pod kątem pierwszego wczytywania, czyli tego, co zobaczą nowi użytkownicy, ale także robotów w wyszukiwarce i mediach społecznościowych. Dane laboratoryjne dotyczące pierwszego wczytywania można łatwo pozyskać w Lighthouse, natomiast dane terenowe (przynajmniej w przypadku Chrome) są łatwo dostępne w raportach na temat użytkowania Chrome. Wygodną kombinację obu tych metod znajdziesz w narzędziu PageSpeed Insights. Śledź też odpowiednie dane samodzielnie: Pomiar tych danych na rzeczywistych urządzeniach użytkowników zapewnia dobry wgląd w sytuację.

Z punktu widzenia użytkownika najważniejsze dane to:

• Pierwsze wyrenderowanie treści (FCP): czas patrzenia przez użytkownika na pusty ekran. Dzieje się tak, gdy większość użytkowników rezygnuje z korzystania z usługi, ponieważ nie widzi postępu.
• Pierwsze wyrenderowanie elementu znaczącego (FMP): gdy użytkownik zacznie oglądać główną treść, której szuka. Jest to często baner powitalny, ale w przypadku strony docelowej może to być nawet wezwanie do działania, np. przycisk Kup, ponieważ użytkownik dotarł do niej z jasnym zamiarem (np. w ramach kampanii kierowanej na reklamy).
• Opóźnienie przy pierwszym działaniu (FID): czas, w którym witryna musi zareagować na pierwsze działanie użytkownika. Zbyt intensywny JavaScript i inne problemy z wczytywaniem zasobów mogą to zablokować, co doprowadzi do nieudanych kliknięć lub błędnego wpisania kodu, błędnych danych wejściowych i porzucenia strony.

Można przyjrzeć się innym danym, ale stanowią one dobry punkt odniesienia. Pamiętaj też o rejestrowaniu współczynników odrzuceń, konwersji i zaangażowania użytkowników, aby odpowiednio je ustawiać.

Zaangażowanie i konwersja

Po pierwszym wczytaniu strony docelowej użytkownik przechodzi przez Twoją witrynę, mając nadzieję na udaną konwersję.

Na tym etapie ważne jest szybkie i elastyczne nawigację oraz interakcje. Pomiar pełnego przepływu zdarzeń nawigacji i interakcji w tym polu nie jest prosty, ponieważ każdy użytkownik przemierza stronę inną ścieżką. Dlatego zalecamy pomiar czasu potrzebnego do realizacji celów podrzędnych konwersji lub konwersji („Czas do działania”) za pomocą scenariuszy i pomiarów przepływu w teście laboratoryjnym, aby porównać skuteczność w czasie lub z konkurencją.

Można to zrobić na 2 wygodne sposoby:

WebPageTest

WebPageTest oferuje bardzo elastyczne rozwiązanie do obsługi skryptów. Podstawowym założeniem jest:

• Poproś WebPageTest, aby poruszał się między stronami procesu za pomocą polecenia navigate.
• W razie potrzeby użyj skryptu do klikania przycisków za pomocą poleceń clickAndWait i wypełniaj pola tekstowe za pomocą setValue. Do testowania aplikacji jednostronicowych w przypadku wszystkich kolejnych kroków należy używać poleceń clickAndWait zamiast navigate, ponieważ navigate ładuje cały proces, a nie lekką stronę wirtualną.
• Połącz różne kroki procesu analizy za pomocą combineSteps, aby uzyskać 1 ogólny raport z wynikami obejmującymi cały proces.

Taki skrypt może wyglądać tak:

combineSteps
navigate    https://www.store.google.com/landingpage
navigate    https://www.store.google.com/productpage
clickAndWait    innerText=Buy Now
navigate    https://www.store.google.com/basket
navigate    https://www.store.google.com/checkout

Mając taki skrypt, możesz łatwo mierzyć i porównywać skuteczność na przestrzeni czasu. Możesz to nawet zautomatyzować za pomocą interfejsu WebPageTest API.

Animator

Inną świetną opcją testowania skryptów jest Chrome bez interfejsu graficznego, którym można sterować za pomocą interfejsu Node API Puppeteer. Ogólnie rzecz biorąc, uruchom przeglądarkę za pomocą Puppeteer, przejdź do strony docelowej za pomocą funkcji goto, wstrzyknij kod JavaScript, aby wypełnić pola, lub kliknij przycisk i przejdź przez kolejne kroki ścieżki, wykonując kolejne czynności.

Jako dane możesz mierzyć czas trwania przepływu bezpośrednio, ale możesz też zsumować wartości FCP, FMP lub TTI dla poszczególnych wczytań przepływu. Informacje o tym, jak uzyskać dane o wydajności za pomocą aplikacji Puppeteer, znajdziesz w artykule Testowanie wydajności witryny za pomocą Puppeteer. Bardzo uproszczony przykładowy skrypt Node może wyglądać tak:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  const start = performance.now();
  await page.goto('https://www.store.google.com/landingpage');
  await page.goto('https://www.store.google.com/productpage');
  // click the buy button, which triggers overlay basket
  await page.click('#buy_btn');
  // wait until basket overlay is shown
  await page.waitFor('#close_btn');
  await page.goto('https://www.store.google.com/basket');
  await page.goto('https://www.store.google.com/checkout');
  console.log('Flow took ' + parseInt((performance.now() - start)/1000) + ' seconds');
  await browser.close();
})();

Skrypt ten można łatwo zautomatyzować lub nawet wpleść w proces tworzenia kampanii lub budżetów wydajności oraz być regularnie monitorowany.

Ponowne zaangażowanie

Użytkownicy wracają do Twojej witryny w różnych odstępach czasu. W zależności od upływu czasu przeglądarka może mieć w pamięci podręcznej mniej zasobów witryny, co oznacza, że potrzeba więcej żądań sieciowych. Utrudnia to oszacowanie różnic w skuteczności w przypadku wielokrotnych wizyt w ramach testów laboratoryjnych. Mimo to warto go śledzić. Świetnym narzędziem do testowania laboratoryjnego w przypadku powtarzających się wizyt jest strona WebPageTest, która ma specjalną opcję do bezpośrednich ponownych wizyt:

Webpagetest oferuje opcje testowania pierwszego wczytywania oraz ponownego wczytywania

Aby uzyskać więcej informacji o skuteczności powtórnych wizyt w danym miejscu, użyj wybranego pakietu analitycznego do segmentowania danych o skuteczności według typu użytkownika. Oto przykład takiego raportu w Google Analytics:

Raport niestandardowy Google Analytics może służyć do raportowania danych dotyczących szybkości w przypadku nowych i powracających użytkowników.

W raporcie tego typu znajdziesz informacje o czasie wczytywania strony zarówno w przypadku nowych, jak i powracających użytkowników.

Podsumowanie

Z tego przewodnika dowiesz się, jak mierzyć pierwsze obciążenie, przepływ i powtarzanie obciążenia za pomocą testów terenowych i laboracyjnych. Zadbaj o odpowiednią optymalizację poszczególnych kroków ścieżki, aby zmaksymalizować odkrywanie (pierwsze wczytywanie), zaangażowanie (nawigacje i przebieg ścieżki) oraz ponowne angażowanie (powtórne wczytywanie).