Apri il tuo negozio dallo smartphone e la prima immagine ci mette un’eternità. Oppure provi PageSpeed Insights e ti trovi un punteggio rosso. Ti chiedi se è colpa di Shopify, del tema o delle app.
Per velocizzare Shopify parti dai dati reali dei visitatori (il report Web performance di Shopify e i dati sul campo di PageSpeed Insights), poi intervieni in quest’ordine: app e script che bloccano la pagina, immagini, font e slider in cima, e solo alla fine il tema. Cambiare tema come prima mossa è quasi sempre un errore.
Ti mostro come misuro, le cause che trovo più spesso, il codice Liquid giusto per immagini e script e una checklist finale. Se ti interessa il discorso in generale, per qualsiasi sito, c’è la guida su come velocizzare un sito web in 5 passi.
Misurare bene: dati reali e test di laboratorio
Ci sono due tipi di misure. I dati sul campo vengono dai visitatori veri, con i loro telefoni e le loro connessioni. I test di laboratorio simulano una visita in condizioni fisse. Google stesso, nella sua guida agli strumenti per i Core Web Vitals, consiglia di concentrarsi sui dati sul campo più che sui punteggi di laboratorio.
I dati sul campo si leggono con tre metriche, i Core Web Vitals. Le soglie “buone” le fissa Google su web.dev e valgono per il 75% delle visite:
| Metrica | Cosa misura | Valore buono |
|---|---|---|
| LCP | quanto ci mette a comparire l’elemento principale (di solito la prima immagine) | entro 2,5 secondi |
| INP | quanto risponde la pagina a clic e tocchi | 200 millisecondi o meno |
| CLS | quanto si sposta il contenuto mentre carica | 0,1 o meno |
Il report sulla velocità di Shopify
Shopify raccoglie i Core Web Vitals dai visitatori veri del tuo negozio. Un riepilogo è nella pagina dei Temi dell’admin; i report completi sono in Analisi > Report. Secondo la documentazione di Shopify sulla Web performance, i dati arrivano con un ritardo fino a 36 ore e si vedono solo gli ultimi 90 giorni.
È il primo posto dove guardo, perché parla del tuo negozio e dei tuoi clienti, e funziona anche quando il traffico è troppo poco per avere i dati di Google.
PageSpeed Insights: cosa guardare
Su PageSpeed Insights la parte in alto mostra i dati sul campo raccolti da Chrome negli ultimi 28 giorni, se il sito ha abbastanza visite. La parte in basso è il test di laboratorio, con il famoso punteggio da 0 a 100.
Il punteggio serve per capire dove sta il problema (le voci “Diagnostica” sono utili), non per decidere se il negozio va bene. Un punteggio basso con dati sul campo verdi è un falso allarme; il contrario è un problema vero.
Le cause più comuni di lentezza
Quando analizzo un negozio Shopify lento, il colpevole è quasi sempre in uno di questi tre punti.
App che caricano script ovunque
Ogni app che mostra qualcosa nel negozio (recensioni, popup, chat, badge, upsell) aggiunge il suo JavaScript e il suo CSS, spesso su tutte le pagine, anche dove non serve. Cinque o sei app così si sentono, soprattutto da smartphone. Per un badge di sconto o un avviso “ultimi pezzi” spesso bastano poche righe di Liquid, senza app: ne ho raccolte alcune negli snippet Liquid per Shopify.
C’è anche il codice “fantasma”: alcune app scrivono direttamente nei file del tema, e quel codice resta lì anche dopo averle disinstallate. Lo spiega la guida di Shopify sulla disinstallazione delle app.
Immagini troppo grandi
Una foto da 4000 pixel caricata così com’è, mostrata in un riquadro da 400. Oppure un tema vecchio che non prepara versioni ridotte per il telefono. Le basi le trovi nella guida su come ottimizzare le immagini del sito; qui sotto c’è la parte specifica di Shopify.
Font e slider in cima alla pagina
Lo slider con cinque immagini grandi in testa alla home è il nemico numero uno dell’LCP: il browser deve scaricare molto prima di mostrare qualcosa. Lo stesso vale per i font caricati da servizi esterni, magari in sei spessori diversi. Una sola immagine forte in cima, di solito, funziona meglio anche per chi compra.
Immagini: il codice Liquid giusto
Shopify ridimensiona le immagini al volo dal suo CDN. Il filtro image_url sceglie la larghezza massima, e image_tag genera il tag <img> con l’elenco delle misure (srcset), larghezza e altezza: così il browser scarica solo quello che serve e lo spazio è riservato prima che l’immagine arrivi.
Le regole delle buone pratiche di Shopify sulle prestazioni dei temi sono tre: mai il caricamento differito (lazy) sull’immagine principale, fetchpriority="high" solo su quella e solo una per pagina, lazy su tutte le immagini più in basso.
Ecco come lo scrivo in una sezione con un’immagine grande, nel file sections/immagine-banner.liquid (il nome dipende dal tema). La posizione della sezione nella pagina decide come caricare l’immagine:
sections/immagine-banner.liquid
{%- liquid
assign carica = 'eager'
assign priorita = 'auto'
if section.index == 1
assign priorita = 'high'
elsif section.index > 3
assign carica = 'lazy'
endif
-%}
{{ section.settings.image
| image_url: width: 1500
| image_tag:
widths: '375, 550, 750, 1100, 1500',
sizes: '(min-width: 990px) 50vw, 100vw',
loading: carica,
fetchpriority: priorita,
alt: section.settings.image.alt
}}section.index è la posizione della sezione nella pagina, a partire da 1. Nell’editor del tema è vuoto, quindi lì l’immagine si carica sempre normalmente: è lo stesso schema che usa Shopify nei suoi esempi. Il valore di sizes va adattato alla larghezza reale dell’immagine nel tuo tema. Tutti i parametri sono nel riferimento del filtro image_tag.
Prima di toccare il codice, guarda in PageSpeed Insights qual è l’elemento LCP della pagina. Se è un testo, un video o un’immagine di sfondo messa via CSS, le regole sopra non bastano e serve un intervento diverso.
Script e app: cosa togliere e cosa rimandare
Parto da un elenco delle app installate e per ognuna mi chiedo tre cose: la usi davvero? Ti porta vendite o ti fa risparmiare tempo? Carica codice su pagine dove non serve? Quelle che non passano l’esame vanno via, e dopo la disinstallazione cerco nel tema il codice rimasto, lavorando su una copia.
Le app più recenti si agganciano al tema con blocchi ed “embed” che Shopify toglie da solo quando le disinstalli. Quando posso scegliere tra due app equivalenti, preferisco quella che funziona così.
Per gli script del tema la regola di Shopify è semplice: defer per gli script non essenziali, così non bloccano la lettura della pagina, e async solo per script esterni indipendenti. Nel file layout/theme.liquid:
layout/theme.liquid
<script src="{{ 'theme.js' | asset_url }}" defer></script>Per i font, Shopify consiglia di servirli dal suo CDN invece che da servizi esterni, con font-display: swap perché il testo si veda subito. Se il tema usa i font scelti dalle impostazioni, il filtro font_face fa tutto da solo, sempre in layout/theme.liquid:
layout/theme.liquid
<style>
{{ settings.type_header_font | font_face: font_display: 'swap' }}
</style>settings.type_header_font è il nome dell’impostazione del font dei titoli in molti temi; nel tuo potrebbe chiamarsi in un altro modo. E meno spessori carichi, meglio è.
Tema: quando conviene cambiarlo
Il tema si cambia per ultimo, quando app, immagini e script sono già a posto e i numeri restano brutti. I segnali tipici sono un tema vecchio, pieno di librerie JavaScript caricate su ogni pagina, o così modificato nel tempo che nessuno sa più cosa contiene.
I temi del Theme Store partono da una base controllata: Shopify chiede che abbiano un punteggio medio Lighthouse di almeno 60 su home, prodotto e collezione, da desktop e da mobile, come scritto nei requisiti del Theme Store. Poi però contano le app e le personalizzazioni che ci metti sopra.
Quando servono velocità e un’identità precisa insieme, un tema Shopify personalizzato scritto con poco JavaScript è la strada più pulita. Ma è un investimento: prima sistema il resto e misura di nuovo.
Checklist velocità per il tuo negozio
È l’ordine in cui lavoro io quando un cliente mi dice “il negozio è lento”.
- parto dai dati reali (report di Shopify e dati sul campo di PageSpeed), non dal punteggio;
- immagini con
image_urleimage_tag, conwidthsesizes; - la prima immagine senza lazy, con priorità alta;
- script del tema con
defer; - app inutili disinstallate e codice rimasto ripulito;
- font serviti dal CDN di Shopify, con
swape pochi spessori; - niente slider o video automatici pesanti in cima alla pagina;
- ricontrollo i dati dopo qualche settimana, perché i dati sul campo si aggiornano lentamente.
Se vuoi una lista più ampia, che va oltre la velocità, c’è la mia checklist per ottimizzare un sito già online.
Domande frequenti
Conclusione
Un negozio Shopify lento quasi mai si sistema con una bacchetta magica. Si misura con i dati reali, si tolgono le app che pesano, si caricano bene le immagini, si rimandano gli script. Quando i numeri restano brutti, si guarda il tema.
Se vuoi che me ne occupi io, posso farlo come intervento singolo o dentro il servizio di assistenza e manutenzione del negozio; se il problema è il tema, ne parliamo nella pagina su realizzazione e migrazione Shopify.
Vuoi sapere perché il tuo negozio è lento? Mandami il link dalla pagina contatti: guardo io report e app installate. Ti rispondo io.
