Disporre di una Un e-commerce veloce e performante è un elemento chiave per il successo di ogni e-commerciante. La velocità di caricamento delle pagine è presa in considerazione dal Google Bot e contribuisce quindi al tuo buon posizionamento organico. Inoltre, gli utenti sono sempre più esigenti riguardo alla loro esperienza di navigazione sugli e-commerce. Un e-commerce tecnicamente performante è quindi diventato un prerequisito per ottimizzare i tuoi tassi di conversione e minimizzare i tassi di rimbalzo o di abbandono del carrello.
Il primo arrivo di un utente su una pagina del tuo e-commerce è un elemento cruciale. La velocità di caricamento di questa ha un impatto diretto sulla sua percezione della piattaforma.
Aumento del tasso di rimbalzo
Uno
studio di Google ha evidenziato l'impatto del tempo di caricamento sul tasso di rimbalzo :
Aumento della probabilità del tasso di rimbalzo degli utenti in funzione del tempo di caricamento.
Calo della conversione e del fatturato
La società americana Portent ha condotto uno studio su 20 e-commerce B2C e B2B, e ha raccolto dati su oltre 5,6 milioni di sessioni utente. Ha determinato che ogni secondo di caricamento aggiuntivo aveva un effetto profondamente negativo sui tassi di conversione dell'e-commerce :
Tasso di conversione medio dell'e-commerce in funzione del tempo di caricamento in secondi (1 secondo : 3,05 % ; 2 secondi : 1,68 % ; 3 secondi : 1,12% ; 4 secondi : 0,67 %).
Si può quindi facilmente stimare il mancato guadagno dovuto alle scarse performance dell'e-commerce. Se 10 000 persone visitano il tuo sito e-commerce per acquistare un prodotto a 50€, ecco il differenziale di fatturato :
Una pagina che si carica in 1 secondo con un tasso di conversione del 3.05% genererà 15 250 €
Una pagina che si carica in 2 secondi con un tasso di conversione dell'1.68% genererà 8 400 €
Una pagina che si carica in 3 secondi con un tasso di conversione dell'1.12% genererà 5 600 €
Una pagina che si carica in 4 secondi con un tasso di conversione dello 0.67% genererà 3 350 €
Cioè un divario di fatturato di quasi 12 000 € !
Aumento del numero di detrattori
Le aspettative dei consumatori sono in costante aumento :
83% degli acquirenti online considerano che l'esperienza proposta è altrettanto importante quanto il prodotto o servizio venduto
69% degli acquirenti online affermano che un'unica esperienza straordinaria aumenta le loro aspettative nei confronti di altri marchi
In questo contesto, scarse performance del tuo e-commerce rispetto ai tuoi concorrenti possono seriamente danneggiare la tua immagine di marca !
La società Deloitte ha condotto un'ampia
analisi del comportamento degli utenti online. I loro studi riportano che
Il 62% degli acquirenti online è pronto a condividere le proprie cattive esperienze di acquisto con i propri cari.
Al contrario, un e-commerce ottimizzato può trasformare questi detrattori in promotori ! Il 72% degli acquirenti è pronto a condividere le proprie buone esperienze con altri, e il 67% è più propenso a spendere di più !
Comprendere i Core Web Vitals
I team di Google Chrome hanno definito delle metriche principali che impattano direttamente l'esperienza degli utenti : il LCP, l'INP e il CLS. Rappresentano il modo in cui gli utenti percepiscono la velocità di caricamento di una piattaforma web e la sua interattività.
Il LCP (Largest Contentful Paint) è il tempo necessario per visualizzare l'elemento più grande nella parte della pagina visibile sullo schermo. Un LCP inferiore a 2,5 secondi è considerato buono, mentre un LCP che supera i 4 secondi sarà generalmente fonte di frustrazione.
L'INP (Interaction to Next Paint) corrisponde al tempo necessario per attivare un cambiamento visivo dopo l'interazione dell'utente con un elemento. Se è troppo lungo (più di 500 ms), l'utente avrà l'impressione che il suo clic non abbia attivato nulla. Inoltre, l'INP si misura sull'intera sessione, per registrare solo il tempo peggiore rilevato.
Il
CLS (Cumulative Layout Shift)
valuta la stabilità visiva di una pagina web. L'idea è quindi di misurare la frequenza con cui gli utenti vedono modifiche di layout inaspettate (ad esempio testo che si sposta bruscamente o una CTA che si muove poco prima che tu ci clicchi sopra). Questo punteggio è più difficile da calcolare (la formula può essere consultata
qui) ma deve essere il più basso possibile (inferiore a 0,1).
Per ottimizzare il LCP, è necessario prestare attenzione a altre due metriche chiave che lo influenzano direttamente:
Il TTFB (Time To First Byte) rappresenta il tempo impiegato dal primo byte di dati per andare e tornare dal server al browser, dopo che l'utente ha effettuato una richiesta (ad esempio, ha cliccato su un link). Per un sito performante, punta a un TTFB inferiore a 0,8 secondi per evitare all'utente una sensazione di ritardo.
Il FCP (First Contentful Paint) rappresenta il tempo impiegato dal primo contenuto (in particolare un testo o un'immagine) per apparire sulla pagina. Di fatto, è intrinsecamente legato al TTFB. Devi cercare di raggiungere un FCP inferiore a 1,8 secondi per dare una sensazione di fluidità all'utente. Può quindi essere interessante mostrare un'immagine semplificata (wireframe) rappresentativa dell'elemento che apparirà, in attesa che il contenuto finale venga caricato.
Parallelamente alle sfide di UX/UI, è lavorando sull'ottimizzazione di questi KPI che potrai garantire un'esperienza di navigazione ottimale ai clienti del tuo negozio online.
Esistono due strumenti principali per misurare le prestazioni del tuo negozio online: la piattaforma online PageSpeed Insights di Google così come il pannello di monitoraggio delle prestazioni direttamente accessibile dal back-office di Shopify.
PageSpeed Insights
PageSpeed Insights è uno strumento sviluppato e messo a disposizione gratuitamente da Google, che permette di analizzare le prestazioni delle pagine web. La piattaforma fornisce rapporti sulla velocità e l'efficienza di caricamento delle pagine e specifica gli elementi che eventualmente ne rallentano la visualizzazione.
Esempio di risultati delle prestazioni ottenuti con lo strumento PageSpeed Insights per la versione web del sito dell'agenzia Galadrim.
PageSpeed Insights permette quindi di ottenere le informazioni per ogni Core Web Vital che abbiamo definito più in alto ma anche raccomandazioni per migliorare le prestazioni del tuo sito web.
Pannello di monitoraggio delle prestazioni di Shopify
Il il pannello di monitoraggio delle prestazioni proposto da Shopify include i Core Web Vitals definiti da Google:
La velocità di caricamento (Largest Contentful Paint)
L'interattività (Interaction to Next Paint)
La stabilità visiva (Cumulative Layout Shift)
Ogni indicatore è classificato come “Buono”, “Moderato” o “Cattivo”.
Esempio di pannello di monitoraggio delle prestazioni di Shopify che mostra un indice di velocità di caricamento, un indice di interattività e un indice di stabilità visiva.
Il vantaggio significativo di questo dashboard è che presenta i dati degli utenti del tuo negozio online, mentre i KPI generati da PageSpeed Insights si basano su una simulazione di una sessione utente eseguita da un robot!
Shopify permette di filtrare i risultati per mostrare solo i dati degli utenti web o mobile al fine di determinare se il negozio debba essere ulteriormente ottimizzato per un dispositivo in particolare. È anche possibile ottenere facilmente informazioni aggiuntive su ogni metrica accedendo ai rapporti dettagliati generati automaticamente da Shopify!
Esempio di grafico Shopify (Interaction to Next Paint INP).
Esempio di grafico Shopify (storico delle visite di utenti reali).
Il CMS mette così a disposizione di ogni commerciante uno strumento completo che permette di visualizzare le prestazioni del tuo negozio senza conoscenze tecniche.
Comprendere l'architettura tecnica di Shopify
Shopify è una soluzione auto-ospitata che implementa diversi strumenti e servizi per garantire la stabilità e la scalabilità del tuo negozio in tutto il mondo:
I team tecnici di Shopify lavorano continuamente per migliorare le prestazioni dei loro server. Nel 2023, Shopify ha presentato i
miglioramenti realizzati sulle loro infrastrutture, che hanno portato a un'accelerazione del 35% per i negozi basati sul CMS.
Evitare il codice Liquid complesso
Il linguaggio Liquid di Shopify è molto efficiente e costantemente ottimizzato dai loro team tecnici. Tuttavia, alcuni errori di sviluppo comuni ne compromettono particolarmente le prestazioni. Questo è il caso in particolare di cicli annidati o di numerose query su dati inutili. In alcuni casi, i prodotti commercializzati sul negozio contengono un gran numero di metadati, e un codice mal concepito può eseguire centinaia di verifiche di queste proprietà sulla scheda prodotto, senza un reale interesse.
Nel caso in cui questo grado di complessità sia giustificato dalla natura dei tuoi prodotti e dal funzionamento del tuo negozio, è comunque possibile riprogettare il tuo approccio. Ad esempio, invece di organizzare un mega menu con cicli, è possibile rendere gli elementi immediatamente visibili in Liquid, e gli elementi sottostanti in JavaScript caricato in modo asincrono.
Gestire le risorse che bloccano il rendering
Quando un browser analizza l'HTML, identifica i link ai file CSS o JavaScript sincroni. Scarica quindi questi file prima di continuare a renderizzare il resto della pagina. Alcune risorse sono particolarmente esigenti in termini di risorse e comportano ritardi particolarmente lunghi, che possono ostacolare l'esperienza degli utenti.
Ogni risorsa che rallenta il rendering non deve essere eliminata. Ad esempio, il CSS che stilizza il contenuto al di sopra della linea di galleggiamento deve essere conservato per evitare disallineamenti del layout o rapidi flash di contenuti non stilizzati. Al contrario, è possibile utilizzare il lazy loading (caricamento differito) per i file situati al di sotto della linea di galleggiamento per ottenere prestazioni globali migliori.
Allo stesso modo, puoi mettere in cache risorse statiche come immagini e alcuni file JS per ridurre i download di componenti ricorrenti.
Integrare correttamente gli snippets anti-flicker
L'A/B testing è uno dei migliori strumenti a tua disposizione per ottimizzare l'UX/UI del tuo negozio. Tuttavia, può causare un “effet Flicker”, ovvero la comparsa molto breve di un contenuto “A”, quasi immediatamente sostituito dal contenuto “B”, o di un componente non stilizzato. Influisce quindi molto negativamente sull'esperienza utente e rischia di aumentare il tasso di abbandono.
Per prevenire questo tipo di comportamento, è possibile aggiungere degli snippets anti-flicker. Essi ritardano la visualizzazione della pagina, fino a un punto preciso, per assicurarsi che il contenuto corretto sia pronto per il rendering. Tuttavia, questi stessi snippets hanno un effetto negativo sulle prestazioni.
È quindi necessario assicurarsi che il codice JavaScript implementato chiuda questi snippets una volta che i test sono stati eseguiti durante la sessione, o li disattivi se nessun test è stato implementato. Nel caso in cui i test A/B siano gestiti tramite un'applicazione esterna, è possibile incapsulare gli script in un'istruzione Liquid che verifica lo stato del test e disattiva il codice corrispondente se non è pertinente.
Evitare un codice HTML troppo esteso
I i mega-menu sono molto comuni sulle piattaforme e-commerce, e sono molto utili per presentare rapidamente numerosi punti d'accesso agli acquirenti. Tuttavia, generano numerosi DOM (modelli di documenti). Allo stesso modo, i negozi hanno generalmente due versioni di un menu (una per desktop e l'altra per mobile) invece di modificarlo dinamicamente tramite il CSS. Ciò raddoppia quindi il numero di elementi DOM.
In alcuni casi, questa eccessiva dimensione dell'HTML all'interno della pagina può causare rallentamenti e può, ad esempio, essere risolta tramite:
Un unico menu organizzato tramite il CSS per visualizzarsi correttamente su web e mobile.
L'utilizzo di Liquid per caricare gli elementi da visualizzare in priorità, e di JavaScript per recuperare i dati rimanenti e renderli in background.
Inoltre, assicurati che almeno un menu sia renderizzato lato server per aiutare il Google Bot a indicizzare i tuoi contenuti.
Ottimizzare le immagini
La sotto-ottimizzazione delle immagini è un problema comune su molti negozi online. Immagini troppo pesanti possono sia bloccare il rendering iniziale di una pagina (quando l'utente vi accede per la prima volta) sia il rendering di elementi durante la navigazione (ad esempio nello scroll). Privilegia un formato di immagine moderno ed efficiente come WebP e assicurati di caricare una dimensione adatta al dispositivo dell'utente (desktop, mobile o tablet). Su mobile, le immagini possono avere una risoluzione inferiore, per esempio.
Un altro problema comune, facilmente identificabile tramite lo strumento PageSpeed Insights, è l'
assenza di dimensioni esplicite sulle immagini. Il browser tratterà il componente come se la sua altezza fosse di 0, e una volta caricata l'immagine, il contenuto rimanente verrà bruscamente spostato verso il basso. La soluzione più semplice per evitare questo comportamento è di
definire gli attributi di altezza e larghezza all'interno del tag
![]()
nel CSS.
Se stai costruendo il tuo tema, o se ti sei rivolto a un fornitore per farlo, assicurati che il CSS di base per tutte le immagini sia definito fin dall'inizio del progetto. Potrà così essere regolato successivamente manualmente in base alle esigenze.
Alcuni strumenti di monitoraggio complementari
Oltre a PageSpeed Insights e al dashboard delle performance di Shopify, puoi affidarti ad alcuni strumenti aggiuntivi per approfondire l'analisi del tuo negozio online.
Lighthouse Treemap
Lighthouse Treemap è uno strumento di visualizzazione dei bundle JavaScript, accessibile da PageSpeed Insights, che permette di comprendere più facilmente il comportamento del codice presente su ogni pagina del tuo sito. I dati sono visualizzati per categoria e per dimensione. Ogni riquadro rappresenta un file Javascript o un modulo, e la sua dimensione dipende dal numero di byte che rappresenta.
Questo approccio visivo permette di rendersi più facilmente conto di elementi che possono ridurre le performance del negozio. È particolarmente interessante porre la tua attenzione sul codice proveniente da applicazioni di terze parti, per valutarne l'impatto rispetto alla sua pertinenza e utilità.
Performance DevTools
La scheda Performance del DevTools è direttamente accessibile dal browser Chrome. Permette di misurare il tempo di caricamento e di esecuzione degli script presenti su una pagina web e di presentare i risultati sotto forma di grafici cronologici.
Diversi grafici sono particolarmente interessanti per orientare le tue analisi:
La timeline di utilizzo della CPU, per identificare le operazioni che consumano più risorse.
Il Filmstrip Rendering, che rappresenta in quali momenti i contenuti critici diventano visibili per gli utenti.
La timeline delle richieste di rete, che mostra il tempo di iniziazione, esecuzione e completamento per ogni richiesta.
Il schema dei Web Vitals che mostra i dettagli su LCP, CLS e INP.
Con questo strumento, è persino possibile bloccare i domini di terze parti al fine di confrontare le performance, e di isolare gli elementi esterni più dannosi per le performance della tua piattaforma.
WebPageTest
WebPageTest è uno strumento che permette di effettuare test di velocità per qualsiasi pagina del sito e di ottenere rapporti sulle performance. Offre quindi accesso a informazioni simili a PageSpeed Insights e al dashboard fornito da Shopify.
Tuttavia, lo strumento offre anche un configuratore per affinare i test condotti, in particolare definendo:
Il luogo del mondo da cui viene eseguita la simulazione (il che è interessante nel caso in cui tu abbia una clientela internazionale importante)
Il browser (Chrome, Firefox o Safari)
La velocità di connessione
La risoluzione dello schermo
Inoltre, WebPageTest fornisce dati storici per determinare se il sito è più o meno veloce rispetto a prima.
Conclusione
In quanto CMS auto-ospitato, Shopify gestisce gli aspetti più complessi del deployment e della scalabilità di un negozio online. In parallelo, mantieni il controllo su molti parametri per ottimizzare le performance della tua piattaforma. Le performance tecniche del tuo negozio hanno un impatto molto importante sulla tua immagine di marca e sull'esperienza degli acquirenti. Di conseguenza, mirare a un sito veloce e responsive è fondamentale per massimizzare il tuo fatturato.
Galadrim affianca da 7 anni attori di tutte le dimensioni, in numerosi settori, nello sviluppo e nel miglioramento continuo dei loro negozi online. I nostri team sono a tua disposizione per comprendere le tue esigenze e valutare le soluzioni più pertinenti per accompagnarti nella crescita delle tue attività.
_ZWR7SP.webp)
_MkvBH.webp)
