Ottimizzare la velocità del sito: consigli e strumenti utili

Gli utenti di internet sono più impazienti che mai.

Circa il 70% dei consumatori ammette che un sito web lento influisce sulla loro disponibilità ad acquistare da un rivenditore online. Questo significa che è fondamentale trovare un equilibrio tra creare esperienze digitali belle e ricche di contenuti e assicurarsi che si mantengano efficienti.

Una maggiore velocità del sito si traduce anche in più vendite. Secondo i dati, migliorare la velocità del tuo sito di appena mezzo secondo potrebbe aumentare le conversioni.

Di seguito scoprirai i migliori consigli e strumenti per ottimizzare la velocità del sito web e aumentare le vendite.

Ottimizzare la velocità del sito: cosa significa?

L'ottimizzazione della velocità del sito web è la strategia per migliorare il tempo di caricamento delle pagine. Conosciuta anche come ottimizzazione delle prestazioni del sito web, il suo obiettivo è far caricare il tuo negozio ecommerce il più rapidamente possibile, prima che aumenti la frustrazione dei potenziali clienti per via della loro esperienza online e che decidano di chiudere la scheda del browser.

Ci sono due metriche chiave utilizzate per misurare la velocità:

1. First Contentful Paint, che, come spiega Google, misura il tempo necessario al tuo browser per visualizzare il primo pezzo di contenuto DOM dopo che un utente naviga sulla tua pagina.
2. Time to First Byte, che misura il tempo necessario affinché il server che ospita un sito web risponda al browser di un utente.

Perché è importante ottimizzare la velocità del sito?

Più veloce è il tuo sito, migliore sarà la tua capacità di acquisire clienti, inclusi quelli che abbandonano il sito di un concorrente più lento.

Google raccomanda una velocità di caricamento della pagina di due secondi per un sito ecommerce. Ma in generale, più veloce è, meglio è. Uno studio di Semrush ha scoperto che il tasso di abbandono quasi triplica se la tua pagina impiega più di tre secondi a caricarsi.

Se gestisci un negozio con un valore medio dell'ordine di 60 € e 5.000 visitatori al giorno, ad esempio, un ritardo di un secondo nella velocità del sito potrebbe costarti 9.000 € al giorno.

I siti che si caricano lentamente influenzano negativamente anche la tua visibilità e il tuo posizionamento SEO. Google, il motore di ricerca più grande al mondo, privilegia i siti con forti indicatori di prestazione (es. prestazioni del sito web) nei risultati di ricerca.

Inoltre, se investi nella pubblicità a pagamento come canale di acquisizione clienti, le landing page lente abbassano il tuo punteggio di qualità su Google Ads, il che significa che il costo per clic sarà più elevato. Questo è un problema costoso in un periodo in cui il costo di acquisizione cliente e per la pubblicità stanno aumentando in modo sproporzionato in molti settori.

Fattori che influenzano la velocità del sito web

• Piattaforma ecommerce
• Hosting
• Architettura del sito
• App di terze parti eccessive

Piattaforma ecommerce

La tua attività ha bisogno di una piattaforma ecommerce che abbia l'infrastruttura necessaria per favorire la velocità di caricamento. Come utente della piattaforma, dovresti discutere con il fornitore della piattaforma che usi dei miglioramenti da apportare al backend del tuo sito affinché i tuoi siti si carichino rapidamente per gli acquirenti.

Il rendering è il processo di creazione del markup HTML quando un utente carica la pagina nel proprio browser web. La tua infrastruttura ecommerce determina il processo di rendering.

Storefront Renderer (SFR) di Shopify, ad esempio, è un'applicazione dedicata a servire le richieste di storefront il più rapidamente possibile. Infatti, i negozi Shopify sono i più veloci al mondo,* con la loro velocità di caricamento 1,8 volte superiore rispetto ai negozi su altre piattaforme.

Se la tua piattaforma commerciale non punta a rendere la velocità una priorità assoluta, allora il resto dei suggerimenti che seguono non faranno una grande differenza. Sapendo che il 93% dei marchi su Shopify ha un negozio veloce, più di qualsiasi altra piattaforma commerciale importante, puoi migliorare la velocità del tuo sito ecommerce lavorando sui seguenti aspetti.

Hosting

Il servizio e l’infrastruttura di hosting per ecommerce che utilizzi possono influenzare le prestazioni del tuo sito web ecommerce, specialmente durante i giorni caratterizzati da alta affluenza e transazioni elevate.

Quando ricerchi i requisiti della piattaforma di hosting, fai attenzione a:

• Limiti di memoria o larghezza di banda per estendere l’operatività durante le promozioni stagionali
• Traffico previsto e carico massimo degli utenti per evitare crash a causa di un'improvvisa impennata di visitatori

Inoltre, scegli una piattaforma che ti consenta di evitare di gestire il tuo server. I rivenditori DTC spesso devono spendere molto per l'infrastruttura IT, e i costi sono aumentati costantemente negli ultimi anni. Shopify ospita completamente tutti i suoi piani su server proprietari, server scelti da alcuni dei più grandi rivenditori del mondo grazie alla loro velocità e affidabilità.

Prima di qualsiasi evento di vendita importante, chiedi al fornitore della piattaforma commerciale che hai scelto di aiutarti a prepararti ai picchi di traffico imprevisti o a un maggiore afflusso di ordini.

Le interruzioni del sito non sono mai facili da gestire, ma possono essere particolarmente gravi per un'azienda da 5 miliardi di dollari durante la sua stagione di vendite più grande dell'anno. Il sito web di JB Hi-Fi è stato inattivo per due ore durante il BFCM a causa di problemi del sito. “Abbiamo visto i siti di rivenditori di alto profilo andare fuori servizio,” afferma Chris Lang, direttore generale del reparto tecnico di JB Hi-Fi. “Tutta la nazione ne è a conoscenza. È dannoso per i clienti e per il marchio. Faremmo qualsiasi cosa per evitarlo”.

Dopo il passaggio a Shopify, JB Hi-Fi ha registrato vendite da record, raggiungendo quasi il doppio del traffico online durante il Black Friday Cyber Monday, il tutto senza problemi di prestazioni del sito web. Con la nostra infrastruttura basata su cloud, Shopify ha un uptime complessivo del 99,98%, con un negozio dalla velocità di caricamento 2,97 volte superiore rispetto ad altre piattaforme SaaS.

Leggi anche: La storia di JB Hi-Fi

Architettura del sito

I siti web ecommerce utilizzano una varietà di architetture per presentare informazioni sia agli utenti che ai browser. Questo può diventare complesso man mano che l’attività cresce, afferma Javier Moreno, data science manager di Shopify: “Man mano che i marchi crescono e diventano più sofisticati, i loro siti web diventano più ricchi di contenuti. Questa ricchezza di solito ha un prezzo; a meno che tu non stia prestando attenzione alla velocità, i cambiamenti rallenteranno il tuo sito”.

Nel tentativo di migliorare la velocità del sito, alcune aziende si rivolgono al commercio headless, un concetto che rende il front-end del tuo sito web ecommerce indipendente dalla piattaforma back-end che lo alimenta.

I rivenditori che utilizzano i componenti commerciali di Shopify portano queste operazioni al livello successivo. Usano le tecnologie ecommerce di cui hanno bisogno, quando ne hanno bisogno, invece di sovraccaricare un browser con troppi frammenti di codice che influenzano negativamente la velocità del sito.

App di terze parti eccessive

Se hai più di 20 plugin ecommerce installati nel tuo negozio, probabilmente non li stai utilizzando tutti. Forse ne hai installati alcuni per provarli e poi hai dimenticato di rimuoverli. Ma quelle app continuano a funzionare in background e potrebbero danneggiare attivamente le prestazioni del tuo sito web.

Chiedi a uno sviluppatore di rimuovere eventuali app non necessarie. Poi esegui test di velocità della pagina utilizzando strumenti come GTmetrix o PageSpeed Insights, o fai anche un test manuale utilizzando gli strumenti per sviluppatori di Chrome. Clicca sulla scheda Rete e ricarica la pagina.

Ogni volta che desideri installare una nuova app, chiediti se questa app ha un’importanza tale per cui vale la pena di rischiare che il tuo sito si carichi più lentamente.

La maggior parte dei file script/CSS per le app scaricate utilizzando il pannello di controllo di Shopify sono iniettati nell'<head> del tuo file theme.liquid all'interno di {{ content_for_header }}.

Un'app deve essere renderizzata prima che venga caricato qualsiasi altro codice.

“Per mantenere un equilibrio tra caricamento più veloce e valore esperienziale e di vendita delle app abbiamo deciso di caricare in modo asincrono gli script aggiunti con l'API Script Tag, in modo che il caricamento della pagina non venga interrotto”, afferma Jason Bowman, responsabile tecnico delle soluzioni di Shopify. “Tuttavia, gli <scripts> aggiunti direttamente nell'<head> hanno spesso un impatto immediato sulle prestazioni”.

Come ottimizzare la velocità del tuo sito web

1. Utilizza una rete di distribuzione dei contenuti (CDN)
2. Non esagerare con le modifiche al tema
3. Abilita la visualizzazione rapida nelle pagine di categoria
4. Rimuovi i pop-up non necessari
5. Riduci i caroselli nella homepage
6. Comprimi, ridimensiona e riduci le immagini
7. Usa l’incorporamento leggero per i video
8. Riduci i reindirizzamenti e i link non funzionanti
9. Abilita il caricamento asincrono
10. Sblocca il browser da script parser-blocking
11. Organizza il tracciamento con Google Tag Manager
12. Fai attenzione ai loop Liquid eccessivi
13. Costruisci pagine accelerate per dispositivi Mobili (AMP)
14. Disabilita la riproduzione automatica dei video su mobile
15. Ottimizza il checkout da mobile

1. Utilizza una rete di distribuzione dei contenuti (CDN)

Una rete di distribuzione dei contenuti, o CDN, è un gruppo di server distribuiti in tutto il mondo. Essa distribuisce il carico di consegna dei contenuti attraverso il server più vicino alla posizione del tuo visitatore, rendendo le esperienze locali più veloci.

Poiché sempre più siti ecommerce si stanno espandendo a livello globale, una CDN, o nel caso di Shopify, le dual CDN, è un ingrediente assolutamente indispensabile per garantire le prestazioni della piattaforma.

Shopify offre una CDN globale alimentata da Cloudflare senza costi aggiuntivi. Negli ultimi anni, Shopify ha migliorato significativamente la velocità del server utilizzando l'hosting a dominio singolo per i contenuti statici. Questo ha migliorato le prestazioni del browser con priorità HTTP/3 e ha impiegato tecniche intelligenti di caricamento asincrono per gli elementi della pagina.

Consolidando l'hosting sotto un unico dominio invece di cdn.shopify.com, Shopify garantisce tempi di caricamento più rapidi e una migliore gestione delle risorse. I dati di Chrome User Experience (CrUX) del 2023 mostrano un miglioramento del 35% nel Time to First Byte (TTFB) per i negozi, migliorando l'esperienza utente a livello globale. Queste ottimizzazioni portano a rendering più rapidi delle pagine e a un'esperienza di acquisto più coerente, indipendentemente dalla località dell'utente.

In generale, le CDN aumentano la velocità riducendo i costi. “Ottenere la nostra licenza, hosting e CDN da Shopify ci ha fatto risparmiare circa 100.000 € all'anno fin da subito”, afferma Diana Harbour, proprietaria di Red Dress Boutique.

Pensa ai contenuti visivi: spesso sono la causa delle prestazioni lente di un sito web. Shopify comunica alla CDN quando i tuoi asset (ad esempio, immagini, JavaScript e CSS) sono cambiati.

Fallo con Shopify

Le aziende Shopify possono utilizzare il filtro asset_url e aggiungere automaticamente numeri di versione a tutti gli URL generati da Shopify. Ad esempio, un numero di versione aggiunto alla fine di un URL potrebbe apparire così: ?v=1384022871. Questo filtro comunica alla CDN di estrarre la versione corretta. Senza di esso, potresti non vedere l'asset che ti aspetti dopo aver apportato modifiche ai tuoi contenuti.

Inoltre, se fai riferimento ai contenuti direttamente nel tuo CSS, l'URL sarà statico. Non porterà nemmeno la versione dell'asset aggiornata automaticamente da Shopify.

Per garantire gli aggiornamenti automatici, modifica la tua sintassi CSS per includere il filtro asset_url. Per informazioni su tutti i filtri URL che aiutano a estrarre asset, visita il Centro assistenza Shopify.

2. Non esagerare con le modifiche al tema

L'aspetto di un sito web determina la probabilità di coinvolgimento di un cliente. Alcuni studi dimostrano che le prime impressioni sono per il 94% legate al design, e queste decisioni avvengono in tempi rapidissimi. L'impressione iniziale di un visitatore del sito si forma in un decimo di secondo.

Detto ciò, è importante trovare un compromesso tra velocità del sito e bellezza del tema, considerato che quest'ultimo spesso comporta un codice caotico e grafiche eccessive. “Non hai bisogno di un tema pieno di fronzoli”, afferma Josh Stutt. “Hai bisogno di un tema che sia pulito, veloce e facile da navigare. Ho visto un miglioramento di oltre il 50% nel tasso di abbandono della homepage per i nuovi visitatori semplicemente passando a un tema più snello”.

Nirav Sheth, CEO e fondatore di Anatta, afferma: “Le soluzioni improvvisate per aumentare la velocità non costruiscono le basi per le prestazioni a lungo termine, sono solo i miglioramenti concreti della velocità a farlo, e per farlo bisogna partire dall'ottimizzazione dell'architettura del tema sottostante”.

3. Abilita la visualizzazione rapida nelle pagine di categoria

I pop-up di visualizzazione rapida mostrano un prodotto direttamente da una pagina di catalogo anziché costringerti a visitare una pagina di schede prodotto.

In teoria, la visualizzazione rapida dovrebbe far risparmiare tempo ai tuoi clienti, ma può effettivamente ostacolare l'esperienza di un cliente sul tuo sito ecommerce:

• Aggiunge un passaggio extra nel percorso del cliente
• Può essere cliccata per errore, il che è frustrante per l'utente
• Può essere scambiata per una pagina prodotto
• Ancor peggio, può rallentare significativamente il tempo di caricamento della tua pagina

Le implementazioni del pop-up di visualizzazione rapida (sia integrate in un tema che provenienti da un'app) possono talvolta pre-caricare le informazioni da un'intera pagina prodotto nel caso in cui un visitatore selezioni il pulsante Visualizzazione rapida.

Ma si tratta di una quantità enorme di dati da caricare, specialmente sulla pagina di una collezione con 20 o 30 miniature di prodotto. Il click mapping, uno strumento basato su JavaScript che traccia le aree in cui gli utenti scorrono o muovono il cursore per cliccare sulle pagine del tuo sito, può aiutarti a vedere se i tuoi clienti stanno effettivamente utilizzando la visualizzazione rapida.

Un’app che può aiutarti è Hotjar.

Trova la visualizzazione rapida in Shopify

Dovrebbe essere facile vedere se c'è un pulsante di visualizzazione rapida sulle miniature dei prodotti del tuo negozio. Controlla il personalizzatore del tuo tema per vedere se c’è un'opzione per abilitare o disabilitare questa funzione. Se non vedi questa opzione nel personalizzatore del tema, controlla se proviene da un'app. Se è così, dovrebbe essere ovvio come rimuoverla.

Se i primi due passaggi non aiutano, è probabile che questa funzione sia integrata nel tema stesso. In tal caso, hai bisogno di uno sviluppatore per identificarla e rimuoverla. Trova un Partner di Servizio Shopify che ti assista in questo processo.

Utilizza AJAX per estrarre le informazioni sul prodotto una volta che un visitatore clicca sul pulsante del pop-up di visualizzazione rapida. Oppure, salva un insieme limitato di informazioni sul prodotto come attributi di dati sull'elemento della griglia del prodotto. Poi costruisci dinamicamente l'HTML e il pop-up con JavaScript.

Entrambe le opzioni sono meno ideali rispetto alla rimozione dell'opzione di visualizzazione rapida. Le informazioni sul prodotto devono comunque essere caricate per ogni prodotto. Tuttavia, è meglio che scaricare tutte le immagini e i link dei prodotti.

4. Rimuovi i pop-up non necessari

I pop-up esistono per mostrare offerte speciali o incoraggiare le persone a compiere il passo successivo nel percorso del cliente. Che si tratti di riscattare un coupon o inserire il proprio indirizzo email, i pop-up aiutano a coinvolgere i visitatori per la prima volta e aprono la porta a future comunicazioni.

Tuttavia, c'è un'arte sottile nell'uso dei pop-up negli ecommerce. Troppe grafiche lampeggianti possono essere dannose per la velocità del sito e le prestazioni, per non parlare del fatto che distraggono gli utenti dalle interazioni con i contenuti del sito web che hai già ottimizzato per le conversioni.

Imposta parametri sull'uso dei pop-up per prevenire ritardi nella velocità del sito. Ad esempio, potresti creare trigger per i pop-up in modo che il codice extra non contribuisca alla lentezza di caricamento del sito web. Fai in modo che appaiano immediatamente al caricamento della pagina, come nel caso dei pop-up di intenzione di uscita o di ritardo temporale. Entrambi questi trigger danno un po' di respiro tra il caricamento iniziale della pagina e il caricamento del pop-up.

5. Riduci i caroselli nella homepage

Grandi slideshow con più immagini principali sono ottimi per mostrare i tuoi prodotti. Sfortunatamente, c'è uno svantaggio: la dimensione e la qualità necessarie a mostrare al meglio un carosello principale possono aumentare i tempi di caricamento, specialmente se hai quattro o cinque immagini.

Riduci il numero di immagini nella homepage o eliminale completamente. Un'unica immagine principale di alta qualità, ben pensata e con una call to action chiara aiuta a catturare rapidamente l'attenzione dei tuoi clienti, poiché il cervello elabora le immagini visive 60.000 volte più velocemente rispetto a come elabora il testo.

Se devi utilizzare un carosello, segui le migliori pratiche UX, come:

• Limitati a due o tre immagini
• Mostra le immagini come sezioni di contenuto statico anziché come caroselli dove ruotano automaticamente
• Utilizza srcset o Lazy Load come soluzione di back-up

Chubbies, ad esempio, utilizza immagini ottimizzate al posto di un tradizionale carosello principale nella homepage. Il cofondatore Tom Montgomery afferma: “Usiamo Shopify fin dal primo giorno. Nessuno di noi è un tecnico informatico, quindi è fantastico poter contare sugli esperti di Shopify e concentrarci così sull'innovazione”.

6. Comprimi, ridimensiona e riduci le immagini

Le immagini rappresentano tra il 50 e il 75% del peso totale delle tue pagine web. Questo può diventare un problema maggiore man mano che il tuo sito ecommerce cresce. Più prodotti vendi, più file immagine hai sul tuo server. Ogni immagine che utilizzi su una pagina crea una nuova richiesta HTTP. Per facilitare la velocità delle pagine, riduci le immagini per comunicare di più utilizzando meno elementi.

Alex Mirzaian, marketing manager di Eightvape, afferma: “Quando crei costantemente contenuti attraverso articoli di blog o crei molti prodotti al giorno, tendi ad aggiungere immagini al sito senza pensarci. Comprimere le immagini può aiutare molto quando hai migliaia di immagini sul sito”.

Puoi ridurre la dimensione delle immagini senza compromettere la qualità con la compressione senza perdita utilizzando strumenti come TinyJPG o TinyPNG.

Inoltre, fai attenzione alle fonti di immagine vuote—<img src = ’ ’>—nel tuo codice. Queste causano un eccessivo carico sul browser inviando un'altra richiesta ai tuoi server. Una soluzione semplice sono i CSS “sprites”, che consolidano più immagini come icone in una sola, limitando il numero di richieste di immagini individuali del server. Migliora anche la velocità della pagina.

I parametri di dimensione delle immagini integrati di Shopify ti consentono di scaricare l'immagine più piccola possibile mantenendo la qualità. Chiedono a Shopify la dimensione esatta dell'immagine che verrà visualizzata, quindi riducono la dimensione del file scaricato dalla CDN e la scalabilità necessaria lato browser.

“Uno dei nostri clienti aveva un sito che si caricava lentamente, quindi abbiamo iniziato ottimizzando le immagini”, afferma Maria Harutyunyan, cofondatrice di Loopex Digital. “Le abbiamo rese più piccole e le abbiamo compresse, e la differenza nella velocità di caricamento delle pagine è stata notevole. Infatti, le immagini ora occupano il 60% in meno di spazio e si caricano molto più velocemente”.

7. Usa l’incorporamento leggero per i video

I video stanno rapidamente diventando il linguaggio di internet: circa il 91% delle aziende utilizza i video come strumento di marketing. Ma a seconda di come vengono incorporati nel tuo sito, possono causare grandi differenze nei tempi di caricamento.

Non solo il codice di incorporamento standard di YouTube appesantisce il tuo sito, visto che alcuni file vengono scaricati anche prima che il visitatore clicchi sul pulsante Play, ma utilizza il tag <iframe> dove la larghezza e l'altezza del lettore video sono fisse. Il tuo video non si adatta alla dimensione dello schermo di diversi dispositivi.

La soluzione sono gli incorporamenti leggeri, che caricano i video direttamente sulla tua pagina web. Quando la pagina si carica inizialmente, il sito incorpora solo l'immagine in miniatura del video di YouTube. Il lettore video stesso (e tutto il suo JavaScript extra) si carica solo quando l'utente clicca sull'immagine in miniatura.

Le miniature di YouTube sono di circa 15 kilobyte, quindi gli incorporamenti leggeri possono ridurre la dimensione delle pagine web di quasi un megabyte.

8. Riduci i reindirizzamenti e i link non funzionanti

Troppi reindirizzamenti e link non funzionanti possono influenzare negativamente le prestazioni e danneggiare il tuo posizionamento SEO.

Fai un po' di pulizia sui tuoi reindirizzamenti. Ad esempio, i reindirizzamenti 302, che indicano che una pagina è stata spostata temporaneamente, possono danneggiare la tua SEO. Attivano anche richieste HTTP aggiuntive e ritardano i trasferimenti di dati.

Piuttosto, utilizza un reindirizzamento memorizzabile nella cache o la funzione di reindirizzamento integrata di Shopify, che genera codici 301 per impostazione predefinita, nel tuo pannello di navigazione. E ricorda: non reindirizzare mai URL a pagine che sono a loro volta reindirizzamenti.

I link non funzionanti di elementi di pagina come immagini, CSS e file JS aumentano le richieste HTTP e danneggiano la velocità del tuo sito. Utilizza uno strumento come Broken Link Checker per rimuoverli. Creare pagine di errore 404 personalizzate aiuterà i visitatori che inseriscono accidentalmente un URL errato per il tuo sito.

9. Abilita il caricamento asincrono

Il caricamento asincrono è una tecnica che impedisce a tutti i contenuti di essere caricati immediatamente su una pagina web. I siti ecommerce che utilizzano il caricamento asincrono mostrano i contenuti solo quando gli utenti attivano determinati trigger.

Puoi notare il caricamento asincrono in azione quando un utente visita la pagina prodotti del tuo ecommerce. Solo i contenuti visibili above the fold appaiono immediatamente appena qualcuno giunge sul sito, come il nome dell'articolo, le immagini e la descrizione del prodotto. I contenuti di supporto appaiono quando gli utenti scorrono sotto questa sezione. Contenuti generati dagli utenti, caroselli sui social media e recensioni dei clienti vengono tutti caricati in modo asincrono per evitare che il codice sovraccarichi il server con troppe informazioni immediatamente al caricamento.

Chris McCarron di GoGoChimp ha utilizzato questa strategia di ottimizzazione della velocità della pagina per il negozio ecommerce di un cliente: “C'erano un numero sorprendente di immagini below the fold su ogni pagina web. Il problema è che così un browser web scaricherà simultaneamente ogni immagine su una pagina web, indipendentemente da quali immagini siano visibili. Tuttavia, il caricamento asincrono scarica un'immagine solo quando può essere visualizzata nel browser”.

10. Sblocca il browser da script parser-blocking

Prima che un browser possa visualizzare una pagina per il tuo cliente, deve passare attraverso un processo chiamato “analisi dell'HTML”. Ma gli script parser-blocking interrompono questo processo: quando un browser incontra uno script parser-blocking, deve fermare tutto e concentrarsi solo sull'esecuzione di quello script prima di poter continuare a fare qualsiasi altra cosa.

Fortunatamente, c'è una soluzione semplice e tutto ciò che serve è l'attributo “async” o “defer”:

• Parser-blocking: <script src="jquery.js"></script>
• Non parser-blocking: <script src="jquery.js" defer></script>

Vale la pena di sottolineare che non è JavaScript a bloccare i browser, ma è il modo in cui JavaScript viene caricato a determinare se bloccherà o meno il browser. Dopo aver apportato queste modifiche al tuo codice, verifica che il tuo sito web offra ancora l'esperienza desiderata.

11. Organizza il tracciamento con Google Tag Manager

I dati dei clienti alimentano le tue strategie di ecommerce e marketing digitale. Ma raccogliere quei dati può anche rallentare le prestazioni del tuo sito web. Tutti quei tag di tracciamento JavaScript (ad esempio, per analisi generali, conversioni, obiettivi e retargeting comportamentale) sono spesso i colpevoli.

La raccolta di dati dei clienti può anche richiedere molto tempo e risorse al tuo sviluppatore, IT o team di marketing. Un sistema di gestione dei tag (TMS) come Google Tag Manager condensa tutti i tuoi tag in una sola richiesta JavaScript. Se un errore del tag causa l'arresto del tuo sito web, avere un TMS ti aiuta anche a rimuovere rapidamente il tag.

Nirav Sheth aggiunge che quando Anatta stava ottimizzando la velocità del sito di un sito ecommerce nel settore della bellezza, “Ciò che ha fatto la differenza nella velocità del sito più di qualsiasi altra cosa è stata la combinazione di due azioni, ovvero sfruttare le API di Shopify e ripulire Google Tag Manager”.

Un frammento di codice è tutto ciò di cui hai bisogno per gestire i tag del tuo negozio Shopify in un unico posto con Google Tag Manager. Per saperne di più, consulta le linee guida nel Centro assistenza Shopify.

12. Fai attenzione ai loop Liquid eccessivi

Liquid è un potente linguaggio di programmazione di Shopify. Ma ci sono alcuni casi in cui devi valutare i benefici rispetto ai compromessi.

Le iterazioni forloop sono uno di questi casi. Forloop significa che il sistema deve eseguire un ciclo (ad esempio, scansionare o cercare) attraverso tutti i prodotti in una collezione, e si verifica quando sta cercando una condizione specifica (ad esempio, prezzo o un tag).

Queste funzionalità possono essere utili in alcuni casi, come durante la creazione di immagini o varianti di prodotto. Sono anche utili quando hai un numero ridotto di prodotti sulla pagina di una collezione, ma fai attenzione all'impatto sui tempi di caricamento.

Esamina il codice del tuo tema per assicurarti di non eseguire forloop Liquid più volte alla ricerca delle stesse informazioni. Questo può accadere quando più sviluppatori lavorano su un tema e possono duplicare attività o introdurre codice in conflitto. Rimuovere queste duplicazioni renderà il caricamento della tua pagina più veloce.

È spesso più facile utilizzare un semplice loop product.options_with_values. Esamina la documentazione per capire come funzionano il nostro linguaggio di templating e i loop Liquid.

13. Costruisci pagine accelerate per dispositivi mobili (AMP)

Le pagine accelerate per dispositivi mobili (AMP) sono un progetto sponsorizzato da Google che riformatta i contenuti di un sito web per i dispositivi mobili. Su siti dove le AMP sono abilitate, Google memorizza nella cache ogni pagina e la ricarica ogni volta che un utente visita la pagina provenendo dalla ricerca. Questo riduce i tempi di caricamento delle pagine, portando a un aumento due volte superiore del tempo trascorso sulla pagina e a un aumento del 20% delle conversioni rispetto alle pagine non AMP.

Implementa le AMP nel tuo negozio ecommerce con app Shopify come AMP, Fire AMP o The AMP App. Ognuna elimina il codice complesso che ingombra il tuo sito mobile per caricare rapidamente le pagine.

14. Disabilita la riproduzione automatica dei video su mobile

Non tutti gli utenti di internet da mobile navigano sul tuo sito ecommerce con una connessione di rete potente. Magari un cliente di Allbirds scansiona il sito del rivenditore durante un'escursione mentre le scarpe che indossa si stanno rompendo. Oppure un cliente di Firebelly Tea vuole ordinare la sua prossima scatola di bustine di tè mentre è nel parcheggio della scuola ad aspettare che i suoi figli escano.

In entrambi i casi, queste persone potrebbero interagire con i video che i rivenditori utilizzano per comunicare con i potenziali clienti sul loro sito mobile. Ma la riproduzione automatica di questi video può causare seri ritardi nella velocità del sito.

La connessione di rete mobile deve scaricare un file di grandi dimensioni quando un video è impostato per la riproduzione automatica. Quando questo viene sostituito con un'immagine in miniatura statica e un pulsante opzionale per attivare il video, il file di dimensioni complete non deve essere caricato attraverso una connessione internet debole. I visitatori ottengono la loro prima visualizzazione significativa in tempi record.

15. Ottimizza il checkout da mobile

Il processo di checkout viene spesso lasciato in secondo piano quando si apportano miglioramenti alla velocità del sito mobile. Le pagine della home, dei prodotti e di categoria ricevono la maggior parte dell'attenzione, principalmente perché non vuoi che i potenziali clienti si fermino al primo ostacolo, ovvero la loro interazione iniziale da mobile con il tuo negozio.

Non includere il processo di checkout nella tua strategia di ottimizzazione della velocità del sito web porterà probabilmente a un tasso di abbandono del carrello più elevato. Le persone sono abbastanza sicure da selezionare gli articoli che vogliono acquistare. Ma se vengono accolte con ritardi al checkout, devono davvero amare quel prodotto per decidere di non abbandonare il carrello. In altre parole, rischi di perdere gli acquirenti impulsivi.

Shop Pay consente agli acquirenti mobili di completare il checkout a velocità record. Secondo uno studio esterno, i rivenditori che utilizzano i checkout Shop Pay hanno un tasso di conversione checkout-mobile 1,91 volte superiore rispetto a quelli che utilizzano il checkout normale.

“La maggior parte dei nostri clienti oggi scopre nuovi prodotti in movimento sui loro dispositivi mobili, e se devono compilare un modulo, li perdiamo”, afferma Benjamin Sehl, cofondatore di Kotn. “Abilitare Shop Pay nel nostro checkout ha davvero reso piacevole il punto più doloroso dell'esperienza del cliente, e poiché è legato all'ecosistema di un milione di commercianti, anche i nuovi clienti possono completare il checkout in un clic”.

Strumenti per testare la velocità del sito web

• Dashboard della web performance di Shopify
• Verifica della velocità del sito di Shopify
• Google PageSpeed Insights
• GTMetrix
• Pingdom

Ogni strumento di test della velocità utilizza un metodo di punteggio diverso, proprio come ogni team avrà una definizione diversa di buona velocità del sito. Gli strumenti che forniscono il tempo di “caricamento della pagina” devono selezionare un marcatore di tempo specifico, come TTFB, nei loro risultati.

Utilizza questi test di velocità per guidare le tue decisioni, ma mantieni una mentalità aperta. Devi trovare un equilibrio fra la velocità del tuo sito e la costruzione di un'interfaccia utente che ottimizza il percorso del tuo cliente.

Dashboard della web performance di Shopify

La dashboard delle web performance di Shopify è uno strumento potente progettato per aiutare i marchi ecommerce a ottimizzare i loro negozi digitali.

Considerato che i tempi di caricamento delle pagine e l'esperienza dell'utente possono influire sulla conclusione di una vendita, questa dashboard fornisce informazioni preziose sulle prestazioni di un negozio in base a tre indicatori chiave delle prestazioni web:

• Velocità di caricamento
• Interattività
• Stabilità visiva

La dashboard ti mostra come i clienti reali vivono il negozio sia su desktop che su dispositivi mobili, basandosi su dati raccolti per 28 giorni. Puoi osservare come cambiamenti come l'installazione di app o aggiornamenti del tema influenzano le tue metriche nel tempo tracciando i tuoi punteggi di prestazione, che vanno da "buono" a "scarso".

Con filtri personalizzabili e visualizzazioni chiare, i merchant possono identificare aree di miglioramento e prendere decisioni basate sui dati per migliorare le prestazioni del negozio. Ottimizzare i tuoi indicatori chiave delle prestazioni web è un modo efficace per aumentare i tassi di conversione e la visibilità del tuo negozio nei risultati di ricerca.

Man mano che Shopify continua a evolvere la sua infrastruttura, questa dashboard serve come uno strumento cruciale per i merchant che puntano a offrire esperienze fluide e a caricamento rapido per i moderni acquirenti online.

Verifica della velocità del sito di Shopify

La Verifica della velocità del sito di Shopify ti consente di eseguire un'analisi comparativa della velocità del sito. Inserisci i dettagli del tuo sito e la piattaforma attuale su cui è ospitato (ad esempio, Adobe Commerce (Magento), WooCommerce). Lo strumento misurerà vari parametri di prestazione, come il tempo di caricamento, TTFB e fattori di velocità rilevanti.

Utilizzando dati raccolti da milioni di transazioni globali, lo strumento confronta le metriche di velocità del tuo sito attuale con le prestazioni medie o attese su Shopify. Lo strumento quindi visualizza i risultati del confronto. Ad esempio, potrebbe mostrare che il sito WooCommerce dell'utente sarebbe in una certa percentuale più veloce se fosse ospitato su Shopify.

Google PageSpeed Insights

PageSpeed Insights è uno strumento di Google Labs che ti offre suggerimenti personalizzati per migliorare le prestazioni del tuo sito web. Indica anche gli elementi sul tuo sito che rallentano la pagina, come CSS e JavaScript.

Puoi persino guardare le prestazioni del sito web mobile dei tuoi concorrenti. Sapere cosa c'è di sbagliato nel loro sito può aiutarti ad evitare gli stessi errori.

GTMetrix

GTMetrix assegna al tuo sito web un voto sulla velocità da A a F. Combina dati sia da Yslow che da PageSpeed Insights per fornire un report sulle prestazioni del sito web, che include:

• La velocità di caricamento della tua pagina
• Analisi Web Vitals e Lighthouse
• Opportunità di ottimizzazione della velocità del sito web
• Suddivisione della composizione della pagina per richieste e dimensione totale in byte

Pingdom

Pingdom.com valuta le prestazioni del tuo sito web (da 0 a 100%). Ha anche una utile funzione di “analisi a cascata” che ti aiuta a identificare altre aree problematiche. Questo punteggio riga per riga è uno strumento di riferimento utile.

Ottimizza la velocità del tuo sito web e nota come le tue conversioni aumentano

È importante ottenere il consenso del tuo team per investire tempo e risorse per ottimizzare le prestazioni e la velocità del tuo sito web. I dati e gli strumenti condivisi in questo articolo possono aiutarti a far valere la tua idea.