Data di pubblicazione: 28 gennaio 2025
Questo caso studio descrive in che modo Ray-Ban ha migliorato le metriche LCP utilizzando l'API Speculation Rules per velocizzare le future navigazioni degli utenti mediante il prerendering e in che modo questo ha migliorato il rendimento aziendale della piattaforma di e-commerce di Ray-Ban. Il successo di questa iniziativa ha incoraggiato Ray-Ban a valutare altre opzioni per migliorare in modo simile il rendimento, ad esempio rendere le pagine idonee per la bfcache.
Ray-Ban è un iconico brand di occhiali noto per i suoi stili intramontabili come Aviator e Wayfarer, che uniscono design classici a tendenze moderne. Ray-Ban è uno dei leader di fama mondiale nel settore dell'occhialeria e il suo canale di e-commerce svolge un ruolo fondamentale per garantire la competitività dell'azienda, attirando oltre 80 milioni di visitatori unici ogni anno.
In qualità di canale aziendale principale, Ray-Ban continua a migliorare l'esperienza utente della propria piattaforma di e-commerce e comprende l'importanza dei Core Web Vitals e il loro impatto diretto sull'esperienza utente della piattaforma.
L'approccio continuo di Ray-Ban per migliorare il percorso dell'utente critico
A causa della natura dell'architettura MPA (Multi-Page Application) utilizzata sulla piattaforma di e-commerce di Ray-Ban, ogni volta che un utente interagisce con un link o un pulsante che richiede una nuova pagina, il browser invia una richiesta di navigazione al server, che risponde con una nuova pagina HTML. Per Ray-Ban è quindi una sfida mantenere un'esperienza di navigazione fluida per gli utenti, in particolare nella pagina dei dettagli del prodotto (PDP), che è stata identificata come uno dei punti di contatto più utilizzati ed è una parte fondamentale della canalizzazione di conversione.
Grazie a una riprogettazione completata di recente, Ray-Ban ha registrato un miglioramento delle metriche Core Web Vitals. Tuttavia, c'è ancora spazio per miglioramenti, soprattutto nei casi in cui è necessario un uso esteso di librerie esterne per offrire un'esperienza utente interattiva, il che aumenta la metrica Largest Contentful Page (LCP) rispetto ad altre pagine.
Per questo motivo, Ray-Ban ha scelto di implementare il caricamento speculativo per migliorare il percorso dell'utente critico sul proprio sito. L'utilizzo delle regole di speculazione può essere una delle soluzioni più efficaci per ridurre la velocità di caricamento percepita delle pagine per le navigazioni future, in quanto precarica e pre-rende i contenuti delle pagine che l'utente visiterà successivamente.
Strategia di prerendering specifica per dispositivo di Ray-Ban
Ray-Ban ha adottato due strategie di prerendering distinte per tenere conto delle differenze di comportamento e risorse tra i computer e i dispositivi mobili. Queste strategie sono state progettate per massimizzare il rendimento senza compromettere le funzionalità esistenti del sito web o l'esperienza utente.
Sul computer, il prerendering viene eseguito passando il mouse sopra i riquadri dei prodotti nella pagina della scheda di prodotto, utilizzando l'impostazione di proattività "moderate" e passando come selettore una classe di identificazione degli stessi riquadri.
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);
Poiché l'evento hover non è effettivamente disponibile sui dispositivi mobili, il prerendering viene eseguito utilizzando un'impostazione di proattività immediate sui primi quattro riquadri, che sono stati trovati essere quelli su cui si sono registrati più clic.
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);
Prerendering dei risultati
Le due strategie di prerendering hanno avuto un impatto significativo sulle metriche Core Web Vitals per le pagine PDP di Ray-Ban e sulle tendenze per i KPI aziendali.
| Dispositivo | LCP | Variazione del tasso di conversione | Modifica del tasso di uscita | Tasso di prerendering | ||
|---|---|---|---|---|---|---|
| Prima | Dopo | Cambia | ||||
| Dispositivi mobili | 4,69 sec | 2,66 s | 43,28% | +101,47% | -13,25% | 29% |
| Desktop | 3,03 s | 1,74 s | 42,57% | +156,16% | -13,18% | 50% |
Le metriche aziendali degli utenti che navigavano nella PDP pubblicata dal server sono state confrontate con quelle degli utenti che navigavano nella PDP pre-renderizzata. Dopo aver raccolto i dati dallo spazio di lavoro di monitoraggio di Adobe per gli utenti con browser che supportano l'API (come Chrome), Ray-Ban ha rilevato miglioramenti significativi che dimostrano che gli utenti possono navigare nel sito più facilmente. Per gli altri browser, in cui il prerendering non è supportato, Ray-Ban ha deciso di eseguire il pre-caricamento delle risorse al momento dell'evento hover su computer e per i primi quattro riquadri della PLP sui dispositivi mobili.
L'implementazione dell'API Speculation Rules per il prerendering ha rivoluzionato la piattaforma di e-commerce di Ray-Ban. Grazie a queste strategie innovative, Ray-Ban ha registrato un miglioramento del 43% del LCP sia su computer che su dispositivi mobili, migliorando notevolmente l'esperienza utente.
Questa ottimizzazione non solo ha consentito caricamenti di pagine quasi istantanei, ma ha anche permesso di usufruire di molti dei vantaggi dell'architettura in stile SPA, mantenendo al contempo l'attuale architettura MPA, in particolare nelle pagine critiche come la pagina del prodotto dettagliata.
Dal punto di vista aziendale, i miglioramenti sono stati trasformativi, come confermato dai test A/B:
- Aumento dei tassi di conversione:
- I tassi di conversione da dispositivo mobile sulle schede di prodotto sono aumentati notevolmente del 101,47%.
- I tassi di conversione su computer hanno registrato un aumento ancora più significativo del 156,16%.
- Coinvolgimento degli utenti migliorato:
- Il numero medio di pagine visualizzate per sessione è aumentato del 51,95% sui dispositivi mobili e del 65,30% sui computer, a indicare una navigazione più fluida e un interesse degli utenti più duraturo. Nota: non abbiamo considerato come "visualizzate" le pagine pre-renderizzate che non sono state attivate.
- Tassi di uscita ridotti:
- I tassi di uscita (% di utenti che abbandonano una pagina rispetto alle visualizzazioni di pagina per quella pagina) sono diminuiti del 13,25% sui dispositivi mobili e del 13,18% sui computer, a dimostrazione di una maggiore fidelizzazione durante i momenti di acquisto critici.
Espansione per offrire una navigazione più istantanea agli utenti
Alla luce degli eccellenti risultati ottenuti dal prerendering delle PDP, Ray-Ban ha deciso di massimizzare ulteriormente il potenziale dell'API Speculation Rules prerendendo anche i link ai PLP nel menu. Questo approccio consente di migliorare notevolmente la velocità di caricamento, e quindi l'LCP, sia dei tipi di pagine di catalogo sia di quelle dei prodotti.
Sebbene il prerendering sia utile per le navigazioni future, Ray-Ban osserva anche una parte significativa di navigazione avanti e indietro tra PLP e PDP. Poiché i risultati dell'esperimento sul prerendering dimostrano che una navigazione ottimizzata degli utenti è direttamente correlata a buone metriche aziendali, Ray-Ban ha esaminato anche la cache di navigazione avanti/indietro (bfcache).
La cache bf è un'ottimizzazione del browser che consente di navigare avanti e indietro istantaneamente memorizzando in memoria uno snapshot delle pagine idonee nella cronologia del browser e ripristinandole senza passare attraverso la rete. Per assicurarci che le PDP e le PLP di Ray-Ban siano idonee per la bfcache, sono stati apportati diversi aggiornamenti rapidi:
- Disattiva l'evento
unloade limita l'accesso alle API Bluetooth e accelerometro del dispositivo utilizzando un valore dell'intestazionePermissions-Policypari aunload=(), bluetooth=(), andaccelerometer=(). - Chiudi le connessioni RTC e IndexedDB all'evento
pagehide. - Evita di utilizzare inutilmente l'intestazione di risposta
Cache-Control: no-store.
Il rilascio del supporto della cache bfcache nelle PLP in cui la navigazione avanti/indietro rappresentava fino al 40% del traffico, mentre il tasso di hit della cache bfcache era pari a 0, ha comportato un miglioramento del LCP di quasi il 30% e del CLS dell'83%.
| Metriche | 13-10-2024 > 09-11-2024 | 2024-11-24 > 2024-12-21 | Delta |
|---|---|---|---|
| LCP | 3725ms | 2674ms | -28,21% |
| INP | 521ms | 395ms | -24,18% |
| CLS | 0,46 | 0,08 | -82,61% |
| Percentuale di hit della cache back-forward | 0,02% | 72,90% | +72,87% |
Conclusione
Questi risultati illustrano il potenziale del prerendering per migliorare in modo significativo il rendimento di un sito di e-commerce. Eseguendo il prerendering delle pagine in base al comportamento degli utenti per le navigazioni future, Ray-Ban non solo ha migliorato i Core Web Vitals, ma ha anche migliorato il coinvolgimento degli utenti e aumentato le vendite. Questo vantaggio ha rafforzato l'impegno di Ray-Ban a garantire una navigazione fluida non solo per le navigazioni future, ma anche per quelle avanti/indietro fornite dalla cache bfcache.
Questo caso studio mette in evidenza come l'utilizzo di tecniche di prestazioni web moderne possa colmare il divario tra le metriche tecniche e i KPI aziendali, stabilendo un nuovo benchmark per l'esperienza utente e il successo dell'e-commerce.
Un ringraziamento speciale a Lorenzo Bartomioli, Gilberto Cocchi, Alejandro Baeza Redondo, Barry Pollard e Jeremy Wagner per il loro contributo a questo lavoro.