Mierząc wskaźniki internetowe rzeczywistych użytkowników, Rakuten 24 odkrył również, że dobre wyrenderowanie treści (LCP) może prowadzić do wzrostu współczynnika konwersji o 61,13%.
Rakuten 24 to sklep internetowy, który współpracuje zarówno z dużymi międzynarodowymi i krajowymi producentami towarów konsumpcyjnych, jak i oferuje szeroki wybór artykułów codziennego użytku, takich jak opieka zdrowotna, napoje, artykuły dla zwierząt, produkty dla dzieci i nie tylko. Zarządza nim Rakuten Group, Inc. – światowy lider w branży usług internetowych, a do tego należy do najlepszych firm na swojej platformie cyfrowej w Japonii.
Analizując wpływ szybkości działania strony na wygodę użytkowników, zespół Rakuten 24 stale mierzy, optymalizuje i monitoruje podstawowe wskaźniki internetowe i inne dane.
W efekcie ponad 75% użytkowników doświadcza dobrego wyrenderowania treści (LCP), opóźnienia przy pierwszym działaniu (FID) i pierwszego wyrenderowania treści (FCP). Nadal jednak pracują nad poprawami skumulowanego przesunięcia układu (CLS).
Po przeanalizowaniu danych strony głównej witryna Rakuten 24 stwierdziła, że dobry wynik LCP może prowadzić do:
- Wzrost współczynnika konwersji nawet o 61,13%.
- 26,09% przychodów na użytkownika.
- Średnia wartość zamówienia wyniosła 11,26%.
- Dobry wynik FID może prowadzić do wzrostu współczynnika konwersji nawet o 55,88%.
Aby jeszcze lepiej skorelować podstawowe wskaźniki internetowe i dane biznesowe, firma Rakuten 24 przeprowadziła też test A/B, który skupiał się na optymalizacji podstawowych wskaźników internetowych i powiązanych z nimi danych. Wyniki odnotowały poprawę:
- 53,37% przychodów na użytkownika.
- Współczynnik konwersji wynosi 33,13%.
- Średnia wartość zamówienia wyniosła 15,20%.
- 9,99% średniego czasu.
- spadek współczynnika wyjść o 35,12%.
Wyróżnij możliwość
Choć optymalizacja wydajności internetowej jest mądrą inwestycją w celu poprawy wrażeń użytkowników i rozwoju firmy, zespół Rakuten 24 rozumie, jak trudno może być przekonać zainteresowane osoby do wdrożenia podstawowych wskaźników internetowych i skoncentrowania się na wydajności witryny. Właściciele firm uważają, że pokazanie zainteresowanym zainteresowanym osobom dokładnie, jaka optymalizacja pod kątem skuteczności w zakresie zwrotu z inwestycji (ROI) może najlepiej pomóc im w osiągnięciu sukcesu.
Rakuten 24 to stosunkowo nowa i niezależna usługa, więc skorzystała z elastyczności, aby sprostać wyzwaniu. Wierzy oni, że wyniki studium przypadku pomogą im w przyszłości podejmować więcej decyzji na podstawie danych, a także pomogą innym deweloperom mierzyć wpływ ich pracy i przekonywać zainteresowanych, że zwiększenie skuteczności jest warte zainwestowania. Z tego posta dowiesz się, jak to zrobili.
![Przykładowe zrzuty ekranu ze strony głównej aplikacji Rakuten 24 z ramkami wokół urządzenia mobilnego.](https://web.dev/static/case-studies/rakuten/image/example-screenshots-raku-193c464c35da7.jpg?authuser=3&hl=pl)
Optymalizuj JavaScript i zasoby
- Wyeliminuj zasoby blokujące renderowanie.
- Podziel kod i użyj dynamicznej
import()
. - Podziel całą treść na osobne części i udostępnij pliki HTML w części strony widocznej po przewinięciu.
- uruchamiać i wczytywać JavaScript na żądanie;
- Zidentyfikuj wolne zasoby JavaScript i zoptymalizuj proces wczytywania, używając atrybutu asynchronicznego w tagach
<script>
i nawiązując wczesne połączenia z ważnymi źródłami (wskazówki dotyczące zasobów, takie jakdns-prefetch
,preconnect
ipreload
). - Usuń nieużywany kod oraz zminimaluj i skompresuj kod.
- Użyj sieci CDN.
- Kontroluj buforowanie za pomocą skryptu service worker za pomocą Workbox.
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 je i stosuj formaty obrazów odpowiednie do danego zadania (WebP, SVG, czcionki internetowe).
Optymalizuj CLS
- Użyj CSS
aspect-ratio
, aby zarezerwować wymagane miejsce na obrazy na czas wczytywania obrazów. - Użyj kodu CSS
min-height
, aby zminimalizować przesunięcia układu, gdy elementy są leniwie ładowane.
Pomiar skuteczności
Oprócz użycia narzędzia PageSpeed Insights do kontroli witryny zespół chciał też znaleźć lepszy sposób na poznawanie zachowań użytkowników w branży. Dlatego zespół Rakuten 24 zdecydował się na wykorzystanie biblioteki JavaScript Web-vitals do pomiaru podstawowych wskaźników internetowych i innych danych w terenie oraz przesyłania danych do wewnętrznego narzędzia analitycznego.
![Rakuten 24: proces integracji śledzenia funkcji Web Vitals. Pierwszym krokiem jest zintegrowanie biblioteki Web-vitals przez dodanie skryptu do witryny Rakuten 24. Następnie można mierzyć wskaźniki internetowe na podstawie rzeczywistych danych o użytkownikach, a dane są wysyłane do wewnętrznego narzędzia Rakuten 24 do zbierania danych.](https://web.dev/static/case-studies/rakuten/image/rakuten-24s-web-vitals-t-c0d353a93ae67.jpg?authuser=3&hl=pl)
Analiza skuteczności
Zespół przeanalizował zebrane dane, aby ustalić, czy istnieje korelacja między podstawowymi wskaźnikami internetowymi a kluczowymi danymi biznesowymi. Okazało się, że użytkownicy, którzy dokonali konwersji, mają zwykle lepszy LCP niż ci, którzy nie dokonali konwersji.
![Porównanie użytkowników, którzy dokonali konwersji, z tymi, którzy jej nie dokonali. W grupie użytkowników, którzy częściej dokonali konwersji, wskaźnik LCP był niższy.](https://web.dev/static/case-studies/rakuten/image/a-comparison-users-conv-c5d62d1600a03.jpg?authuser=3&hl=pl)
Zebrane dane pokazały też, że:
- Dobry LCP może prowadzić do wzrostu współczynnika konwersji nawet o 61,13%, przychodów na użytkownika o 26,09% i średniej wartości zamówienia o 11,26%.
- Dobry FID może prowadzić do wzrostu współczynnika konwersji nawet o 55,88% w porównaniu z ogólnymi średnimi danymi.
![LCP zgrupowane według współczynnika konwersji i czasu LCP. Użytkownicy, którzy częściej dokonali konwersji, gdy wskaźnik LCP był niższy, 61,13% użytkowników dokonało konwersji przy wskaźniku LCP wynoszącym 1 sekundę lub mniej.](https://web.dev/static/case-studies/rakuten/image/lcp-bucketed-conversion-62b775421189c.jpg?authuser=3&hl=pl)
![Wartość LCP jest zgrupowana według przychodów na użytkownika i czasu LCP. Użytkownicy o niższym wskaźniku LCP uzyskali większe przychody, a przychody na użytkownika zwiększyły się o 26,09%, gdy wartość LCP wynosiła 1 sekundę lub mniej.](https://web.dev/static/case-studies/rakuten/image/lcp-bucketed-revenue-per-cb892c5f24123.jpg?authuser=3&hl=pl)
![LCP zgrupowane według średniej wartości zamówienia i czasu LCP. Użytkownicy z niższym wskaźnikiem LCP uzyskali o 11,26% wyższą średnią wartość zamówienia, gdy wartość LCP wynosiła 1 sekundę lub mniej.](https://web.dev/static/case-studies/rakuten/image/lcp-bucketed-average-ord-f371f7233ed47.jpg?authuser=3&hl=pl)
![FID zgrupowane według współczynnika konwersji i czasu FID. Użytkownicy, którzy częściej dokonali konwersji, gdy wskaźnik FID był niższy, 55,88% użytkowników dokonało konwersji z wartością FID równą 50 milisekund lub mniejszą.](https://web.dev/static/case-studies/rakuten/image/fid-bucketed-conversion-0d43d40d194cf.jpg?authuser=3&hl=pl)
Monitorowanie wydajności
Zespół stworzył panel monitorowania wydajności, wykorzystując dane zebrane w terenie oraz narzędzie do analityki biznesowej. Jest to ważne, aby monitorować postępy i zapobiegać regresjom.
![Zrzut ekranu przedstawiający wewnętrzny panel monitorowania wydajności w Rakuten 24 dla każdego z podstawowych wskaźników internetowych (LCP, CLS i FID).](https://web.dev/static/case-studies/rakuten/image/a-screenshot-rakuten-24-30bf38d4bb335.jpg?authuser=3&hl=pl)
Test A/B
Uznał, że testy A/B to dobry sposób na zmierzenie wpływu optymalizacji wydajności na firmę, dlatego zespół zoptymalizował jedną ze stron docelowych pod kątem podstawowych wskaźników internetowych, a potem przez miesiąc porównał wersję zoptymalizowaną ze stroną oryginalną za pomocą testu A/B. Wybrała stronę docelową o dużym natężeniu ruchu i dużej liczbie konwersji, aby test mógł uzyskać miarodajne wyniki. W trakcie trwania testu 50% ruchu było kierowane na optymalizowaną stronę docelową (wersja A), a 50% na stronę oryginalną (wersja B). Jedyną różnicą między wersją A a wersją B było to, że została zoptymalizowana pod kątem podstawowych wskaźników internetowych i nie ma żadnych innych różnic funkcjonalnych ani wizualnych.
![Zrzut ekranu przedstawiający test A/B na urządzeniu mobilnym na stronie Rakuten 24. Wszystkie wersje były takie same wizualnie i funkcjonalnie, a wersja A była zoptymalizowana pod kątem lepszych podstawowych wskaźników internetowych.](https://web.dev/static/case-studies/rakuten/image/a-screenshot-a-mobile-b-23694e6702f81.jpg?authuser=3&hl=pl)
Zoptymalizowana wersja A wczytywała się o 0,4 sekundy wcześniej w teście wczytywania na urządzeniach mobilnych i nie wykazała znaczącego przesunięcia układu. Wartość CLS w wersji A poprawiła się o 92, 72% w porównaniu z wersją B. Inne wskaźniki internetowe również poprawiły się: FID poprawił się o 7,95%, FCP poprawił się o 8,45%, a TTFB poprawił się o 18,03%.
![Porównanie strony głównej Rakuten 24 po uruchomieniu. Wersja A jest zoptymalizowana pod kątem szybszego wczytywania w ciągu 1,6 sekundy (w porównaniu z wersją B, która wczytuje się w 2 sekundy).](https://web.dev/static/case-studies/rakuten/image/a-startup-comparison-the-a6e5d93ff742f.jpg?authuser=3&hl=pl)
Porównując wersję zoptymalizowaną A i niezoptymalizowaną w wersji B, Rakuten 24 stwierdził, że wersja A oferuje:
- 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 korzystania z aplikacji o 9,99%.
- 35,12% mniej współczynnika wyjść.
![Zrzut ekranu przedstawiający ulepszenia podstawowych wskaźników internetowych na stronie głównej Rakuten 24. Statystyki wskazują wzrost przychodów na użytkownika o 53,37%, wzrost współczynnika konwersji o 33,13%, wzrost średniej wartości zamówienia o 15,2%, wzrost średniego czasu spędzanego na stronach o 9,99% oraz spadek współczynnika wyjść o 35,12%.](https://web.dev/static/case-studies/rakuten/image/a-screenshot-core-web-vi-5494c342b0223.jpg?authuser=3&hl=pl)
Podsumowanie
Optymalizacja wydajności witryny jest trudna, ale daje satysfakcję. Podejście oparte na danych pozwoliło firmie Rakuten 24 zwiększyć wygodę użytkowników i zmierzyć jej pozytywny wpływ na firmę. Wie, że to tylko część podróży, a nie cel podróży, dlatego będą nadal ulepszać witrynę, aby zapewnić klientom większą wygodę zakupów.
Optymalizacja wymaga wspólnego działania, a deweloperzy nie muszą być na tym etapie sami. Rakuten 24 opowiada o swoich problemach i osiągnięciach, ma nadzieję, że więcej deweloperów będzie mogło korzystać z danych podstawowych wskaźników internetowych, aby porozumieć się z innymi zainteresowanymi osobami, a następnie wspólnie pracować na rzecz zwiększania wygody użytkowników i rozwoju firmy.