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%.
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.
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 comedns-prefetch
,preconnect
epreload
). - 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.
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.
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.
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%.
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.
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à.