Shopify Ottimizzazione della velocità del negozio: una guida completa

Un ritardo di un secondo nel tempo di caricamento della pagina costa agli archivi e-commerce il 7% delle conversioni. La velocità del negozio Shopify non è un lusso: è una linea diretta per le entrate. Questa guida rivela i sei principali colpevoli che rallentano il tuo negozio e ti mostra esattamente come risolverli.

Perché la velocità del negozio Shopify è importante per le vendite

Google ha pubblicato una ricerca che mostra che un ritardo di 100 millisecondi nel caricamento della pagina può causare un calo dell'1% nelle conversioni. Per un negozio con entrate mensili di 50.000 dollari, si perdono 500 dollari per ogni decimo di secondo in più. La velocità non influisce solo sull'esperienza dell'utente; è un fattore di ranking fondamentale per la Ricerca Google.

I commercianti Shopify devono affrontare una sfida unica. A differenza dei siti self-hosted in cui controlli ogni risorsa, stai costruendo su una piattaforma condivisa che ospita milioni di negozi. Il tuo tema, le app e gli script di terze parti competono tutti per la larghezza di banda. Un negozio scarsamente ottimizzato può sembrare lento anche se l'infrastruttura di Shopify è di livello mondiale.

Anche i negozi lenti danneggiano la fiducia. Gli utenti si aspettano che il pagamento sia immediato. Una pagina di pagamento trascinata segnala un rischio, soprattutto sui dispositivi mobili. I miglioramenti della velocità sono spesso correlati a un minor abbandono del carrello e a un maggiore valore della vita del cliente.

Come misurare la velocità del tuo negozio Shopify

Prima di poter correggere la velocità, hai bisogno di dati. La maggior parte dei commercianti indovina cosa c'è che non va. Le metriche giuste ti dicono esattamente dove concentrarti.

Google PageSpeed Insights

Inizia qui. Visitapagespeed.web.deve inserisci l'URL del tuo negozio Shopify. PageSpeed ​​Insights misura l'esperienza utente reale (dati sul campo) e le prestazioni del laboratorio. Assegna punteggi da 0 a 100 e segnala problemi specifici.

Concentrati prima sulla sezione "Core Web Vitals". Queste tre metriche influiscono direttamente sull'esperienza utente e sul posizionamento nei risultati di ricerca. Un punteggio superiore a 90 è eccellente; superiore a 50 è accettabile; inferiore a 50 richiede un'azione immediata.

Metti alla prova la tua home page e una pagina di prodotto. Le home page e le pagine di raccolta spesso vengono caricate in modo diverso rispetto alle pagine dei singoli prodotti a causa del conteggio delle immagini e degli script delle app.

Report sulla velocità del negozio online integrato di Shopify

Accedi al tuo pannello di controllo Shopify e vai a Canali di vendita > Negozio online > Temi. Fai clic su "Apri il tema corrente" e cerca "Velocità negozio online". Questo report mostra le tendenze delle prestazioni e identifica le app che rallentano il tuo negozio.

Il rapporto sulla velocità è alimentato da dati utente reali provenienti dai tuoi visitatori effettivi. È più accurato per il tuo pubblico specifico e per i modelli di traffico rispetto ai test di laboratorio. Controllalo mensilmente per monitorare i progressi.

GTmetrix e WebPageTest

GTmetrix e WebPageTest forniscono grafici a cascata che mostrano la sequenza di caricamento di ogni risorsa sulla tua pagina. Rivelano quali script bloccano il rendering e quali risorse sprecano larghezza di banda.

Usali per approfondimenti su risorse lente specifiche. Ad esempio, se vedi il caricamento dello script di un'app prima delle immagini del prodotto, si tratta di una soluzione prioritaria. Questi strumenti sono più tecnici ma vale la pena impararli per i commercianti che gestiscono negozi con entrate superiori a $ 100.000 al mese.

Le sei principali cause del rallentamento dei negozi Shopify

1. Immagini non ottimizzate

Le immagini rappresentano il 50-70% del peso tipico della pagina di un negozio Shopify. Una foto di un prodotto non compressa scattata da una fotocamera può pesare 3-5 MB. Il caricamento diretto su Shopify senza ottimizzazione riduce le prestazioni.

Shopify pubblica automaticamente le immagini tramite la sua CDN e crea varianti reattive, ma non le comprime. Un'immagine di 4000x3000px mostrata con una larghezza di 500px carica comunque la risoluzione completa, quindi il browser la ridimensiona.

I formati di immagine moderni come WebP sono più piccoli del 25–35% rispetto a JPG con la stessa qualità. La maggior parte dei commercianti non li utilizza. In combinazione con il caricamento lento (descritto di seguito), le immagini ottimizzate sono spesso la vittoria più grande.

2. Troppe app di terze parti (specialmente quelle che inseriscono script)

Il negozio Shopify medio esegue 20-30 app. Ogni app può inserire JavaScript nella tua vetrina. Più script significano un caricamento della pagina più lento, più lavoro della CPU e metriche Core Web Vitals più lunghe.

Alcune app sono inevitabili. Processori di pagamento, acquisizione di e-mail, recensioni: tutto questo aggiunge valore. Ma molti commercianti installano le app senza verificare se vengono effettivamente utilizzate.

I peggiori colpevoli sono le app di marketing che tengono traccia del comportamento degli utenti, i programmi fedeltà e gli strumenti di personalizzazione visiva. Questi scaricano pesanti pacchetti JavaScript su ogni pagina. Un'app di revisione mal codificata può aggiungere 300 ms al tuo LCP (Largest Contentful Paint).

3. Temi gonfiati o mal codificati

Il tuo tema Shopify è la base. Alcuni temi raggruppano jQuery, framework CSS inutilizzati e librerie obsolete. Un tema vecchio di 10 anni potrebbe caricare dipendenze che non servono più a nessuno scopo.

I temi premium a pagamento spesso comportano un ingombro maggiore rispetto ai temi gratuiti leggeri. Mirano a fare tutto, il che significa caricare il codice per le funzionalità che non usi. I livelli di personalizzazione aggiungono più peso.

Problemi comuni relativi ai temi: caratteri personalizzati inutilizzati, immagini base64 in linea nei CSS, più versioni Bootstrap e librerie di utilità duplicate. Controlla il codice del tuo tema per identificare il peso morto.

4. Pacchetti JavaScript di grandi dimensioni e script di blocco del rendering

L'esecuzione di JavaScript è costosa. Mentre il JavaScript del tuo tema è in esecuzione, il browser non può dipingere la pagina. Se i tuoi script sono grandi o mal sequenziati, la tua pagina sembrerà congelata ai visitatori.

Gli script di terze parti delle app spesso si caricano in modo sincrono, il che significa che bloccano tutto il resto. Il gestore di script nativo di Shopify consente il caricamento asincrono, ma molte app non seguono questo schema.

Molti negozi caricano pixel di tracciamento, analisi, widget di chat e script di ottimizzazione delle conversioni prima che la pagina diventi interattiva. Questi possono aggiungere 2-3 secondi al Time to Interactive (TTI).

5. Nessun caricamento lento sulle immagini sotto la piega

Ogni immagine sulla pagina del tuo prodotto viene caricata immediatamente, anche se i visitatori non scorrono mai verso il basso. Ciò spreca larghezza di banda per immagini che non vedranno mai.

Il caricamento lento rinvia il caricamento delle immagini finché l'utente non sta per scorrere per visualizzare. In combinazione con l'ottimizzazione delle immagini, questo può ridurre il tempo di caricamento iniziale della pagina del 30–50%.

I temi Shopify creati negli ultimi tre anni spesso hanno il caricamento lento integrato. I temi più vecchi no. È una vittoria veloce se il tuo tema supporta il fileloading="lazy"attributo.

6. Caching CDN mancante o configurato in modo errato

Shopify fornisce immagini tramite la sua CDN a livello globale, il che è eccellente. Ma le intestazioni della cache e le policy della cache del browser possono essere configurate in modo errato.

Alcuni negozi non impostano intestazioni della cache sulle risorse, costringendo i browser a riconvalidare o scaricare nuovamente i file statici a ogni visita. Altri impostano la durata della cache troppo breve (ad esempio, 1 giorno anziché 30 giorni).

La memorizzazione nella cache non configurata correttamente non verrà visualizzata in PageSpeed ​​Insights, ma i visitatori abituali riscontrano penalizzazioni in termini di prestazioni. Controlla le impostazioni della cache del tuo tema e assicurati che il CDN di Shopify sia configurato correttamente.

Come velocizzare il tuo negozio Shopify: soluzioni attuabili

Ottimizzazione dell'immagine

Inizia con un controllo collettivo delle immagini. Scarica le immagini dei tuoi prodotti ed esaminaletinypng.como ImageOptim. Vedrai quanto peso può essere ridotto senza perdita di qualità.

Per Shopify, la procedura migliore è caricare immagini di larghezza non superiore a 2000-2500 px. La CDN di Shopify li ridimensiona automaticamente per dispositivi mobili e desktop. Evita di caricare immagini da 6000 px "per ogni evenienza".

Prendi in considerazione l'utilizzo di un'app dedicata all'ottimizzazione delle immagini se disponi di centinaia di prodotti. App come Crush.pics o Image Optimizer automatizzano la compressione nel tuo catalogo. Spesso si ripagano in poche settimane risparmiando larghezza di banda.

Implementa il caricamento lento per le immagini lower-the-fold. La maggior parte dei temi Shopify moderni lo supportano in modo nativo. Se il tuo non lo fa, aggiungi il fileloading="lazy"attribuire alle immagini del prodotto nel codice del tema.

Controllo dell'app

Elenca tutte le app che hai installato. Esamina ciascuno di essi e chiedi: lo sto utilizzando attivamente? È utile ai miei obiettivi aziendali?

Disinstalla tutto ciò che non stai utilizzando. Quindi, per le tue app attive, controlla il loro impatto nel rapporto sulla velocità di Shopify. Le app con un impatto a livello di millisecondi (meno di 50 ms) in genere vanno bene. Vale la pena riconsiderare le app che aggiungono più di 200 ms.

Se un'app è essenziale ma lenta, contatta lo sviluppatore. Molti produttori di app possono ottimizzare la distribuzione degli script o fornire alternative di caricamento asincrono. A volte una modifica delle impostazioni migliora notevolmente le prestazioni.

Ottimizzazione del tema

Controlla il codice del tuo tema. La maggior parte dei negozi Shopify può accedere ai file dei temi tramite Amministrazione > Temi > Azioni > Modifica codice. Cerca gonfiore:

• Framework CSS o librerie di utilità non utilizzati
• I caratteri personalizzati non vengono effettivamente visualizzati su nessuna pagina
• JavaScript in linea che potrebbe essere rinviato
• Versioni multiple della stessa libreria (jQuery, Bootstrap, ecc.)
• Polyfill obsoleti per i vecchi browser che non supporti più

Se il tuo tema ha più di 3 anni, valuta la possibilità di passare a un tema Shopify moderno. I nuovi temi sono creati pensando alle prestazioni e utilizzano gli standard web attuali. Ne vale la pena se il tuo tema attuale sta rallentando le vendite.

JavaScript e CSS

Rinviare JavaScript non critico. Lo Script Editor di Shopify ti consente di contrassegnare gli script come asincroni o rinviati. Ciò impedisce loro di bloccare il paint della pagina.

Minimizza e combina i file CSS ove possibile. Più file CSS significano più richieste HTTP. La maggior parte dei moderni creatori di temi lo fa già, ma i temi personalizzati a volte no.

Rimuovi i CSS non utilizzati. Strumenti come PurgeCSS possono identificare le regole CSS mai applicate alla tua pagina e rimuoverle. Questo da solo può ridurre le dimensioni del pacchetto CSS del 40–60%.

Caricamento pigro

Abilita il caricamento lento per tutte le immagini lower-the-fold. In una tipica pagina di prodotto Shopify, ciò include prodotti correlati, recensioni e sezioni a piè di pagina.

Aggiungi l'attributo HTML:<img src="..." loading="lazy">. I browser moderni gestiscono il resto automaticamente. Per le immagini nelle sezioni personalizzate, potrebbe essere necessaria una libreria di caricamento lento JavaScript comelozad.js.

Prova su cellulare. Un visitatore su una rete lenta potrebbe vedere spazi vuoti se le immagini si caricano troppo lentamente. Bilancia il caricamento lento con il precarico aggressivo per le immagini sopra la piega.

CDN e memorizzazione nella cache

Verifica che il CDN di Shopify sia attivo per le tue immagini. Nel tuo pannello di controllo Shopify, tutte le immagini dovrebbero essere pubblicate dacdn.shopify.com. Se vedi URL di dominio personalizzati, potresti avere una configurazione obsoleta.

Imposta le intestazioni della cache nel file di configurazione del tuo tema. I consigli di Shopify sono in genere 30 giorni per le risorse con versione, 1 giorno per CSS/JS e 5 minuti per HTML. Ciò garantisce che i visitatori ripetuti vengano caricati dalla cache anziché scaricati nuovamente.

Se utilizzi Cloudflare, configuralo per memorizzare nella cache le risorse statiche in modo aggressivo. I criteri di cache in conflitto creano penalità in termini di velocità: imposta regole chiare e testa con una nuova sessione del browser dopo aver apportato modifiche.

Shopify Core Web Vitals: spiegazione di LCP, CLS e INP

I Core Web Vitals di Google sono tre parametri che influenzano direttamente il tuo ranking di ricerca e il punteggio dell'esperienza utente. Shopify li evidenzia specificamente nel rapporto sulla velocità.

LCP (Pittura con contenuto più grande)misura il tempo necessario affinché il blocco di testo o l'immagine più grande entri nel viewport. Obiettivo: meno di 2,5 secondi. La maggior parte dei problemi di lentezza di Shopify si manifestano come un LCP scadente. Immagini non ottimizzate, script che bloccano il rendering e risorse lente di terze parti estendono tutti LCP.

CLS (cambio layout cumulativo)misura il movimento imprevisto degli elementi della pagina durante il caricamento. Obiettivo: sotto 0,1. Un classico problema CLS è il caricamento delle immagini senza spazio riservato, causando il salto del testo. Oppure un widget di chat che appare a metà pagina e sposta tutto. CLS raramente rallenta le prestazioni percepite ma danneggia l'esperienza dell'utente e la SEO.

INP (Interazione con la vernice successiva)misura la reattività: la velocità con cui la pagina risponde ai clic o ai tocchi dell'utente. Obiettivo: meno di 200 millisecondi. L'esecuzione pesante di JavaScript, i listener di eventi non ottimizzati e gli elementi interattivi scarsamente codificati danneggiano INP.

I negozi Shopify in genere hanno difficoltà maggiori con LCP (solitamente immagini o app lente), seguiti da CLS (cambiamenti di layout da contenuti caricati lentamente). Per migliorarli tutti e tre: ottimizzare prima le immagini (maggiore impatto LCP), riservare spazio per il contenuto dinamico (correggere CLS) e controllare il tempo di esecuzione di JavaScript (migliora INP).

Quando assumere uno sviluppatore Shopify per l'ottimizzazione della velocità

Puoi ottimizzare molto da solo. Ma alcuni problemi richiedono competenze da parte degli sviluppatori. Ecco tre segnali che indicano che è ora di chiedere aiuto:

Il tuo punteggio PageSpeed non supererà 50anche dopo aver rimosso le app e ottimizzato le immagini. Questo di solito significa che il tuo tema o un'app principale richiede correzioni a livello di codice. Uno sviluppatore può identificare i colli di bottiglia nel codice del tema, ottimizzare l'ordine di rendering e implementare strategie di memorizzazione nella cache avanzate che non è possibile eseguire nell'amministratore.

Il tuo LCP è superiore a 4 secondi e non riesci a identificare il motivo.I grafici a cascata di GTmetrix mostrano il problema, ma risolverlo potrebbe richiedere JavaScript personalizzato, modifiche al tema o negoziare il caricamento asincrono con un fornitore di app. Gli sviluppatori sanno quale leva tirare.

Stai pagando migliaia di dollari in annunci mensili e ogni conversione conta.Su larga scala, un miglioramento di 0,5 secondi può significare migliaia di entrate extra. L’ottimizzazione fai-da-te produce l’80% dei guadagni. L'ultimo 20% richiede un'ingegneria delle prestazioni professionale.

Devmerx è specializzato nell'ottimizzazione della velocità di Shopify. Controlliamo il tuo negozio, identifichiamo i colli di bottiglia esatti e implementiamo soluzioni che portano i tuoi Core Web Vitals al verde. Dai un'occhiata al nostroServizi Shopifyoprenota uno speed audit gratuitoper vedere cosa è possibile fare per il tuo negozio.

Domande frequenti

Il tema Shopify influisce sulla velocità della pagina?

Sì, in modo significativo. Il tuo tema rappresenta il 30-60% del tempo di caricamento della pagina a seconda del tema che utilizzi e di quanto è personalizzato. Un tema moderno ben codificato si carica in 1–2 secondi. Un tema gonfio e obsoleto potrebbe richiedere 3-4 secondi prima di aggiungere app o immagini. Se hai meno di 50 anni su PageSpeed ​​e le tue app sono ottimizzate, è probabile che il problema sia il tuo tema.

Quante app Shopify sono troppe?

Non esiste un numero magico. La maggior parte dei negozi funziona bene con 15-25 app. L'impatto dipende da cosa fanno le app e da come sono codificate. Una singola app mal codificata può danneggiare più di cinque app ben ottimizzate. Controlla in base all'impatto sulle prestazioni, non al conteggio: utilizza il report sulla velocità di Shopify per vedere quali app aggiungono più millisecondi.

La rimozione delle app migliorerà immediatamente il mio punteggio?

Di solito sì, ma non sempre in modo visibile. PageSpeed ​​Insights potrebbe non mostrare un salto di 10 punti dopo aver rimosso un'app. Ma i tuoi visitatori reali sentiranno la differenza. Le pagine vengono visualizzate più velocemente, i pulsanti rispondono più rapidamente e gli utenti percepiscono il tuo negozio come più moderno. Attendi 24-48 ore dopo aver rimosso le app prima di eseguire nuovamente i test.

Qual è il tema Shopify gratuito più veloce?

Il tema Dawn ufficiale di Shopify è costantemente tra i più veloci. È leggero, basato sugli attuali standard web e ottiene un punteggio di 85+ su PageSpeed ​​per la maggior parte dei negozi. Altri temi gratuiti veloci includono Prestige e Refresh. Il tema più veloce che non corrisponde al tuo brand è inutile: scegli un tema che si adatti ai tuoi obiettivi di progettazione, quindi ottimizzalo.

L'ottimizzazione della velocità è uno degli investimenti con il ROI più elevato che un commerciante Shopify possa fare. Inizia con i vantaggi gratuiti (compressione delle immagini, controllo delle app, caricamento lento) e misura l'impatto. Se colpisci un soffitto,prenota uno speed audit gratuitocon il team Devmerx e ti mostreremo esattamente cosa trattiene il tuo negozio.