Velocizzare Shopify: tema, app e immagini

Tutti i negozi Shopify girano sugli stessi server e sullo stesso CDN, quindi un negozio lento è lento per quello che carica: il tema, gli script delle app, le immagini e i video. Ottimizzare la velocità su Shopify significa togliere e alleggerire queste cose, non cambiare hosting. Nella maggior parte dei negozi i guadagni maggiori arrivano dal rimuovere il codice delle app inutilizzate, comprimere l'immagine principale e caricare i widget più tardi.

Questa guida mostra come misurare bene la velocità, poi passa in rassegna le correzioni nell'ordine in cui di solito rendono di più. Fa parte della guida alla SEO per Shopify.

Misura le pagine giuste

Testa una pagina prodotto e una pagina di collezione, non solo la homepage. Sono quelle le pagine che si posizionano e su cui arrivano gli acquirenti.

Google PageSpeed Insights dà punteggi di laboratorio per un singolo caricamento e, se il negozio ha abbastanza visitatori, i Core Web Vitals reali degli utenti di Chrome negli ultimi 28 giorni. Sono i numeri degli utenti reali quelli che usa Google.
Il report Core Web Vitals di Search Console raggruppa gli URL per stato, così vedi se tutte le pagine prodotto hanno lo stesso problema.
Il report sulle prestazioni web di Shopify in Analytics mostra le stesse metriche degli utenti reali nel tempo, utile per capire se una modifica ha aiutato.

Concentrati sui tre Core Web Vitals: Largest Contentful Paint (quanto velocemente compare l'immagine o il testo principale), Interaction to Next Paint (quanto velocemente la pagina risponde a un tocco) e Cumulative Layout Shift (quanto si spostano gli elementi). I punteggi di laboratorio cambiano da un test all'altro: non inseguire un 100 perfetto.

1. Rimuovi il codice delle app che non usi

Le app sono la causa più comune di un negozio Shopify lento. Ognuna che interviene sul negozio online può aggiungere JavaScript e CSS a ogni pagina.

Fai l'elenco delle app installate. Disinstalla quelle che non usi più.
Disinstallare non sempre rimuove il codice che un'app ha aggiunto al tema. Cerca il nome dell'app nei file del tema (Online Store > Themes > Edit code) e rimuovi gli snippet e i tag script rimasti.
Preferisci le app che usano le estensioni app del tema (blocchi app che aggiungi nell'editor del tema). Vengono rimosse in modo pulito quando le disinstalli e si caricano solo dove le inserisci.
Per le app che tieni, controlla se si caricano su ogni pagina. Una tabella delle taglie serve solo nelle pagine prodotto.

2. Sistema l'immagine più grande

Nella maggior parte delle pagine prodotto e di collezione, l'elemento più grande è una foto del prodotto o un banner. Rendilo veloce:

Carica file ragionevoli. Ridimensiona le foto a circa 2.000-2.500 pixel di larghezza prima del caricamento e comprimile. Il CDN di Shopify serve in automatico versioni ridimensionate e formati moderni come WebP, ma un originale enorme costa comunque tempo.
Non usare il lazy loading sulla prima immagine. Le immagini in cima alla pagina devono caricarsi subito. Il lazy loading è per le immagini più in basso.
Usa immagini responsive. I temi attuali usano i filtri image_url e image_tag di Shopify per servire la misura giusta per ogni schermo. I temi più vecchi possono servire un'unica misura grande a ogni dispositivo.
Evita i video in riproduzione automatica in apertura. Se ti serve un video, mostra prima un'immagine di anteprima e carica il video dopo.

3. Carica i widget più tardi

Recensioni, chat, pop-up, caroselli di upsell e feed social raramente devono caricarsi prima del prodotto.

Carica chat e pop-up dopo che la pagina è interattiva o dopo un ritardo.
Metti i widget delle recensioni sotto la parte visibile, così non bloccano il contenuto principale. Tieni il testo delle recensioni nell'HTML della pagina per la SEO.
Rimuovi i pixel di tracciamento di terze parti che non guardi più. Ognuno è un altro script.

4. Usa un tema aggiornato

I temi costruiti per Online Store 2.0, compresi i temi gratuiti di Shopify basati su Dawn, sono pensati per blocchi app, immagini responsive e JavaScript più leggero. Un tema di qualche anno fa con slider pesanti e jQuery può essere lento qualsiasi cosa tu tolga.

Prima di cambiare, testa la pagina prodotto della demo del nuovo tema in PageSpeed Insights. Un tema lento nella sua demo sarà lento anche con i tuoi prodotti.

5. Ferma gli spostamenti del layout

I contenuti che si spostano mentre la pagina si carica peggiorano il Cumulative Layout Shift e infastidiscono gli acquirenti.

Dai larghezza e altezza alle immagini (il filtro image_tag di Shopify le aggiunge).
Riserva lo spazio per banner e barre di annuncio che compaiono dopo il caricamento.
Carica i font personalizzati con font-display: swap e limita il numero di pesi.

Cosa aiuta poco

App per velocizzare. La maggior parte aggiunge un proprio script alla pagina. Togliere codice funziona meglio che aggiungerne.
Cambiare hosting o CDN. Su Shopify non puoi, e non ti serve.
Minificare qualche kilobyte di CSS. Raramente sposta le metriche degli utenti reali rispetto al rimuovere un'app o sistemare l'immagine principale.

Mantenerlo veloce

La velocità peggiora man mano che aggiungi app e sezioni. Ricontrolla una pagina prodotto dopo ogni nuova app e guarda il report Core Web Vitals ogni mese. Un audit del sito, come quello di zaDojo, segnala pagine lente e immagini troppo pesanti in tutto il negozio, così non devi testare le pagine una alla volta.

Domande frequenti

La velocità di Shopify influisce sulla SEO? Sì, un po'. I Core Web Vitals sono un fattore di posizionamento, ma contenuti e pertinenza contano di più. La velocità conta di più per le vendite: gli acquirenti abbandonano le pagine prodotto lente.

Qual è un buon punteggio di velocità per Shopify? Punta a Core Web Vitals "buoni" nei dati degli utenti reali (Largest Contentful Paint sotto 2,5 secondi, Interaction to Next Paint sotto 200 millisecondi, Cumulative Layout Shift sotto 0,1). Il punteggio di laboratorio su 100 è un'indicazione, non un obiettivo.

Perché il mio negozio Shopify è lento su mobile? I telefoni hanno processori e connessioni più lenti, quindi il JavaScript pesante delle app pesa molto di più. Testa prima su mobile.