Na podstawie pomiarów podstawowych wskaźników internetowych rzeczywistych użytkowników Rakuten 24 odkrył też, że dobre największe wyrenderowanie treści (LCP) może zwiększyć współczynnik konwersji o 61,13%.
Rakuten 24 to sklep internetowy, który współpracuje z głównymi międzynarodowymi i krajowymi producentami dóbr konsumpcyjnych, aby oferować szeroką gamę produktów codziennego użytku, w tym artykuły medyczne, napoje, akcesoria dla zwierząt i produkty dla dzieci. Sklep jest prowadzony przez Rakuten Group, Inc., firmę będącą światowym liderem w zakresie usług internetowych, która należy do najskuteczniejszych sprzedawców na platformie cyfrowego marketplace w Japonii.
Zespół Rakuten 24 wie, jak duży wpływ na wrażenia użytkowników ma wydajność witryny, dlatego stale mierzy, optymalizuje i monitoruje podstawowe wskaźniki internetowe oraz inne dane.
W rezultacie ponad 75% użytkowników ma dobre wyniki w przypadku wskaźników Largest Contentful Paint (LCP), First Input Delay (FID) i First Contentful Paint (FCP). Nadal jednak pracują nad ulepszaniem skumulowanego przesunięcia układu (CLS).
Po przeanalizowaniu danych dotyczących strony głównej firma Rakuten 24 odkryła, że dobry wynik LCP może prowadzić do:
- Wzrost współczynnika konwersji o nawet 61,13%.
- 26,09% przychodów na użytkownika.
- 11,26% w średniej wartości zamówienia.
- Dobry wynik FID może zwiększyć współczynnik konwersji nawet o 55,88%.
Aby jeszcze bardziej powiązać podstawowe wskaźniki internetowe z danymi biznesowymi, Rakuten 24 przeprowadził też test A/B skupiony na optymalizacji podstawowych wskaźników internetowych i powiązanych z nimi danych. W efekcie udało się poprawić:
- 53,37% przychodów na użytkownika.
- Współczynnik konwersji wzrósł o 33,13%.
- 15,20% średniej wartości zamówienia.
- 9,99% średniego czasu spędzonego na stronie.
- spadek współczynnika wyjścia o 35,12%.
Wyróżnienie możliwości
Chociaż optymalizacja wydajności witryny to dobra inwestycja w poprawy wrażeń użytkowników i rozwój firmy, zespół Rakuten 24 zdaje sobie sprawę, jak trudno jest przekonać zainteresowane strony do przyjęcia podstawowych wskaźników internetowych i skupienia się na wydajności witryny. Uważają, że najlepszym sposobem na przekonanie interesariuszy do współpracy jest pokazanie im, jaki zwrot z inwestycji (ROI) może przynieść optymalizacja skuteczności.
Jako stosunkowo nowa i niezależna usługa Rakuten 24 wykorzystała swoją elastyczność, aby sprostać temu wyzwaniu. Uważają, że wyniki ich case study pomogą im w przyszłości podejmować bardziej oparte na danych decyzje, a także pomogą innym deweloperom mierzyć wpływ ich pracy i przekonać interesariuszy, że warto inwestować w polepszenie wydajności. W tym poście dowiesz się, jak to zrobili.
Optymalizacja JavaScriptu i zasobów
- Wyeliminuj zasoby blokujące renderowanie.
- Podziel kod i użyj kodu dynamicznego
import(). - Podziel całą treść na osobne części i wykorzystaj funkcję ładowania opóźnionego w przypadku plików HTML poniżej pola.
- Wykonywanie i wczytywanie kodu JavaScript na żądanie.
- Wykrywanie wolno wczytujących się zasobów JavaScript i optymalizowanie procesu wczytywania za pomocą atrybutu async w tagach
<script>oraz nawiązywanie wczesnych połączeń z ważnymi źródłami (wskazówki dotyczące zasobów, takie jakdns-prefetch,preconnectipreload). - Usuń nieużywany kod oraz zmniejsz i skompresuj kod.
- Użyj usługi CDN.
- Zarządzaj buforowaniem za pomocą Service Workera za pomocą Workboxa.
Zoptymalizuj obrazy
- Leniwe ładowanie obrazów w części strony widocznej po przewinięciu.
- Optymalizuj obrazy za pomocą sieci CDN, dostarczaj obrazy o odpowiednich rozmiarach, kompresuj obrazy i wybieraj odpowiednie formaty obrazów (WebP, SVG, czcionki internetowe).
Optymalizacja CLS
- Użyj CSS
aspect-ratio, aby zarezerwować wymaganą przestrzeń na obrazy podczas ich wczytywania. - Aby zminimalizować przesunięcia układu podczas ładowania opóźnionego elementów, użyj atrybutu CSS
min-height.
Pomiar skuteczności
Oprócz sprawdzania witryny za pomocą PageSpeed Insights zespół chciał znaleźć lepszy sposób na poznanie rzeczywistych wrażeń użytkowników. Dlatego Rakuten 24 zdecydował się użyć biblioteki JavaScripta web-vitals do pomiaru podstawowych wskaźników internetowych i innych danych na potrzeby pomiarów na poziomie pola oraz do wysyłania danych do wewnętrznego narzędzia analitycznego.
Analiza skuteczności
Zespół przeanalizował zebrane dane, aby sprawdzić, czy istnieje jakakolwiek korelacja między podstawowymi wskaźnikami internetowymi a kluczowymi danymi biznesowymi. Okazało się, że użytkownicy, którzy dokonali konwersji, mają zwykle krótszy czas LCP niż użytkownicy, którzy nie dokonali konwersji.
Zgromadzone dane ujawniły też, że:
- Dobry wynik LCP może prowadzić do wzrostu współczynnika konwersji nawet o 61,13%, przychodów na wizytację o 26,09% i średniej wartości zamówienia o 11,26%.
- Dobry wskaźnik FID może zwiększyć współczynnik konwersji nawet o 55,88% w porównaniu ze średnimi danymi ogólnymi.
Monitorowanie wydajności
Zespół utworzył panel monitorowania skuteczności, korzystając z danych zebranych w polu i z narzędzia do analityki biznesowej. Jest to ważne, aby monitorować postępy i zapobiegać regresji.
Test A/B
Uważamy, że testy A/B są dobrym sposobem na pomiar wpływu optymalizacji wydajności na wyniki biznesowe. Dlatego zoptymalizowaliśmy jedną ze stron docelowych pod kątem wskaźników Core Web Vitals, a potem przez miesiąc porównywaliśmy jej zoptymalizowaną wersję z oryginalną za pomocą testu A/B. Wybrali stronę docelową z dużą liczbą wizyt i konwersji, aby uzyskać miarodajne wyniki. Podczas trwania testu 50% ruchu było kierowane na zoptymalizowaną stronę docelową (wersja A), a 50% na pierwotną stronę (wersja B). Jedyną różnicą między wersją A a wersją B było to, że wersja A została zoptymalizowana pod kątem podstawowych wskaźników internetowych. Nie było żadnych innych różnic funkcjonalnych ani wizualnych.
W teście wczytywania na urządzeniu mobilnym zoptymalizowana wersja A wczytała się o 0,4 sekundy szybciej i nie wykazała żadnych znaczących zmian układu. W rzeczywistości CLS wersji A wzrósł o 92, 72% w porównaniu z wersją B. Poprawiły się też inne wartości podstawowych wskaźników internetowych: FID – o 7,95%, FCP – o 8,45% i TTFB – o 18,03%.
Porównując zoptymalizowaną wersję A z niezoptymalizowaną wersją B, Rakuten 24 stwierdził, że wersja A zapewnia:
- Wzrost przychodów na użytkownika o 53,37%.
- Wzrost współczynnika konwersji o 33,13%.
- Wzrost średniej wartości zamówienia o 15,20%.
- wzrost średniego czasu spędzonego na stronie o 9,99%.
- zmniejszenie współczynnika wyjścia o 35,12%.
Podsumowanie
Optymalizacja wydajności witryny jest trudna, ale opłacalna. Dzięki podejściu opartym na danych Rakuten 24 poprawił wrażenia użytkowników i zmierzył pozytywny wpływ na swoją firmę. Wiedząc, że to dopiero początek, a nie koniec, będą nadal ulepszać swoją witrynę, aby zapewnić kupującym lepsze wrażenia.
Optymalizacja wymaga wspólnego wysiłku, a programiści nie muszą być sami na tej drodze. Udostępniając informacje o swoich problemach i osiągnięciach, firma Rakuten 24 ma nadzieję, że więcej deweloperów będzie używać danych podstawowych wskaźników internetowych, aby wspólnie z zainteresowanymi stronami pracować nad zapewnieniem wysokiej jakości wrażeń użytkowników i rozwojem firmy.