Data publikacji: 28 stycznia 2025 r.
W tym opracowaniu omówiono, jak Ray-Ban poprawił swoje wyniki w przypadku wskaźnika LCP, korzystając z interfejsu Speculation Rules API do przyspieszania przyszłych nawigacji użytkowników za pomocą prerenderowania. Omówiono też, jak wpłynęło to na wyniki biznesowe platformy e-commerce Ray-Ban. Sukces tej strategii zachęcił Ray-Ban do poszukiwania innych opcji, które mogłyby w podobny sposób poprawić skuteczność, np. dostosowania stron do obsługi pamięci podręcznej.
Ray-Ban to kultowa marka okularów, znana z ponadczasowych modeli, takich jak Aviator i Wayfarer, łączących klasyczne wzornictwo z nowoczesnymi trendami. Ray-Ban to jeden z wiodących producentów okularów. Jego kanał e-commerce odgrywa kluczową rolę w zapewnieniu konkurencyjności firmy, przyciągając ponad 80 milionów unikalnych użytkowników rocznie.
Ray-Ban, który jest kluczowym kanałem biznesowym, stale ulepsza platformę e-commerce i zdaje sobie sprawę z znaczenia podstawowych wskaźników internetowych oraz ich bezpośredniego wpływu na wrażenia użytkowników.
Nieustanne ulepszanie kluczowych ścieżek użytkowników przez Ray-Ban
Ze względu na charakter architektury MPA (aplikacji wielostronicowej) używanej na platformie e-commerce Ray-Ban, za każdym razem, gdy użytkownik klika link lub przycisk, który wymaga przejścia na nową stronę, przeglądarka wysyła do serwera żądanie nawigacyjne, a serwer odpowiada nową stroną HTML. To powoduje, że Ray-Ban ma problemy z zapewnieniem płynnego przeglądania przez użytkowników, zwłaszcza na stronie z informacjami o produkcie (PDP), która została uznana za jeden z najczęściej używanych punktów wejścia i jest kluczowym elementem ścieżki konwersji.
Dzięki niedawno przeprowadzonej zmianie projektu Ray-Ban poprawił swoje dane podstawowe wskaźniki internetowe. Nadal jednak jest miejsce na poprawę, zwłaszcza w przypadku, gdy interakcja z użytkownikiem wymaga częstego korzystania z bibliotek zewnętrznych, co zwiększa dane dotyczące największej strony z treściami (LCP) w porównaniu z innymi stronami.
Z tego powodu Ray-Ban zdecydował się wdrożyć spekulacyjne wczytywanie, aby poprawić kluczową ścieżkę użytkownika w witrynie. Reguły spekulacyjne mogą być jednym z najskuteczniejszych sposobów na zmniejszenie odczuwanej szybkości wczytywania strony podczas kolejnych wizyt, ponieważ umożliwiają pobieranie i wstępne renderowanie treści stron, które użytkownik odwiedzi w następnej kolejności.
Strategia wstępnego renderowania firmy Ray-Ban na podstawie urządzenia
Ray-Ban zastosował 2 osobne strategie prerenderowania, aby uwzględnić różnice w zachowaniu i zasobach między komputerami a urządzeniami mobilnymi. Te strategie zostały opracowane w celu maksymalizacji skuteczności bez wpływu na dotychczasowe funkcje witryny ani wygodę użytkowników.
Na komputerach stacjonarnych prerenderowanie jest wykonywane przez najechanie kursorem na kafelki produktów na stronie z informacjami o produkcie (PLP) przy użyciu ustawienia "moderate" i przekazanie jako selektor klasy identyfikacyjnej tych samych kafelków.
let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');
scriptPrerender.innerHTML = `{
"prerender": [
{
"source": "document",
"where": {
"and": [
{
"selector_matches": "a.rb-plp-product-tile__container"
}
]
},
"eagerness": "moderate"
}
]
}`;
document.head.appendChild(scriptPrerender);
Ponieważ zdarzenie hover jest w praktyce niedostępne na urządzeniach mobilnych, prerenderowanie jest wykonywane przy użyciu ustawienia immediate na pierwszych 4 płytkach, które okazały się najczęściej klikane.
let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');
scriptPrerender.innerHTML = `{
"prerender": [
{
"source": "document",
"where": {
"and": [
{
"selector_matches": "a.rb-plp-product-tile__container:nth-child(-n+5)"
}
]
},
"eagerness": "immediate"
}
]
}`;
document.head.appendChild(scriptPrerender);
Wyniki renderowania wstępnego
Dwie strategie prerenderowania miały znaczący wpływ na dane podstawowych wskaźników internetowych na stronach z produktami Ray-Ban oraz na trendy dotyczące wskaźników KPI firmy.
| Urządzenie | LCP | Zmiana współczynnika konwersji | Zmiana współczynnika wyjść | Szybkość prerenderowania | ||
|---|---|---|---|---|---|---|
| Przed | Po | Zmień | ||||
| Urządzenia mobilne | 4,69 s | 2,66 s | 43,28% | +101,47% | -13,25% | 29% |
| Komputer | 3,03 s | 1,74 s | 42,57% | +156,16% | -13,18% | 50% |
Dane biznesowe użytkowników przeglądających stronę PDP serwowaną przez serwer porównano z danymi użytkowników przeglądających stronę PDP z renderowaniem wstępnym. Po zebraniu danych z platformy do śledzenia Adobe w przypadku użytkowników z przeglądarkami obsługującymi interfejs API (np. Chrome) Ray-Ban zauważył znaczne ulepszenia, które wskazują, że użytkownicy mogą łatwiej poruszać się po witrynie. W przypadku innych przeglądarek, w których wstępna renderyzacja nie jest obsługiwana, firma Ray-Ban zdecydowała się na wstępną alokację zasobów w momencie zdarzenia hover na komputerach stacjonarnych oraz w przypadku pierwszych 4 płytek PLP na urządzeniach mobilnych.
Wdrożenie interfejsu Speculation Rules API do wstępnego renderowania zmieniło zasady gry na platformie e-commerce Ray-Ban. Dzięki tym innowacyjnym strategiom Ray-Ban poprawił wskaźnik LCP o 43% na komputerach i na urządzeniach mobilnych, co znacznie poprawiło wrażenia użytkowników.
Ta optymalizacja nie tylko zapewniała niemal natychmiastowe wczytywanie stron, ale też umożliwiała korzystanie z wielu zalet architektury typu SPA przy zachowaniu obecnej architektury MPA, zwłaszcza na stronach krytycznych, takich jak strona produktu.
Zmiany te miały przełomowe znaczenie dla firmy, co potwierdzają testy A/B:
- Wyższe współczynniki konwersji:
- Współczynniki konwersji na stronach produktów na urządzeniach mobilnych wzrosły o 101,47%.
- Współczynniki konwersji na komputerach wzrosły jeszcze bardziej – aż o 156,16%.
- Zwiększone zaangażowanie użytkowników:
- Liczba stron wyświetlanych na sesję wzrosła o 51,95% na urządzeniach mobilnych i o 65,30% na komputerach, co wskazuje na płynniejszą nawigację i dłuższe utrzymywanie zainteresowania użytkowników. Uwaga: nie uwzględniliśmy stron z przedrenderowaniem, które nie zostały aktywowane, jako „wyświetlonych”.
- Obniżka współczynnika wyjść:
- Wskaźnik odrzuceń (odsetek użytkowników, którzy opuszczają stronę w stosunku do liczby wyświetleń tej strony) zmniejszył się o 13,25% na urządzeniach mobilnych i o 13,18% na komputerach, co wskazuje na większą retencję w krytycznych momentach zakupowych.
Rozszerzenie, aby zapewnić użytkownikom szybszą nawigację
Ze względu na znakomite wyniki uzyskane dzięki prerenderowaniu stron z produktami, firma Ray-Ban postanowiła jeszcze bardziej wykorzystać potencjał interfejsu Speculation Rules API, wykonując również prerenderowanie linków do stron z produktami w menu. Dzięki temu podejściu można znacznie przyspieszyć wczytywanie (a tym samym LCP) zarówno stron typu katalog, jak i stron typu produkt.
Chociaż prerenderowanie ułatwia nawigację w przyszłości, Ray-Ban obserwuje też znaczną część nawigacji między PLP a PDP. Z wyników eksperymentu dotyczącego wstępnego renderowania wynika, że zoptymalizowana nawigacja użytkownika ma bezpośredni wpływ na dobre wyniki biznesowe, dlatego Ray-Ban przyjrzała się też buforowi wstecznemu i do przodu (bfcache).
Pamięć podręczna stanu strony internetowej to rodzaj optymalizacji przeglądarki, która umożliwia błyskawiczną nawigację w obu kierunkach. Polega ona na przechowywaniu w pamięci kopii odpowiednich stron w historii przeglądarki i przywracaniu ich bez korzystania z sieci. Aby zapewnić, że strony produktów i listy produktów Ray-Ban kwalifikują się do bfcache, wprowadziliśmy kilka szybkich zmian:
- Wyłącz zdarzenie
unloadi ogranicz dostęp do interfejsów API Bluetooth i akcelerometra urządzenia, używając wartości nagłówkaPermissions-Policyunload=(), bluetooth=(), andaccelerometer=(). - Zamknij połączenia RTC i IndexedDB w zdarzeniach
pagehide. - Unikaj niepotrzebnego używania nagłówka odpowiedzi
Cache-Control: no-store.
Włączenie obsługi pamięci podręcznej stanu strony internetowej na stronach PLP, na których nawigacja wstecz i wprzód odpowiadała za nawet 40% ruchu, a współczynnik trafień do pamięci podręcznej stanu strony internetowej wynosił 0, spowodowało prawie 30-procentową poprawę LCP i 83-procentową poprawę CLS.
| Dane | 2024-10-13 > 2024-11-9 | 2024-11-24 > 2024-12-21 | Delta |
|---|---|---|---|
| LCP | 3725 ms | 2674 ms | -28,21% |
| INP | 521 ms | 395 ms | -24,18% |
| CLS | 0,46 | 0,08 | -82,61% |
| Współczynnik trafień w pamięci podręcznej stanu strony internetowej | 0,02% | 72,90% | +72,87 pp |
Podsumowanie
Te wyniki pokazują, jak bardzo prerenderowanie może poprawić skuteczność witryny e-commerce. Dzięki prerenderowaniu stron na podstawie zachowań użytkowników na potrzeby przyszłych sesji nawigacji firma Ray-Ban nie tylko poprawiła podstawowe wskaźniki internetowe, ale też zwiększyła zaangażowanie użytkowników i sprzedaż. Ta korzyść wzmocniła zaangażowanie Ray-Ban w zapewnienie płynnej nawigacji nie tylko w przyszłości, ale też w przypadku nawigacji w obrocie do tyłu i do przodu, którą zapewnia bfcache.
W tym opracowaniu omawiamy, jak stosowanie nowoczesnych technik poprawiania wydajności witryny może zapełnić lukę między danymi technicznymi a wskaźnikami KPI biznesowych, wyznaczając nowy punkt odniesienia dla wygody użytkowników i sukcesu w zakresie e-commerce.
Specjalne podziękowania dla Lorenzo Bartomioli, Gilberto Cocchi, Alejandro Baeza Redondo, Barry Pollard i Jeremy Wagner za ich wkład w tworzenie tej publikacji.