Come diagnosticare i problemi di caricamento lento di Shopify
Prima di passare alle correzioni, verificare che il caricamento lento sia effettivamente interrotto. Ecco una rapida diagnostica di 2 minuti:
Passaggio 1: controlla la scheda Rete
- 1. Apri il tuo negozio Shopify in Chrome
- 2. Apri DevTools (F12 o Cmd+Alt+I su Mac)
- 3. Vai al Rete
- 4. Filtra per Imm (solo immagini)
- 5. Ricarica difficile: Ctrl+Maiusc+R (o Comando+Maiusc+R)
- 6. Conta le richieste di immagine che si attivano immediatamente
- 7. Ora scorri lentamente verso il basso: compaiono nuove richieste?
Se tutte le immagini vengono caricate contemporaneamente al caricamento della pagina: Il caricamento lento non funziona affatto.
Se alcune immagini vengono caricate durante lo scorrimento ma molte vengono caricate in anticipo: Il caricamento lento funziona parzialmente ma mancano alcune immagini.
Se le immagini vengono caricate progressivamente durante lo scorrimento: Il caricamento lento funziona: il suggerimento di PageSpeed potrebbe riguardare un problema diverso.
Passaggio 2: ispezionare le singole immagini
Fare clic con il pulsante destro del mouse su un'immagine sotto la piega → Ispeziona. Controlla il
Tag <img> per:
loading="lazy" → Il caricamento lento nativo è impostato
class="lazyload" o data-src="..." → Caricamento lento di JavaScript (può funzionare ma aggiunge un sovraccarico)
Attributo
No loading → L'immagine viene caricata con entusiasmo per impostazione predefinita
Puoi anche eseguire un rapido controllo con il ns Test di velocità Shopify gratuito : segnala automaticamente i problemi relativi alle immagini rinviate.
Salta la risoluzione dei problemi: Thunder risolve automaticamente tutti gli 8 problemi
Ciascuna correzione riportata di seguito richiede la modifica del codice del tema, tempo da parte dello sviluppatore e manutenzione continua. Thunder Page Speed Optimizer gestisce il caricamento lento, il differimento degli script, i CSS critici e l'ottimizzazione dei caratteri in un'unica installazione: indipendentemente dal tema o dalla configurazione dell'app.
- ✦ Funziona con qualsiasi tema : caricamento lento vecchio, nuovo, personalizzato o interrotto
- ✦ Gestisce il contenuto inserito dall'app : rinvia gli script e ottimizza l'aggiunta delle risorse alle app
- ✦ Rileva automaticamente l'LCP — non caricare mai in modo pigro ciò che dovrebbe essere desideroso
- ✦ Miglioramento del punteggio di velocità medio di oltre 27 punti
Correzione 1: il tema non usa image_tag
Il problema: Molti temi Shopify, soprattutto quelli creati prima del 2022 o molto personalizzati, usano semplici tag <img> invece del filtro Liquid image_tag di Shopify. Senza image_tag mancano il caricamento differito automatico, le immagini adattive tramite srcset e la distribuzione in WebP.
Come controllare: Apri il codice del tema (Negozio online → Temi → Modifica codice) e cerca image_tag nella sezione file. Se lo trovi prevalentemente crudo <img src= invece, il tuo tema non utilizza la moderna pipeline di immagini di Shopify.
La soluzione: Sostituisci i semplici tag <img> con il filtro image_tag. È necessario modificare i file Liquid del tema:
Prima:
<img src="{{ image | image_url: width: 800 }}" alt="{{ image.alt }}" />Dopo:
{{ image | image_url: width: 800 | image_tag: loading: "lazy", alt: image.alt }}
Per la guida completa all'implementazione del caricamento lento nativo, inclusa la logica di section.index, consulta la nostra Guida nativa al caricamento lento di Shopify.
Correzione 2: le immagini inserite nell'app ignorano il caricamento lento del tema
Il problema: Ogni app Shopify che aggiunge elementi visivi - widget di recensione (Judge.me, Loox), badge di fiducia (Trust Hero), popup di upsell (ReConvert), widget di chat (Tidio) - inserisce il proprio HTML e le immagini direttamente nella pagina. Queste immagini sono no renderizzato tramite i modelli Liquid del tuo tema, quindi la logica di caricamento lento del tuo tema non li tocca mai.
Il negozio Shopify medio ha 6-8 app. Ognuno potrebbe iniettare da 1 a 5 immagini più JavaScript. Si tratta potenzialmente di oltre 30 immagini e script che si caricano con entusiasmo e che il tuo tema non può controllare.
Come controllare: In DevTools, guarda le immagini Below-fold caricate immediatamente. Fare clic con il tasto destro → Ispeziona. Se l'immagine è racchiusa in un file <div> con una classe specifica dell'app (come jdgm-widget o loox-widget) anziché nella sezione HTML del tema, è inserito dall'app.
La soluzione: Questo è il problema più difficile da risolvere manualmente. Opzioni:
Contatta ogni sviluppatore dell'app e chiedi loro di aggiungere loading="lazy" alle immagini iniettate. Alcuni lo faranno, la maggior parte non gli darà la priorità.
Scrivi JavaScript personalizzato che trova le immagini inserite dall'app dopo il caricamento della pagina e aggiunge l'attributo lazy. Questo è fragile e si rompe quando le app aggiornano il loro codice.
Utilizza un'app per l'ottimizzazione della velocità che gestisce gli script delle app a livello di rete, rinviando interi payload delle app finché non sono necessari. Questo è cosa Thunder si attiva automaticamente.
Correzione 3: JavaScript e il caricamento lento nativo sono in conflitto
Il problema: Alcuni temi includono una libreria di caricamento lento JavaScript (come lazysizes) e l’attributo nativo loading="lazy". Ciò crea una doppia elaborazione: l'IntersectionObserver nativo del browser si attiva, e la libreria JS esegue il proprio osservatore. Il risultato può essere immagini che lampeggiano, si caricano due volte o, in alcuni casi, non si caricano mai.
Ciò accade anche quando i commercianti installano un'app di caricamento lento su un tema che dispone già di caricamento lento nativo.
Come controllare: Cerca entrambi nella stessa immagine:
- •
loading="lazy"(nativo) - •
class="lazyload"odata-src(libreria JavaScript)
Se vedi entrambi, c'è un conflitto. Controlla anche la presenza di lazysizes.js o librerie simili nella cartella delle risorse del tuo tema.
La soluzione: Rimuovi la libreria JavaScript di caricamento differito e usa l’attributo nativo loading="lazy". Nel 2026, oltre il 96% dei browser lo supporta, quindi non serve una libreria JS aggiuntiva. Rimuovi il suo script dal tema e sostituisci gli attributi data-src con src, aggiungendo loading="lazy".
Prima (caricamento lento JS):
<img data-src="product.jpg" class="lazyload" alt="Prodotto" />Dopo (caricamento differito nativo):
<img src="product.jpg" loading="lazy" alt="Prodotto" width="600" height="400" />Correzione 4: le immagini di sfondo CSS non possono essere caricate in modo lento
Il problema: L'attributo loading="lazy" funziona solo sugli elementi <img> e <iframe>. Le immagini impostate tramite CSS con background-image vengono sempre scaricate non appena il CSS viene analizzato, anche se l'elemento è molto al di sotto della parte visibile della pagina.
Molti temi utilizzano immagini di sfondo CSS per sezioni di eroi, sovrapposizioni di banner, effetti di parallasse e motivi decorativi. Questi sono invisibili al caricamento lento nativo.
Come controllare: Nella scheda Rete di DevTools, trova le immagini caricate subito ma non visibili sullo schermo. Fai clic sull’URL dell’immagine e controlla se è referenziata in un file CSS anziché in un tag HTML <img>.
La soluzione: Due approcci:
Opzione A: Converti in tag <img>
Sostituisci le immagini di sfondo CSS con veri elementi <img>, posizionati con CSS tramite object-fit: cover e posizionamento assoluto. In questo modo puoi aggiungere loading="lazy".
Opzione B: JavaScript IntersectionObserver
Scrivi JavaScript che rilevi l’avvicinamento delle sezioni fuori schermo e applichi dinamicamente la proprietà CSS background-image. È più complesso, ma conserva la struttura del layout esistente.
Per le sezioni degli eroi Above-fold, le immagini di sfondo CSS vanno bene: loro dovrebbe carica immediatamente. Il problema riguarda le sezioni sotto-piega che utilizzano immagini di sfondo. Scopri di più sull'ottimizzazione di tutti i tipi di immagini nel nostro Guida all'ottimizzazione delle immagini di Shopify.
Correzione 5: nelle sezioni personalizzate manca l’attributo loading
Il problema: Le sezioni predefinite del tuo tema potrebbero gestire correttamente il caricamento lento, ma le sezioni personalizzate, aggiunte dagli sviluppatori o dalle app per la creazione di sezioni, spesso lo saltano. Una singola sezione personalizzata con immagini caricate con entusiasmo può caricare 5-10 immagini extra su ogni pagina.
Come controllare: Ispezionate le immagini in diverse sezioni della vostra pagina. Prestate attenzione alle sezioni che appaiono diverse dallo stile predefinito del tema — queste sono probabilmente aggiunte personalizzate. Controllate ognuna per loading="lazy".
La soluzione: Modifica ogni file di sezione personalizzata e aggiungi la logica di section.index:
{%- liquid
if section.index > 2
assign loading = "lazy"
else
assign loading = "eager"
endif
-%}
{{ section.settings.image | image_url: width: 1200 | image_tag: loading: loading }}
Applicalo a ogni sezione personalizzata che visualizza immagini. Per una panoramica del funzionamento di section.index e di quando usare caricamento differito o immediato, consulta la nostra guida comparativa.
Correzione 6: il tema carica pigramente le immagini Above-Fold (danneggiando LCP)
Il problema: Questo è il problema opposto e, ironicamente, lo è peggio che non avere affatto il caricamento lento. Alcuni temi applicano loading="lazy" a ogni immagine, incluso il banner dell'eroe e la foto principale del prodotto. Ciò forza il browser a eseguire IntersectionObserver prima di scaricare l'immagine più importante, aggiungendo 200–1000 ms al tuo LCP.
⚠️ Questo ti costa 1 secondo di LCP
Il team di performance di Shopify ha misurato a Penalità LCP mediana di 1,0 secondi per i negozi che caricano pigramente la propria immagine LCP. L'immagine del tuo eroe dovrebbe sempre carico impaziente.
Come controllare: Vai alla tua home page. Fai clic con il pulsante destro del mouse sull'immagine dell'eroe/banner → Ispeziona. Se vedi loading="lazy", sta danneggiando il tuo LCP. Fai lo stesso per l'immagine principale del prodotto su una pagina di prodotto.
La soluzione: Cambia le immagini sopra-piega in caricamento rapido e aggiungi fetchpriority="high" alla tua immagine LCP:
{{ section.settings.hero_image | image_url: width: 1400 | image_tag: loading: "eager", fetchpriority: "high" }}Per una risoluzione dettagliata dei problemi LCP, vedere il nostro Guida all'ottimizzazione di Shopify LCP.
Correzione 7: larghezza e altezza mancanti causano uno spostamento del layout
Il problema: Causa immagini caricate pigramente senza dimensioni esplicite Spostamento cumulativo del layout (CLS). Prima che l'immagine venga caricata, il browser non le riserva spazio. Quando l'immagine viene finalmente scaricata, la pagina salta mentre spinge il contenuto verso il basso. I visitatori vedono il testo alternativo in un minuscolo spazio collassato, poi un improvviso cambiamento visivo: un'esperienza terribile.
Come controllare: In DevTools, osserva i salti di layout durante lo scorrimento. Puoi anche eseguire un controllo Lighthouse: i problemi CLS verranno contrassegnati con "Gli elementi dell'immagine non hanno larghezza e altezza esplicite". Attributi
La soluzione: Includi sempre gli attributi width e height nelle immagini, oppure usa la proprietà CSS aspect-ratio:
Opzione A: attributi HTML
<img src="product.jpg" loading="lazy" alt="Prodotto" width="600" height="400" />Opzione B: proporzioni CSS
.product-image {
aspect-ratio: 3 / 2;
width: 100%;
object-fit: cover;
} Suggerimento professionale: Shopify image_tag aggiunge automaticamente gli attributi di larghezza e altezza. Se stai usando raw
Tag <img> , devi aggiungerli tu stesso. Questo è un motivo in più per farlo utilizza il filtro image_tag nativo di Shopify.
Correzione 8: compatibilità con Safari e browser
Il problema: Safari ha aggiunto il supporto nativo per il caricamento lento nella versione 15.4 (marzo 2022). Se state testando in una versione precedente di Safari, il caricamento lento non funzionerà. Più comunemente, la soglia di caricamento lento di Safari è diversa da quella di Chrome — Safari inizia a caricare le immagini lazy prima (più lontano dalla viewport), il che può far sembrare che il caricamento lento non funzioni sui dispositivi Apple.
Come controllare: Se il caricamento lento funziona in Chrome ma non in Safari, controlla la versione di Safari. Tieni inoltre presente che l'implementazione IntersectionObserver di Safari ha margini root leggermente diversi: le immagini potrebbero iniziare a caricare 2-3 altezze dello schermo prima di entrare nel viewport.
La soluzione: Nella maggior parte dei casi, il comportamento di Safari in realtà va bene: è solo più aggressivo riguardo al precaricamento. Se hai bisogno della parità esatta tra i browser, avrai bisogno del caricamento lento basato su JavaScript con soglie esplicite, ma il caricamento lento nativo con soglie predefinite del browser è l'approccio consigliato nel 2026.
Per i veri paranoici, controlla caniuse.com/loading-lazy-attr per il supporto attuale del browser: è superiore al 96% a livello globale, coprendo praticamente tutti gli acquirenti Shopify.
Quando interrompere la risoluzione dei problemi fai-da-te
Se si verificano 2-3 di questi problemi contemporaneamente (cosa comune negli store con temi meno recenti e più app), risolverli manualmente diventa poco pratico. Ogni correzione richiede modifiche al codice del tema che possono interrompersi durante gli aggiornamenti del tema e il contenuto inserito nell'app è essenzialmente fuori dal tuo controllo.
Qui è dove è dedicato App per l'ottimizzazione della velocità si guadagna da vivere. Invece di correggere singoli problemi, ottieni una soluzione che gestisce l'intero stack di ottimizzazione (immagini, script, CSS, caratteri) su qualsiasi tema e qualsiasi combinazione di app.
Non sei pronto per un'app? Come minimo, esegui un test di velocità gratuito per comprendere la tua situazione di base attuale e identificare quali problemi stanno effettivamente incidendo maggiormente sulle tue prestazioni. Per una guida più ampia all'ottimizzazione, il ns guida completa all'ottimizzazione della velocità di Shopify copre ogni tecnica in dettaglio.
Domande frequenti
Come faccio a sapere se il caricamento lento funziona sul mio negozio Shopify?
Apri Chrome DevTools (F12) → scheda Rete → filtra per "Img". Ricarica la pagina ignorando la cache. Se tutte le immagini vengono caricate contemporaneamente durante il caricamento della pagina, il caricamento lento non funziona. Se le richieste di nuove immagini vengono visualizzate solo mentre scorri verso il basso, il caricamento lento è attivo. Puoi anche fare clic con il pulsante destro del mouse su qualsiasi immagine sotto la piega → Ispeziona e cerca loading='lazy' nell'HTML.
Perché PageSpeed Insights continua a indicare "Rinvia immagini fuori schermo" se ho un caricamento lento?
Questo di solito significa che il caricamento lento non viene applicato a tutte le immagini sotto la piega. Cause comuni: il tuo tema carica solo in modo lento alcune immagini ma ne perde altre, le immagini inserite nell'app ignorano il caricamento lento del tema o le immagini di sfondo CSS non possono essere caricate in modo lento con l'attributo di caricamento. Può anche attivarsi se la soglia di caricamento lento del browser carica le immagini leggermente prima che entrino nel viewport.
Le app di Shopify possono interrompere il caricamento lento del mio tema?
Sì. Le app inseriscono il proprio HTML, immagini e script direttamente nel DOM, ignorando completamente i modelli Liquid del tuo tema. Queste immagini inserite nell'app non avranno loading='lazy' a meno che lo sviluppatore dell'app non lo abbia aggiunto specificatamente. Inoltre, alcune app includono il proprio codice JavaScript a caricamento lento che può entrare in conflitto con il caricamento lento del browser nativo, causando una doppia elaborazione o immagini che non vengono mai caricate.
Dovrei usare un'app di caricamento lento o correggerla nel codice del tema?
Se il problema è minore (ad alcune immagini manca l'attributo di caricamento), risolverlo nel codice del tema è semplice. Se disponi di più app che inseriscono immagini, un tema fortemente personalizzato o desideri un'ottimizzazione completa che vada oltre il semplice caricamento lento delle immagini (rinvio di script, CSS critici, precaricamento dei caratteri), un'app come Thunder Page Speed Optimizer gestisce tutto automaticamente e funziona indipendentemente dal tema o dalla configurazione dell'app.
Il caricamento lento funziona su Shopify mobile?
Sì, il caricamento lento nativo (loading='lazy') funziona su tutti i browser mobili moderni, inclusi Safari su iOS 15.4+, Chrome su Android e Samsung Internet. Se il caricamento lento appare interrotto solo sui dispositivi mobili, controlla: librerie di caricamento lento JavaScript che sono in conflitto con i browser mobili, immagini renderizzate in dimensioni diverse sui dispositivi mobili che potrebbero rientrare nella soglia di precaricamento del browser o modelli di temi specifici per dispositivi mobili che non includono l'attributo di caricamento.
Come posso risolvere il problema del caricamento impaziente sull'immagine del banner hero di Shopify theme.liquid?
Se l’immagine principale del banner in theme.liquid usa loading='lazy' anziché loading='eager', può peggiorare LCP fino a 1 secondo. Cerca il tag dell’immagine nel file della sezione dell’intestazione o del banner, non direttamente in theme.liquid: controlla sections/header.liquid o sections/image-banner.liquid. Sostituisci loading='lazy' con loading='eager' e aggiungi fetchpriority='high'. Con image_tag, usa la logica di section.index: le sezioni con indice 1 o 2 devono caricare le immagini subito, quelle successive in modo differito. Thunder Page Speed Optimizer rileva automaticamente l’immagine LCP e non ne ritarda mai il caricamento, indipendentemente dalla configurazione del tema.
Perché le mie immagini caricate lentamente mostrano il testo alternativo prima del caricamento?
Ciò accade quando le immagini caricate pigramente non hanno attributi espliciti di larghezza e altezza (o dimensioni CSS). Senza dimensioni, il browser non può riservare spazio per l'immagine, quindi mostra il testo alternativo in uno spazio compresso. Quando l'immagine viene finalmente caricata, la pagina salta (spostamento del layout). Risolvi questo problema assicurandoti che ogni immagine caricata lentamente abbia attributi di larghezza e altezza oppure utilizza il filtro image_tag di Shopify che aggiunge automaticamente le dimensioni.
Fai in modo che il caricamento lento di Shopify funzioni correttamente
I problemi di lazy loading su Shopify quasi sempre derivano da lacune nell'implementazione del tema, conflitti tra app o comportamento errato della parte above-the-fold. Le soluzioni vanno da semplici (aggiungendo loading="lazy" ad alcune immagini) a complesse (revisione delle sezioni personalizzate e gestione dei contenuti inseriti nell'app).
Ricorda: anche il caricamento lento perfetto riguarda solo la consegna delle immagini. Script di blocco del rendering e CSS non ottimizzati spesso causano più danni delle immagini non differite. Un approccio completo, ovvero la gestione congiunta di immagini, script, CSS e caratteri, garantisce i migliori risultati.
Inizia qui: Metti alla prova la velocità del tuo negozio per vedere esattamente cosa influisce sulle prestazioni, quindi elabora le correzioni di cui sopra oppure lascia che Thunder lo gestisce automaticamente. I piani iniziano alle $ 19,99 al mese con una prova gratuita.