Shopify CDN: ottimizzare immagini

Le immagini sono il 60-80% del peso di una pagina e-commerce. Shopify usa un CDN globale (Fastly) che serve immagini ottimizzate automaticamente, ma per sfruttarlo al meglio serve seguire alcune regole. In questa guida vediamo formati, dimensioni, lazy load e come migliorare Lighthouse score.

Come funziona il CDN Shopify

Ogni immagine caricata in Shopify (su prodotto, articolo, page, theme asset) è servita da CDN Shopify con URL tipo cdn.shopify.com/s/files/.../image.jpg. Il CDN: cachea globalmente in 200+ PoP, genera variants on-the-fly (es. 200x200, 400x400), serve formato moderno (WebP, AVIF) se browser supporta, compressione automatica con qualità ottimale.

Filter image_url

In Liquid usa il filter image_url per richiedere dimensioni specifiche: {{ product.featured_image | image_url: width: 800 }}. Genera URL CDN con resize 800px lato lungo. Aggiungi crop, format, quality per controllo: {{ image | image_url: width: 800, crop: 'center', format: 'webp' }}.

Procedura passo-passo per ottimizzare

1. Carica immagini di alta qualità originali (2400x2400 minimo per prodotti).
2. Usa sempre image_url con width adeguata al rendering (no immagini 2400 in card 300px).
3. Aggiungi loading="lazy" alle immagini below-the-fold.
4. Aggiungi width e height attributi per evitare CLS (Cumulative Layout Shift).
5. Usa srcset per responsive: <img srcset="{{ img | image_url: width: 400 }} 400w, {{ img | image_url: width: 800 }} 800w" sizes="(max-width: 600px) 100vw, 50vw">.
6. Per hero/LCP image aggiungi fetchpriority="high".
7. Preload critical: <link rel="preload" as="image" href="{{ hero | image_url: width: 1600 }}">.
8. Limita immagini sopra-piega: max 3-4 immagini caricate immediatamente.
9. Comprimi prima di upload con TinyPNG/Squoosh per ulteriore guadagno.

Formati moderni

Shopify serve automaticamente WebP a browser supportati (95% del traffico moderno). AVIF è in rollout. Non devi convertire manualmente: carica JPG/PNG originali, Shopify converte al volo. Per file con trasparenza usa PNG, per foto JPG.

Errori comuni e come risolverli

• Immagini originali troppo grandi: 10MB upload occupano spazio e rallentano backup; ottimizza a 1-2MB prima di upload.
• No width/height su img tag: causa CLS, penalità Lighthouse e SEO.
• Lazy load above-the-fold: lazy load su hero ritarda LCP; usa fetchpriority="high" per hero.
• Immagini servite a dimensione sbagliata: foto 2400px in thumbnail 200px spreca banda; usa image_url con width corretta.
• Hot-link da altri domini: se carichi via URL esterni, Shopify non li ottimizza.

Domande frequenti

D: Posso usare CDN esterno (Cloudinary, imgix)?
R: Sì ma raramente conviene, il CDN Shopify è ottimo. Eccezioni: video heavy, AR/3D models.

D: Shopify ha limite upload?
R: 20MB per file immagine, 1GB per video.

D: I temi Dawn ottimizzano automaticamente?
R: Sì, Dawn usa image_url, srcset, lazy load nativamente.

Art direction e responsive

Per layout complessi (immagine quadrata mobile, paesaggio desktop), usa picture element con multiple sources:
<picture> <source media="(max-width: 600px)" srcset="{{ img | image_url: width: 600 }}"> <source media="(min-width: 601px)" srcset="{{ img_landscape | image_url: width: 1200 }}"> <img src="{{ img | image_url: width: 800 }}" alt="..."> </picture>
Permette art direction (crop diverso per device) e download della sola immagine necessaria.

Video e media oltre immagini

Shopify ospita anche video (MP4) e modelli 3D (GLB) sui prodotti. Per video: usa poster attribute per anteprima statica, preload="none" per non caricare prima di click, lazy embed YouTube/Vimeo con thumbnail click-to-load. Modelli 3D supportati nativamente con AR viewer su iOS/Android: il tag model-viewer renderizza GLB direttamente. Riduzione conversione: video in pagina prodotto +25-30%, 3D/AR +10-40% per categorie specifiche (gioielli, mobili).

Checklist operativa

Prima di considerare l'argomento implementato correttamente, verifica questa checklist sintetica: configurazione tecnica testata in ambiente di staging o development store, backup attivo prima di ogni modifica critica, documentazione interna aggiornata per il team operativo, training agli operatori che useranno la funzionalità, monitoraggio di metriche chiave (conversion rate, AOV, ticket support) per 30 giorni post-implementazione, revisione legale se l'implementazione tocca aspetti GDPR, fiscali o di pagamento, piano di rollback chiaro nel caso di problemi imprevisti, comunicazione ai clienti se il cambiamento influenza la loro esperienza (es. nuovo checkout, nuovi metodi di pagamento, nuovi tempi di spedizione). Una implementazione tecnica senza queste fasi di accompagnamento spesso non produce i risultati attesi e genera attriti interni o sui clienti.

Risorse utili e community

Per approfondire ulteriormente: la documentazione ufficiale Shopify su shopify.dev e help.shopify.com aggiorna costantemente le guide; il Shopify Community Forum ha thread attivi su quasi ogni argomento con risposte da Shopify Experts; Shopify Partner Academy offre corsi gratuiti per merchant e sviluppatori; YouTube channel ufficiale Shopify pubblica walkthrough delle nuove feature. Per il mercato italiano cerca community come Shopify Italia su Facebook o gruppi LinkedIn dedicati a e-commerce manager italiani: il confronto con altri merchant che vivono problemi simili è una scorciatoia preziosa rispetto a documentazione internazionale generica.

Una buona pratica supplementare è coinvolgere il proprio commercialista o consulente fiscale per qualsiasi configurazione che impatti su fatturazione, IVA o regimi speciali: in Italia ogni semplificazione tecnica deve essere accompagnata da verifica legale puntuale per evitare contestazioni successive. Allo stesso modo, valuta sempre l'impatto SEO di ogni cambiamento: monitora Search Console per le 4-6 settimane successive alla modifica, controlla che il numero di pagine indicizzate non cali e che le query principali continuino a posizionarsi. Per modifiche al tema, mantieni sempre una copia del tema precedente come fallback e documenta i cambiamenti in un changelog interno consultabile dal team. Una governance leggera ma costante è la differenza tra uno store che cresce nel tempo e uno che accumula debito tecnico nascosto.

Hai bisogno di aiuto?

Se vuoi un Shopify ottimizzato dal team di G Tech Group, scrivici tramite il modulo di contatto.