10 consigli per velocizzare il tuo negozio Shopify
Ogni secondo in più che il tuo negozio impiega a caricarsi ti costa denaro. I dati di Google mostrano che quando il tempo di caricamento passa da 1 a 3 secondi, la probabilità di abbandono cresce del 32%. A 5 secondi, sale al 90%.
Shopify gestisce l’hosting, il server e il CDN. Ma la velocità percepita dal cliente dipende anche dalle scelte che fai tu: tema, immagini, app, codice personalizzato. Ecco 10 interventi concreti che puoi applicare oggi.
In questo articolo
- 1. Ottimizza le immagini
- 2. Riduci le app installate
- 3. Scegli un tema veloce
- 4. Limita i web font
- 5. Abilita il lazy loading
- 6. Pulisci il codice di terze parti
- 7. Riduci i redirect
- 8. Ottimizza la sezione hero
- 9. Preferisci app basate su metafield
- 10. Misura prima e dopo
- Domande frequenti
1. Ottimizza le immagini
Le immagini sono quasi sempre il carico più pesante di una pagina Shopify. Un’immagine prodotto da 3 MB si scarica in 2-3 secondi su una connessione mobile media. Moltiplica per 10 foto nella galleria e il problema diventa evidente.
Shopify converte automaticamente le immagini in formato WebP e le ridimensiona. Ma devi fare la tua parte: carica immagini di massimo 2000px di lato lungo. Non servono foto da 4000px per una galleria che le mostra a 800px. Comprimi le immagini prima del caricamento con strumenti come TinyPNG o Squoosh.
Se usi più immagini per variante, il filtraggio della galleria aiuta anche la performance percepita: il cliente vede solo 5 foto invece di 40, e le interazioni sono più rapide.
2. Riduci le app installate
Ogni app Shopify aggiunge codice JavaScript e CSS alla pagina. Alcune app caricano script esterni da server terzi, il che aggiunge latenza. Ogni app disinstallata elimina quel peso.
Fai un audit trimestrale delle app. Se un’app non la usi più, disinstallala. Se due app fanno cose simili, tieni solo quella più leggera. Attenzione: alcune app lasciano frammenti di codice nel tema anche dopo la disinstallazione. Controlla il codice Liquid del tema per residui.
Non tutte le app hanno lo stesso impatto. Le app basate su metafield (come Rubik Variant Images) caricano i dati con la pagina stessa e non fanno chiamate API esterne. Le app che dipendono da server esterni aggiungono un tempo di attesa ad ogni caricamento.
3. Scegli un tema veloce
Il tema è la base di tutto. Un tema pesante con animazioni complesse, slider multipli e JavaScript abbondante rallenta ogni pagina del negozio. I temi ufficiali di Shopify (Dawn, Refresh, Craft) sono ottimizzati per la velocità. I temi di terze parti variano molto.
Se scegli un tema a pagamento, verifica il punteggio di velocità nella demo. Shopify mostra un indicatore di velocità nella pagina del tema. Non è perfetto, ma dà un’idea generale.
Evita temi con troppe funzionalità integrate che non userai. Ogni funzionalità aggiunge codice, anche se non la attivi.
4. Limita i web font
Ogni font web aggiunge una richiesta di rete e un file da scaricare. Due font (uno per i titoli, uno per il corpo) con 2 pesi ciascuno (regular e bold) significano 4 file da caricare. Aggiungici l’italic e siamo a 6.
Limitati a un massimo di 2 font family con 2-3 pesi. Se il tuo tema lo supporta, usa i font di sistema come fallback. Il testo appare immediatamente con il font di sistema e poi passa al font web quando è pronto. Nessun flash di contenuto invisibile.
5. Abilita il lazy loading
Il lazy loading carica le immagini solo quando il cliente scorre fino a quel punto della pagina. Le immagini sotto la piega (quelle non visibili senza scorrere) non vengono scaricate immediatamente. Questo riduce il tempo di caricamento iniziale.
La maggior parte dei temi Shopify moderni ha il lazy loading attivo di default. Verifica che sia abilitato nelle impostazioni del tema. Attenzione: non applicare il lazy loading all’immagine hero o al primo prodotto visibile. Queste devono caricarsi subito.
6. Pulisci il codice di terze parti
Pixel di tracking, chat widget, pop-up, barre degli annunci: ogni elemento di terze parti aggiunge JavaScript esterno. Alcuni caricano file da server lenti. Altri bloccano il rendering della pagina.
Valuta ogni script di terze parti. Il pixel di Facebook è necessario? Probabilmente sì. Il chatbot che nessun cliente usa? Rimuovilo. La barra degli annunci con l’animazione? Sostituiscila con una versione statica.
Per il tracking, considera di usare Shopify Pixels (nella sezione Customer Events) invece di script inseriti nel tema. I Pixels di Shopify si caricano in un sandbox e non bloccano il rendering.
7. Riduci i redirect
Ogni redirect (301 o 302) aggiunge una richiesta HTTP. Se un link sulla pagina punta a un URL che fa redirect a un altro URL, il browser deve fare due richieste prima di caricare il contenuto. In catene di redirect (URL A reindirizza a B che reindirizza a C), ogni passaggio aggiunge latenza.
Controlla i tuoi link interni. Se hai cambiato l’URL di una pagina, aggiorna i link nel tema e nel menu di navigazione al nuovo URL diretto invece di fare affidamento sui redirect.
8. Ottimizza la sezione hero
La sezione hero della homepage è spesso il collo di bottiglia. Un’immagine grande, un video di sfondo, uno slider con 5 slide: ognuno di questi elementi ritarda il First Contentful Paint.
Se usi un’immagine hero, comprimi al massimo. Se usi un video, valuta se è davvero necessario. Se usi uno slider, considera di sostituirlo con una singola immagine statica. I dati mostrano che la maggior parte dei clienti non interagisce con gli slider: vede solo la prima slide.
9. Preferisci app basate su metafield
Le app Shopify possono salvare i dati in due modi: nei metafield di Shopify (caricati con la pagina) oppure sui propri server (richiesta API esterna ad ogni caricamento). La differenza di velocità è significativa.
Le app basate su metafield non aggiungono latenza perché i dati fanno parte della risposta della pagina. Le app con server esterni aggiungono 100-500ms per ogni richiesta, a seconda della posizione del server e della connessione del cliente.
Quando scegli un’app, verifica come gestisce i dati. Rubik Variant Images, per esempio, salva tutte le associazioni immagine-variante nei metafield. Zero chiamate esterne. Per un confronto tra app per immagini varianti dal punto di vista della performance, abbiamo un articolo dedicato.
10. Misura prima e dopo
Non ottimizzare alla cieca. Misura le prestazioni prima di ogni intervento e dopo. Gli strumenti principali:
Google PageSpeed Insights. Gratuito. Analizza sia desktop che mobile e mostra i Core Web Vitals. Testa la homepage e almeno una pagina prodotto.
Shopify Speed Score. Nel pannello di Shopify, nella sezione Online Store > Temi. Mostra un punteggio da 0 a 100 basato su Lighthouse. Aggiornato periodicamente.
Chrome DevTools. La tab Network mostra ogni file caricato, il suo peso e il tempo di download. La tab Performance registra il rendering della pagina nel dettaglio.
Tieni traccia dei punteggi nel tempo. Se dopo l’installazione di un’app il punteggio cala significativamente, quell’app potrebbe essere il problema. Per altre problematiche legate alle immagini varianti, consulta la nostra guida alla risoluzione.
Domande frequenti
Qual è un buon punteggio di velocità per Shopify?
Un punteggio PageSpeed Insights sopra 50 su mobile è nella media per Shopify. Sopra 70 è buono. Sopra 90 è eccellente ma raro per negozi con cataloghi ampi. Concentrati sui Core Web Vitals piuttosto che sul punteggio totale.
Le app rallentano sempre il negozio?
Non tutte. Le app basate su metafield e Shadow DOM hanno un impatto minimo. Le app che caricano script da server esterni e aggiungono molto JavaScript hanno un impatto maggiore. Ogni app va valutata singolarmente.
Shopify gestisce automaticamente la compressione delle immagini?
Shopify converte in WebP e ridimensiona le immagini al volo. Ma se carichi un file da 5000px e 8 MB, la conversione parte da quel file pesante. Carica immagini già ottimizzate (massimo 2000px) per risultati migliori.
Il lazy loading influisce sulla SEO?
No, se implementato correttamente. Google comprende il lazy loading nativo del browser (attributo loading=”lazy”). Non applicarlo all’immagine principale del prodotto o alla hero della homepage, che devono caricarsi immediatamente.
Come verifico se un’app usa metafield o server esterni?
Apri Chrome DevTools (F12) sulla pagina prodotto, vai alla tab Network e ricarica. Se vedi richieste a domini esterni legati all’app (non Shopify), l’app usa server propri. Le app basate su metafield non generano richieste aggiuntive.
Cambiare tema migliora la velocità?
Dipende dal tema attuale e da quello nuovo. Passare da un tema pesante con molte animazioni a Dawn o un tema leggero può migliorare significativamente il punteggio. Ma il tema è solo un fattore. App, immagini e codice personalizzato contano altrettanto.
Approfondimenti
