Come l'investimento di Rakuten 24 in Core Web Vitals ha aumentato le entrate per visitatore del 53,37% e il tasso di conversione del 33,13%

Misurando i Segnali web di utenti reali, Rakuten 24 ha anche scoperto che una buona combinazione di Largest Contentful Paint (LCP) può portare a un aumento del tasso di conversione del 61,13%.

Hayoung Lee

Linh Duong

Ryunosuke Akiba

Shogo Kashiwase

Rakuten 24 è un negozio online che collabora con i principali produttori di beni di consumo nazionali e multinazionali per offrire una grande varietà di beni di prima necessità, tra cui sanità, bevande, articoli per animali, prodotti per l'infanzia e altro ancora. Questo negozio è fornito da Rakuten Group, Inc., leader globale nei servizi internet, ed è tra i migliori performer sulla sua piattaforma di marketplace digitale in Giappone.

Comprensione dell'impatto delle prestazioni web sull'esperienza utente, il team di Rakuten 24 ha continuato a misurare, ottimizzare e monitorare i Segnali web essenziali e altre metriche.

Il risultato è che oltre il 75% dei suoi utenti riscontra una visualizzazione positiva di Largest Contentful Paint (LCP), First Input Delay (FID) e First Contentful Paint (FCP). Tuttavia, stanno ancora lavorando ai miglioramenti Cumulative Layout Shift (CLS).

Dopo aver analizzato i dati della home page, Rakuten 24 ha scoperto che un buon punteggio LCP può portare a:

Un aumento fino al 61,13% del tasso di conversione.
il 26,09% di entrate per visitatore.
11,26% del valore medio dell'ordine.
Un buon punteggio FID può portare a un aumento fino al 55,88% del tasso di conversione.

Per correlare ulteriormente i Segnali web essenziali e le metriche aziendali, Rakuten 24 ha anche eseguito un test A/B incentrato sull'ottimizzazione dei Segnali web essenziali e delle metriche correlate, riscontrando un miglioramento di:

il 53,37% di entrate per visitatore.
il 33,13% del tasso di conversione.
15,20% del valore medio dell'ordine.
9,99% di tempo medio trascorso.
Una riduzione del 35,12% del tasso di uscita.

Metti in evidenza l'opportunità

Sebbene l'ottimizzazione delle prestazioni web sia un investimento intelligente per migliorare l'esperienza utente e la crescita dell'attività, il team di Rakuten 24 capisce quanto possa essere difficile convincere gli stakeholder ad adottare Core Web Vitals e concentrarsi sulle prestazioni web. Il modo migliore per convincerli è mostrare agli stakeholder il tipo esatto di ottimizzazione del rendimento in termini di ritorno sull'investimento (ROI).

Essendo un servizio relativamente nuovo e indipendente, Rakuten 24 ha sfruttato il vantaggio della flessibilità per affrontare la sfida. Ritengono che il risultato del loro case study li aiuterebbe a prendere decisioni più orientate ai dati in futuro, oltre ad aiutare altri sviluppatori a misurare l'impatto del loro lavoro e a convincere i loro stakeholder che il miglioramento delle prestazioni vale l'investimento. Scopri come ci sono riusciti in questo post.

Screenshot di esempio della home page di Rakuten 24, con frame di dispositivi mobili intorno a ogni screenshot. — Alcuni screenshot di esempio della home page di Rakuten 24.

Ottimizza JavaScript e le risorse

Elimina le risorse che bloccano la visualizzazione.
Suddividi il codice e utilizza import().
Suddividi tutti i contenuti in parti separate e carica i file HTML below the fold tramite caricamento lento.
Esegui e carica JavaScript on demand.
Identifica le risorse JavaScript lente e ottimizza il processo di caricamento utilizzando l'attributo asincrono sui tag <script> e stabilendo prima connessioni a origini importanti (suggerimenti di risorse come dns-prefetch, preconnect e preload).
Rimuovi il codice inutilizzato e minimizza e comprimi il codice.
Utilizza una rete CDN.
Controlla la memorizzazione nella cache utilizzando Service Worker con Workbox.

Ottimizza immagini

Caricamento lento delle immagini below the fold.
Ottimizza le immagini con una rete CDN, pubblica immagini delle dimensioni corrette, comprimile e adotta i formati delle immagini giusti per il lavoro (WebP, SVG, caratteri web).

CLS di Optimize

Utilizza il CSS aspect-ratio per prenotare lo spazio richiesto per le immagini durante il caricamento delle immagini.
Utilizza il CSS min-height per ridurre al minimo le variazioni del layout quando gli elementi vengono caricati tramite caricamento lento.

Misurazione del rendimento

Oltre a utilizzare PageSpeed Insights per verificare il sito web, il team voleva trovare un modo migliore per conoscere ciò che gli utenti stanno effettivamente incontrando sul campo. Pertanto, Rakuten 24 ha deciso di utilizzare la libreria JavaScript degli eventi web per misurare Segnali web essenziali e altre metriche sul campo, nonché inviare i dati allo strumento di analisi interno.

Flusso di integrazione del monitoraggio dei Web Vitals di Rakuten 24. Il primo passaggio consiste nell’integrazione della libreria degli elementi vitali web aggiungendo lo script al sito web di Rakuten 24. Dopodiché, è possibile misurare i Web Vitals da metriche utente reali e i dati vengono inviati allo strumento di raccolta dati interno di Rakuten 24.

Analisi del rendimento

Il team ha analizzato i dati sul campo raccolti per determinare se esiste una correlazione tra i Segnali web essenziali e le metriche aziendali chiave. L'azienda ha scoperto che gli utenti che effettuano una conversione tendono a registrare un LCP migliore rispetto a quelli che non hanno effettuato la conversione.

Un confronto tra utenti che hanno effettuato una conversione e utenti che non hanno effettuato la conversione tramite LCP. Il gruppo di utenti che ha effettuato la conversione con maggiore frequenza ha riscontrato un LCP inferiore.

I dati raccolti hanno rivelato anche che:

Una buona metrica LCP può determinare un aumento fino al 61,13% del tasso di conversione, del 26,09% delle entrate per visitatore e dell'11,26% del valore medio dell'ordine.
Un valore FID efficace può determinare un aumento fino al 55,88% del tasso di conversione rispetto alla media complessiva dei dati.

Bucket LCP in base al tasso di conversione e all'ora LCP. Gli utenti che hanno effettuato conversioni più frequentemente hanno effettuato una conversione quando il valore LCP era inferiore, con il 61,13% degli utenti che effettuano una conversione con un LCP di un secondo o inferiore. — L'impatto della metrica LCP sul tasso di conversione.

Bucket LCP in base alle entrate per visitatore e al tempo LCP. Gli utenti con un valore LCP inferiore hanno generato maggiori entrate, con un aumento delle entrate del 26,09% per utente quando il valore LCP era inferiore a un secondo. — L'impatto della metrica LCP sulle entrate per visitatore.

Bucket LCP in base al valore medio dell'ordine e al tempo LCP. Gli utenti con un valore LCP inferiore hanno registrato un valore medio dell'ordine superiore dell'11,26%, mentre il valore LCP era pari o inferiore a un secondo. — L'impatto della metrica LCP sul valore medio degli ordini.

FID con bucket in base al tasso di conversione e all'ora FID. Gli utenti che hanno effettuato una conversione più frequentemente effettuano una conversione quando il FID era inferiore, con il 55,88% degli utenti che effettuano una conversione con un FID di 50 millisecondi o inferiore. — L'impatto del FID sul tasso di conversione.

Monitoraggio delle prestazioni

Il team ha creato una dashboard di monitoraggio delle prestazioni utilizzando i dati raccolti sul campo e lo strumento di business intelligence. Ciò è importante per monitorare l'avanzamento e prevenire le regressioni.

Test A/B

Ritenendo che i test A/B siano un buon modo per misurare l'impatto commerciale delle ottimizzazioni delle prestazioni, il team ha ottimizzato una delle pagine di destinazione per i Segnali web essenziali, quindi ha confrontato la versione ottimizzata con la pagina originale tramite test A/B per un mese. Ha scelto una pagina di destinazione con un volume di traffico e conversioni significativi, in modo che il test potesse ottenere risultati significativi. Durante la durata del test, il 50% del traffico è stato inviato alla pagina di destinazione ottimizzata (versione A) e il 50% alla pagina originale (versione B). L'unica differenza tra la versione A e la versione B era che la versione A era ottimizzata per Core Web Vitals e non c'erano altre differenze funzionali o visive.

La versione ottimizzata A ha terminato il caricamento con 0,4 secondi di anticipo nel test di carico sui dispositivi mobili e non mostra variazioni significative del layout. In effetti, il CLS della versione A è migliorato del 92,72% rispetto alla versione B. Sono stati migliorati anche altri punteggi di Segnali web: FID migliorato del 7,95%, FCP migliorato dell'8,45% e TTFB migliorato del 18,03%.

Un confronto tra le startup della home page di Rakuten 24. La versione A è ottimizzata per un caricamento migliore, in quanto si carica in 1, 6 secondi rispetto alla versione B, che si carica in 2 secondi. — Risultato del test di carico su dispositivi mobili della versione A e della versione B.

Confrontando la versione ottimizzata A con la versione non ottimizzata B, Rakuten 24 ha scoperto che la versione A offre:

Aumento delle entrate per visitatore pari al 53,37%.
33,13% di aumento del tasso di conversione.
Aumento del 15,20% del valore medio dell'ordine.
Aumento del 9,99% del tempo medio trascorso.
35,12% di riduzione del tasso di uscita.

Uno screenshot dei miglioramenti di Core Web Vitals per la home page di Rakuten 24. Le statistiche indicano un aumento del 53,37% delle entrate per visitatore, un aumento del 33,13% del tasso di conversione, un aumento del 15,2% del valore medio dell'ordine, un aumento del 9,99% del tempo medio trascorso sulle pagine e una riduzione del tasso di uscita del 35,12%.

Conclusione

L'ottimizzazione del rendimento sul web è impegnativa ma gratificante. Adottando un approccio basato sui dati, Rakuten 24 è riuscita a migliorare l'esperienza utente e a misurare un impatto positivo sulla propria attività. Sapendo che questa è solo una parte del percorso e non la destinazione, l'azienda continuerà a migliorare il sito web per offrire agli acquirenti online esperienze più piacevoli.

L'ottimizzazione richiede uno sforzo congiunto e gli sviluppatori non devono essere soli in questo percorso. Condividendo le difficoltà incontrate e i traguardi raggiunti, Rakuten 24 si augura che un maggior numero di sviluppatori possa utilizzare i dati dei Segnali web essenziali per sviluppare una comprensione reciproca con gli stakeholder e quindi collaborare per offrire un'esperienza utente di alta qualità e far crescere l'attività.