Shopify carica automaticamente le immagini in modo lento?

Parzialmente. Il tema Dawn di Shopify e la maggior parte dei temi moderni impostano il caricamento = 'lazy' sulle immagini Below the Fold utilizzando il filtro Liquid image_tag. Tuttavia, funziona solo se lo sviluppatore del tema lo ha implementato correttamente. Molti temi più vecchi e temi personalizzati non si caricano affatto o, peggio, caricano pigramente tutto, inclusa l'immagine dell'eroe, il che danneggia LCP. Thunder Page Speed Optimizer gestisce tutto questo automaticamente, applicando un caricamento lento intelligente alle immagini sotto-piega e assicurando al tempo stesso che le immagini sopra-piega vengano caricate con entusiasmo.

Il caricamento lento può danneggiare le prestazioni del mio negozio Shopify?

Sì, se applicato in modo errato. Il caricamento lento dell'immagine hero o dell'elemento LCP aggiunge un ritardo non necessario perché il browser attende che JavaScript rilevi che l'immagine è nel viewport prima di caricarla. Il team dedicato alle prestazioni di Shopify ha scoperto che i negozi che caricano in modo lento la propria immagine LCP hanno un LCP medio di 1,0 secondi più lento rispetto a quelli che la caricano con entusiasmo. La regola è semplice: caricare con entusiasmo sopra la piega, caricare pigramente sotto. Thunder applica questa regola automaticamente.

Qual è la differenza tra il caricamento lento nativo e il caricamento lento JavaScript?

Il caricamento lento nativo utilizza l'attributo load='lazy' integrato nel browser: non è richiesto JavaScript aggiuntivo. Il caricamento lento di JavaScript utilizza librerie come lazysizes con l'API IntersectionObserver. Il caricamento lento nativo è ora consigliato perché è più leggero (zero sovraccarico JS), supportato da oltre il 96% dei browser e gestisce automaticamente il degrado graduale. L'unico vantaggio che il caricamento lento basato su JS ha ancora è un controllo più granulare sulle soglie di caricamento, che raramente è importante per la maggior parte dei negozi Shopify.

Dovrei caricare lentamente gli script dell'app Shopify?

Assolutamente. Gli script di app di terze parti sono uno dei più grandi killer della velocità su Shopify. Sebbene non sia possibile eseguire il caricamento lento degli script allo stesso modo delle immagini, è possibile posticiparli, caricandoli dopo il rendering del contenuto critico. Tecnicamente si tratta di un differimento dello script piuttosto che di un caricamento lento, ma il concetto è lo stesso: ritardare le risorse non critiche. Thunder lo fa automaticamente per tutti gli script dell'app, motivo per cui la maggior parte dei negozi riscontra miglioramenti del punteggio di velocità di oltre 20-30 punti.

Come posso verificare se il caricamento lento funziona sul mio negozio Shopify?

Apri il tuo negozio in Chrome, fai clic con il pulsante destro del mouse su un'immagine Below the Fold e seleziona Ispeziona. Cerca load='lazy' nel tag img. Puoi anche aprire Chrome DevTools → scheda Rete → filtra per "Img" → scorrere la pagina e osservare le nuove richieste di immagini visualizzate mentre scorri. Se tutte le immagini vengono caricate contemporaneamente al caricamento della pagina, il caricamento lento non funziona. Per un controllo completo, gestisci il tuo negozio tramite PageSpeed Insights e controlla il suggerimento "Rimanda immagini fuori schermo".

Il caricamento lento influisce sulla SEO su Shopify?

When implemented correctly, lazy loading has zero negative SEO impact. Googlebot renders JavaScript and can see lazy-loaded images. The key is ensuring your images have proper alt text and are in the HTML (not dynamically injected). Native lazy loading with loading='lazy' is fully supported by Google's crawler. The SEO risk comes from broken implementations where images are hidden behind JavaScript that Googlebot can't execute — but this isn't a concern with native lazy loading or Thunder's implementation.

Guida al caricamento lento di Shopify: immagini, video e script (2026)

Cos'è il caricamento lento?

Il caricamento lento è una strategia che ritarda il caricamento delle risorse non critiche finché non sono effettivamente necessarie. Invece di scaricare tutte le immagini sulla pagina nel momento in cui arriva un visitatore, il browser carica le immagini solo mentre il visitatore scorre verso di esse.

Pensatelo come la cucina di un ristorante: invece di preparare ogni piatto del menu nel momento in cui apre il ristorante, cucinano ogni piatto quando un cliente lo ordina. Il risultato? Primo servizio più rapido e meno fatica sprecata.

In una tipica pagina di prodotto o collezione Shopify, potresti avere 20-50 immagini. Senza il caricamento lento, il browser tenta di scaricarli tutti contemporaneamente, lottando per la larghezza di banda e rallentando le immagini che il tuo visitatore vede per prime: il banner principale, la foto del prodotto, le icone di navigazione.

Con il caricamento lento, solo il sopra la piega Le immagini vengono caricate immediatamente. Tutto sotto la piega attende finché il visitatore non scorre vicino ad esso. Il risultato: rendering della pagina iniziale più veloce, minore utilizzo della larghezza di banda e un'esperienza migliore, soprattutto sui dispositivi mobili.

Come funziona tecnicamente: Il browser utilizza il file API IntersectionObserver per osservare quando un elemento sta per entrare nella finestra. Quando rileva che l'immagine è vicina, avvia il download. Con caricamento lento nativo (caricamento="pigro"), this is all handled by the browser — zero JavaScript required from your end.

Perché il caricamento lento è importante per i negozi Shopify

I negozi Shopify sono ricchi di immagini per natura. Foto di prodotti, immagini di lifestyle, banner di collezioni, badge di fiducia, widget di app: una tipica home page può facilmente contenere più di 30 immagini per un totale di 5-15 MB di dati.

Senza il caricamento lento, tutte queste immagini competono per la larghezza di banda al caricamento iniziale della pagina. Ecco cosa significa in pratica:

→

LCP più lento (pittura con contenuto più grande): L'immagine hero, l'elemento visivo più importante, si carica più lentamente perché condivide la larghezza di banda con altre 30 immagini a cui il visitatore non ha ancora effettuato lo scorrimento.

→

Frequenze di rimbalzo più elevate su dispositivi mobili: Le connessioni mobili sono più lente e variabili. Il caricamento di 10 MB di immagini su una connessione 4G può richiedere 8-12 secondi. Se il tuo negozio non esegue il rendering velocemente, i visitatori rimbalzano — e non tornano.

→

Larghezza di banda sprecata: La maggior parte dei visitatori non scorre fino alla fine della pagina. Se il 60% delle tue immagini sono lower the fold e il 70% dei visitatori se ne va prima di scorrere, stai scaricando megabyte di dati che nessuno vede.

→

Valori vitali web inferiori inferiori: Google utilizza Core Web Vitals come segnale di classifica. Un caricamento eccessivo delle immagini ha un impatto diretto su LCP e può causare spostamenti di layout (CLS) se le dimensioni dell'immagine non sono impostate.

Il caricamento lento corretto può ridurre il peso della pagina iniziale di 40–70% su pagine ricche di immagini. Ciò si traduce direttamente in una prima verniciatura più rapida e in una migliore esperienza utente. Tuttavia, il caricamento lento è solo un pezzo del puzzle: per un quadro completo, leggi il nostro guida completa all'ottimizzazione.

L'errore di caricamento lento n. 1 (e ti costa 1 secondo)

Ecco la verità controintuitiva: l'errore più comune nel caricamento lento non è il mancato caricamento lento: il caricamento lento è troppo aggressivo.

Nello specifico, caricamento lento dell'immagine dell'eroe o dell'elemento LCP. Secondo Il team di performance di Shopify:

⚠️ Il killer dell'LCP

"I siti Shopify che caricano lentamente la propria immagine LCP hanno un LCP mediano che è 1,0 secondo più lento rispetto a quelli carichi di entusiasmo."

— Shopify Performance Team, performance.shopify.com

Perché succede questo? Quando imposti caricamento="pigro" su un'immagine Above the Fold, aggiungi un passaggio non necessario:

Senza caricamento lento (corretto):

Il browser legge l'HTML → Trova l'immagine → Avvia immediatamente il download

Con caricamento lento su LCP (sbagliato):

Il browser legge l'HTML → Trova l'immagine → Contrassegna come pigra → Attende IntersectionObserver → Rileva che l'immagine è nel viewport → Allora inizia il download

Questo passaggio di rilevamento aggiuntivo aggiunge 200–1000 ms di ritardo all'immagine più importante. Sui dispositivi mobili con esecuzione JavaScript più lenta, è anche peggio.

La regola è semplice:

✓ Sopra la piega: Carico impaziente (n Attributo caricamento Attributo , o caricamento="ansioso")
✓ Below the fold: Carico lento (caricamento="pigro")
✗ Mai: Caricamento lento dell'immagine hero, dell'immagine in evidenza del prodotto o di qualsiasi candidato LCP

Sembra semplice, vero? In pratica, è complicato. "Above the fold" è diverso su ogni dispositivo, ogni dimensione dello schermo e ogni modello di pagina. Ciò che è Above the Fold su un monitor desktop da 27 pollici potrebbe essere Below The Fold su un iPhone SE. Per farlo correttamente manualmente è necessaria una consapevolezza reattiva su decine di punti di interruzione.

⚡

Salta il lavoro manuale: Thunder gestisce automaticamente il caricamento lento

Si applica l'ottimizzatore di velocità della pagina Thunder strategie di caricamento intelligenti in tutto il tuo negozio. Identifica automaticamente la tua immagine LCP e la carica con entusiasmo mentre carica pigramente tutto sotto la piega: nessuna modifica al codice, nessuna modifica del tema, nessuna ipotesi sui punti di interruzione.

Ma Thunder va oltre il semplice caricamento lento. Inoltre:

✦ Rinvia gli script delle app che bloccano il rendering : il più grande killer di velocità che il solo caricamento lento non può risolvere
✦ Inline CSS critici in modo che la tua pagina venga visualizzata immediatamente
✦ Precarica i caratteri per eliminare Flash of Invisible Text (FOIT)
✦ Monitora quotidianamente in modo che le ottimizzazioni rimangano efficaci quando aggiungi prodotti e app

La maggior parte dei negozi vede a Miglioramento del punteggio di velocità di oltre 27 punti entro pochi minuti dall'installazione. Non è necessario alcuno sviluppatore. Controlla i piani per trovare la soluzione giusta per il tuo negozio.

Installa Thunder — Prova gratuita →

Hai già installato Thunder? Puoi saltare le sezioni di implementazione manuale di seguito: Thunder gestisce tutto automaticamente. Continua a leggere se vuoi capire cosa sta succedendo sotto il cofano.

Lazy Loading nativo vs JavaScript: quale utilizzare nel 2026

Esistono due approcci al caricamento lento delle immagini e questa decisione conta più di quanto si renda conto la maggior parte degli sviluppatori Shopify.

Caricamento lento nativo (`caricamento="pigro"`)

Aggiunto alle specifiche HTML nel 2019, il caricamento lento nativo è ora supportato da Oltre il 96% dei browser (tutte le versioni moderne di Chrome, Firefox, Safari e Edge). Aggiungi semplicemente caricamento="pigro" al tuo Tag o Elementi</code> : </p> <div class="bg-gray-900 rounded-xl p-5 mb-4"> <pre class="text-sm text-gray-100 overflow-x-auto"><code><img src="product-photo.jpg" loading="lazy" alt="Scarpe da corsa blu - vista laterale" width="800" height="600" /></code></pre> </div> <p class="text-gray-600 leading-relaxed mb-4"> Questo è tutto. Nessuna libreria JavaScript, nessuna configurazione, nessun aumento delle dimensioni del pacchetto. Il browser gestisce tutto. </p> <h3 class="text-xl font-bold mb-4 mt-8">Caricamento lento JavaScript (lazysize, ecc.)</h3> <p class="text-gray-600 leading-relaxed mb-4"> Prima del caricamento lento nativo, l'approccio standard utilizzava librerie JavaScript come <a href="https://github.com/aFarkas/lazysizes" target="_blank" rel="noopener noreferrer" class="text-amber-600 hover:text-amber-700">pigro</a>. Queste librerie utilizzano l'API IntersectionObserver per rilevare quando le immagini si avvicinano al viewport, quindi scambiano un segnaposto <code>origine-dati</code> con il reale <code>src Attributi</code>. </p> <div class="bg-gray-900 rounded-xl p-5 mb-4"> <pre class="text-sm text-gray-100 overflow-x-auto"><code> <img data-src="product-photo.jpg" class="lazyload" alt="Scarpe da corsa blu - vista laterale" /> <script src="lazysizes.min.js" async></script></code></pre> </div> <p class="text-gray-600 leading-relaxed mb-6"> Funziona ancora ma aggiunge un sovraccarico di JavaScript: in genere 5-10 KB di script aggiuntivo che deve essere scaricato, analizzato ed eseguito prima che inizi qualsiasi caricamento lento. </p> <h3 class="text-xl font-bold mb-4">Confronto</h3> <div class="overflow-x-auto mb-6"> <table class="w-full text-sm border-collapse"> <thead> <tr class="bg-gray-50"> <th class="text-left p-3 border border-gray-200 font-semibold"></th> <th class="text-left p-3 border border-gray-200 font-semibold">Nativo (<code>caricamento="pigro"</code>)</th> <th class="text-left p-3 border border-gray-200 font-semibold">JavaScript (dimensioni pigre)</th> </tr> </thead> <tbody> <tr> <td class="p-3 border border-gray-200 font-medium">JS in testa</td> <td class="p-3 border border-gray-200 text-green-700">Zero</td> <td class="p-3 border border-gray-200 text-red-700">5–10 KB</td> </tr> <tr class="bg-gray-50"> <td class="p-3 border border-gray-200 font-medium">Supporto del browser</td> <td class="p-3 border border-gray-200">96%+</td> <td class="p-3 border border-gray-200">100% (poliriempito)</td> </tr> <tr> <td class="p-3 border border-gray-200 font-medium">Complessità di installazione</td> <td class="p-3 border border-gray-200 text-green-700">Un attributo</td> <td class="p-3 border border-gray-200 text-red-700">Libreria + nomi di classi</td> </tr> <tr class="bg-gray-50"> <td class="p-3 border border-gray-200 font-medium">Controllo soglia</td> <td class="p-3 border border-gray-200">Decide il browser</td> <td class="p-3 border border-gray-200 text-green-700">Personalizzabile</td> </tr> <tr> <td class="p-3 border border-gray-200 font-medium">Sicurezza SEO</td> <td class="p-3 border border-gray-200 text-green-700">Completo (immagini in HTML)</td> <td class="p-3 border border-gray-200">Dipende dall'implementazione</td> </tr> <tr class="bg-gray-50"> <td class="p-3 border border-gray-200 font-medium">Ripiego</td> <td class="p-3 border border-gray-200 text-green-700">Carichi impazienti (aggraziati)</td> <td class="p-3 border border-gray-200 text-red-700">Le immagini potrebbero non essere caricate</td> </tr> <tr> <td class="p-3 border border-gray-200 font-medium">Raccomandazione (2026)</td> <td class="p-3 border border-gray-200 text-green-700 font-bold">✓ Usa questo</td> <td class="p-3 border border-gray-200 text-gray-400">Legacy: eliminazione graduale</td> </tr> </tbody> </table> </div> <div class="bg-blue-50 border border-blue-200 rounded-xl p-5"> <p class="text-sm text-gray-700"> <strong>Conclusione:</strong> Nel 2026, utilizza il caricamento lento nativo. Il 4% dei browser che non lo supportano si limiteranno a caricare le immagini, il che va benissimo. Non c'è più motivo di aggiungere una libreria JavaScript per questo. Se il tuo tema utilizza ancora lazysizes, è ora di eseguire la migrazione. </p> </div> </section>  <section id="what-to-lazy-load" class="mb-16"> <h2 class="text-2xl md:text-3xl font-bold mb-6">Cosa caricare lentamente (e cosa NON caricare)</h2> <p class="text-gray-600 leading-relaxed mb-4"> Non tutte le risorse dovrebbero essere trattate allo stesso modo. Ecco una ripartizione pratica per i negozi Shopify: </p> <h3 class="text-xl font-bold mb-4 mt-8 text-green-700">✓ Carica pigramente questi</h3> <div class="space-y-3 mb-8"> <div class="flex gap-3 items-start"> <span class="text-green-600 font-bold mt-0.5 shrink-0">✓</span> <p class="text-gray-600"><strong>Immagini dei prodotti nelle griglie della collezione</strong> : sotto la prima riga, carica lentamente tutte le miniature. Una pagina di collezione con 48 prodotti non necessita di tutte le 48 immagini al caricamento iniziale.</p> </div> <div class="flex gap-3 items-start"> <span class="text-green-600 font-bold mt-0.5 shrink-0">✓</span> <p class="text-gray-600"><strong>Sezioni sotto-piega</strong> — Testimonianze, feed di Instagram, caroselli "Potrebbe piacerti anche", anteprime dei post di blog: tutto ciò che un visitatore deve scorrere per vedere.</p> </div> <div class="flex gap-3 items-start"> <span class="text-green-600 font-bold mt-0.5 shrink-0">✓</span> <p class="text-gray-600"><strong>Incorporamenti YouTube/Vimeo</strong> — gli iframe sono costosi. Un singolo incorporamento di YouTube carica oltre 500 KB di script. Utilizzare <code>caricamento="pigro"</code> sugli iframe o sostituisci con una miniatura statica che carica l'iframe al clic (modello della facciata).</p> </div> <div class="flex gap-3 items-start"> <span class="text-green-600 font-bold mt-0.5 shrink-0">✓</span> <p class="text-gray-600"><strong>Immagini aggiuntive del prodotto</strong> — Nelle pagine dei prodotti, le immagini della galleria oltre la foto in primo piano possono essere caricate in modo lento.</p> </div> <div class="flex gap-3 items-start"> <span class="text-green-600 font-bold mt-0.5 shrink-0">✓</span> <p class="text-gray-600"><strong>Contenuto del piè di pagina</strong> — Badge di fiducia, icone di pagamento, immagini della sezione newsletter: tutto sotto si ripiega su ogni pagina.</p> </div> </div> <h3 class="text-xl font-bold mb-4 text-red-700">✗ Non caricarli mai pigramente</h3> <div class="space-y-3 mb-6"> <div class="flex gap-3 items-start"> <span class="text-red-600 font-bold mt-0.5 shrink-0">✗</span> <p class="text-gray-600"><strong>Immagini di eroi/banner</strong> — Questo è quasi sempre il tuo elemento LCP. Il caricamento lento costa circa 1 secondo. Carico sempre desideroso. Considera l'idea di aggiungere <code><link rel="precarica"></code> per una velocità extra.</p> </div> <div class="flex gap-3 items-start"> <span class="text-red-600 font-bold mt-0.5 shrink-0">✗</span> <p class="text-gray-600"><strong>Immagine di presentazione del prodotto</strong> — La foto principale del prodotto su un PDP è il candidato LCP. Caricalo immediatamente.</p> </div> <div class="flex gap-3 items-start"> <span class="text-red-600 font-bold mt-0.5 shrink-0">✗</span> <p class="text-gray-600"><strong>Logo e immagini di navigazione</strong> — Sono piccoli, sopra la piega e fondamentali per la prima verniciatura. Non ritardarli.</p> </div> <div class="flex gap-3 items-start"> <span class="text-red-600 font-bold mt-0.5 shrink-0">✗</span> <p class="text-gray-600"><strong>Immagini di sfondo impostate tramite CSS</strong> — <code>caricamento="pigro"</code> funziona solo su Tag <code><img> Tag</code> e <code><iframe> Elementi</code> . Le immagini di sfondo CSS richiedono un approccio diverso (IntersectionObserver per attivare/disattivare una classe).</p> </div> </div> <div class="bg-amber-50 border border-amber-200 rounded-xl p-5"> <p class="text-sm text-gray-700"> <strong>Suggerimento professionale:</strong> Non sei sicuro di quale sia il tuo elemento LCP? Percorri la tua pagina <a href="https://pagespeed.web.dev/" target="_blank" rel="noopener noreferrer" class="text-amber-600 hover:text-amber-700">PageSpeed Insights</a> e cerca la diagnostica "Elemento Paint con contenuto più grande". Questa è l'immagine che non devi mai caricare pigramente. </p> </div> </section>  <section id="implementation" class="mb-16"> <h2 class="text-2xl md:text-3xl font-bold mb-6">Come implementare il caricamento lento in Shopify Liquid</h2> <p class="text-gray-600 leading-relaxed mb-4"> Se stai modificando manualmente il codice del tema, ecco come implementare correttamente il caricamento lento nel linguaggio di template Liquid di Shopify. </p> <h3 class="text-xl font-bold mb-4 mt-8">Metodo 1: filtro image_tag di Shopify (consigliato)</h3> <p class="text-gray-600 leading-relaxed mb-4"> Il liquido di Shopify Il filtro <code>tag_immagine Il filtro</code> viene impostato automaticamente <code>caricamento="pigro"</code> sulle immagini. Gestisce anche la risposta Attributi <code>srcset Attributi</code> e <code></code> per una consegna ottimale. </p> <div class="bg-gray-900 rounded-xl p-5 mb-4"> <pre class="text-sm text-gray-100 overflow-x-auto"><code>{{- product.featured_image | image_url: width: 800 | image_tag: loading: 'lazy', widths: '200,400,600,800', sizes: '(min-width: 768px) 50vw, 100vw', alt: product.featured_image.alt -}}</code></pre> </div> <p class="text-gray-600 leading-relaxed mb-4"> Per la tua immagine hero/LCP, imposta esplicitamente il caricamento impaziente: </p> <div class="bg-gray-900 rounded-xl p-5 mb-4"> <pre class="text-sm text-gray-100 overflow-x-auto"><code>{{- section.settings.hero_image | image_url: width: 1200 | image_tag: loading: 'eager', fetchpriority: 'high', widths: '600,900,1200,1800', sizes: '100vw', alt: section.settings.hero_alt -}}</code></pre> </div> <div class="bg-blue-50 border border-blue-200 rounded-xl p-5 mb-6"> <p class="text-sm text-gray-700"> <strong>Dettagli chiave:</strong> Avviso <code>fetchpriority: 'alta'</code> sull'immagine dell'eroe. Ciò indica al browser di dare priorità al download di questa immagine rispetto ad altre risorse. In combinazione con il caricamento rapido, è il modo più veloce per eseguire il rendering dell'immagine LCP. Scopri di più su <a href="/it/blog/shopify-lcp-optimization/" class="text-amber-600 hover:text-amber-700">Ottimizzazione LCP su Shopify</a>. </p> </div> <h3 class="text-xl font-bold mb-4 mt-8">Metodo 2: HTML grezzo con attributo di caricamento</h3> <p class="text-gray-600 leading-relaxed mb-4"> Se stai scrivendo HTML non elaborato (sezioni personalizzate, snippet), aggiungi direttamente l'attributo: </p> <div class="bg-gray-900 rounded-xl p-5 mb-4"> <pre class="text-sm text-gray-100 overflow-x-auto"><code> <img src="{{ image | image_url: width: 600 }}" alt="{{ image.alt | escape }}" width="{{ image.width }}" height="{{ image.height }}" loading="lazy" decoding="async" />  <img src="{{ image | image_url: width: 1200 }}" alt="{{ image.alt | escape }}" width="{{ image.width }}" height="{{ image.height }}" loading="eager" fetchpriority="high" /></code></pre> </div> <div class="bg-amber-50 border border-amber-200 rounded-xl p-5 mb-6"> <p class="text-sm text-gray-700"> <strong>Imposta sempre larghezza e altezza!</strong> Senza dimensioni esplicite, le immagini caricate pigramente causano <a href="/it/blog/shopify-core-web-vitals-guide/" class="text-amber-600 hover:text-amber-700">spostamento del layout (CLS)</a> al caricamento: la pagina salta mentre l'immagine spinge il contenuto verso il basso. Imposta larghezza/altezza nell'HTML o utilizza CSS <code>Proprietà</code> per riservare spazio. </p> </div> <h3 class="text-xl font-bold mb-4 mt-8">Metodo 3: caricamento intelligente basato sulla posizione della sezione</h3> <p class="text-gray-600 leading-relaxed mb-4"> Dawn e altri temi Shopify 2.0 utilizzano uno schema intelligente: tengono traccia di quale sezione è la prima nella pagina e caricano con impazienza solo le immagini in quella sezione. </p> <div class="bg-gray-900 rounded-xl p-5 mb-4"> <pre class="text-sm text-gray-100 overflow-x-auto"><code>{%- liquid # In the layout or page template: assign first_section = true -%} {%- for block in section.blocks -%} {%- if first_section -%} {%- assign loading_strategy = 'eager' -%} {%- assign fetch_priority = 'high' -%} {%- assign first_section = false -%} {%- else -%} {%- assign loading_strategy = 'lazy' -%} {%- assign fetch_priority = 'auto' -%} {%- endif -%} {{- block.settings.image | image_url: width: 800 | image_tag: loading: loading_strategy, fetchpriority: fetch_priority -}} {%- endfor -%}</code></pre> </div> <p class="text-gray-600 leading-relaxed mb-4"> Questo approccio è migliore del caricamento lento generale, ma è comunque imperfetto: non tiene conto del numero di immagini visibili sopra la piega in ciascuna sezione e varia in base al dispositivo. </p> <div class="bg-gray-50 border border-gray-200 rounded-xl p-5"> <p class="text-sm text-gray-600"> <strong>L'approccio manuale diventa complesso rapidamente.</strong> Tra punti di interruzione reattivi, sezioni dinamiche e contenuti inseriti nell'app, ottenere il caricamento lento su ogni modello di pagina richiede ore di sviluppo del tema, con una manutenzione continua ogni volta che cambi il layout. Questo è esattamente ciò che Thunder automatizza. <a href={thunderInstallUrl} class="text-amber-600 hover:text-amber-700 font-medium">Provalo gratuitamente →</a> </p> </div> </section>  <section id="beyond-images" class="mb-16"> <h2 class="text-2xl md:text-3xl font-bold mb-6">Oltre le immagini: caricamento lento di video, iframe e sezioni</h2> <p class="text-gray-600 leading-relaxed mb-4"> Le immagini sono l'obiettivo ovvio, ma i principi del caricamento lento si applicano anche ad altre risorse pesanti. </p> <h3 class="text-xl font-bold mb-4 mt-8">Incorporamenti video (YouTube, Vimeo)</h3> <p class="text-gray-600 leading-relaxed mb-4"> Viene caricato un incorporamento di YouTube <strong>500–800 KB di JavaScript</strong> più l'interfaccia utente del lettore video, anche se il visitatore non seleziona mai la riproduzione. Due soluzioni comuni: </p> <div class="space-y-4 mb-6"> <div class="bg-gray-50 rounded-xl p-5"> <p class="text-sm text-gray-700 mb-2"><strong>Opzione A: iframe pigro nativo</strong></p> <div class="bg-gray-900 rounded-lg p-4"> <pre class="text-xs text-gray-100 overflow-x-auto"><code><iframe src="https://www.youtube.com/embed/VIDEO_ID" loading="lazy" title="Titolo del video" allow="accelerometer; autoplay; encrypted-media; gyroscope" allowfullscreen ></iframe></code></pre> </div> </div> <div class="bg-gray-50 rounded-xl p-5"> <p class="text-sm text-gray-700 mb-2"><strong>Opzione B: modello di facciata (migliore)</strong></p> <p class="text-sm text-gray-600 mb-2">Mostra una miniatura statica con un pulsante di riproduzione. Carica l'iframe completo solo quando fai clic. Ciò consente di risparmiare oltre 500 KB per i visitatori che non riproducono mai il video.</p> <div class="bg-gray-900 rounded-lg p-4"> <pre class="text-xs text-gray-100 overflow-x-auto"><code><div class="video-facade" data-video-id="VIDEO_ID"> <img src="https://i.ytimg.com/vi/VIDEO_ID/hqdefault.jpg" alt="Miniatura del video" loading="lazy" /> <button class="play-btn" aria-label="Riproduci video">▶</button> </div></code></pre> </div> </div> </div> <h3 class="text-xl font-bold mb-4 mt-8">API di rendering della sezione Shopify</h3> <p class="text-gray-600 leading-relaxed mb-4"> Shopify ha introdotto il <strong>API di rendering della sezione</strong> che ti consente di caricare intere sezioni su richiesta, non solo immagini. È come il caricamento lento con steroidi: invece di caricare solo l'immagine in un secondo momento, carichi HTML, CSS e JavaScript dell'intera sezione solo quando necessario. </p> <p class="text-gray-600 leading-relaxed mb-4"> In combinazione con IntersectionObserver, puoi creare una vera esperienza di "caricamento su scorrimento" in cui le sezioni Below-fold non esistono affatto nell'HTML iniziale. Ciò è particolarmente potente per: </p> <ul class="space-y-2 text-gray-600 mb-6 ml-4"> <li class="flex gap-2"><span class="text-amber-500">•</span> Sezioni di raccomandazione del prodotto</li> <li class="flex gap-2"><span class="text-amber-500">•</span> Widget di revisione</li> <li class="flex gap-2"><span class="text-amber-500">•</span> Sezioni del feed di Instagram</li> <li class="flex gap-2"><span class="text-amber-500">•</span> Pesante <a href="/it/blog/shopify-third-party-scripts/" class="text-amber-600 hover:text-amber-700">Widget di app di terze parti</a></li> </ul> <h3 class="text-xl font-bold mb-4 mt-8">Script di app di terze parti</h3> <p class="text-gray-600 leading-relaxed mb-4"> È qui che si nascondono le vere prestazioni. La maggior parte delle app Shopify iniettano <a href="/it/blog/shopify-render-blocking-resources/" class="text-amber-600 hover:text-amber-700">script di blocco del rendering</a> nel tuo negozio <code><head></code>. Sebbene non sia possibile eseguire direttamente il "caricamento lento" di uno script con il file Attributo <code>caricamento Attributo</code> , puoi <strong>differire</strong> o <strong>asincrono Attributi</strong> loro: </p> <div class="bg-gray-900 rounded-xl p-5 mb-4"> <pre class="text-sm text-gray-100 overflow-x-auto"><code> <script src="app-widget.js"></script>  <script src="app-widget.js" defer></script>  <script src="app-widget.js" async></script></code></pre> </div> <p class="text-gray-600 leading-relaxed mb-4"> Il problema? <strong>Non puoi sempre controllare il modo in cui le app iniettano i loro script.</strong> Molte app codificano tag di script sincroni che non puoi modificare senza danneggiare l'app. Questo è il motivo principale per cui l'ottimizzazione manuale raggiunge il limite e perché esiste Thunder. Thunder intercetta e risequenzia automaticamente il caricamento di tutti gli script, indipendentemente dal modo in cui le app li inseriscono. </p> </section>  <section id="testing" class="mb-16"> <h2 class="text-2xl md:text-3xl font-bold mb-6">Come verificare se il caricamento lento funziona</h2> <p class="text-gray-600 leading-relaxed mb-4"> Hai aggiunto <code>caricamento="pigro"</code> alle tue immagini - ma come fai a sapere che funziona davvero? Ecco quattro modi per verificare: </p> <h3 class="text-xl font-bold mb-4 mt-8">1. Scheda Rete di Chrome DevTools</h3> <div class="space-y-2 text-gray-600 mb-6"> <p>Il metodo più affidabile:</p> <ol class="list-decimal ml-6 space-y-2"> <li>Apri il tuo negozio in Chrome → Fai clic con il pulsante destro del mouse → <strong>Ispezionare</strong> → <strong>Rete</strong> </li> <li>Filtra per <strong>Imm</strong> (tipo di immagine)</li> <li>Aggiornamento forzato della pagina (<code>Comando+Maiusc+R</code> / <code>Ctrl+Maiusc+R</code>)</li> <li>Nota quante immagini vengono caricate inizialmente (questo è il conteggio caricato con entusiasmo)</li> <li>Ora scorri lentamente verso il basso e guarda apparire le nuove richieste di immagini</li> </ol> <p class="mt-2">Se tutte le immagini vengono caricate al caricamento iniziale della pagina indipendentemente dalla posizione di scorrimento, il caricamento lento non funziona. Consulta la nostra guida dedicata su <a href="/it/blog/shopify-lazy-loading-not-working/" class="text-amber-600 hover:text-amber-700">caricamento lento non funzionante</a> per correzioni dettagliate.</p> </div> <h3 class="text-xl font-bold mb-4 mt-8">2. Ispezionare l'elemento</h3> <p class="text-gray-600 leading-relaxed mb-4"> Fare clic con il pulsante destro del mouse su un'immagine sotto la piega → <strong>Ispezionare</strong>. Guarda il <code><img> Tag</code> nel pannello Elementi. Dovresti vedere <code>caricamento="pigro"</code> come attributo. </p> <h3 class="text-xl font-bold mb-4 mt-8">3. Controllo di PageSpeed Insights</h3> <p class="text-gray-600 leading-relaxed mb-4"> Percorri la tua pagina <a href="https://pagespeed.web.dev/" target="_blank" rel="noopener noreferrer" class="text-amber-600 hover:text-amber-700">PageSpeed Insights</a> o <a href="/tools/speed-test/" class="text-amber-600 hover:text-amber-700">prova la velocità del tuo negozio</a> con il nostro strumento gratuito. Se il caricamento lento non è implementato, vedrai il suggerimento: <strong>"Rinvia immagini fuori schermo"</strong> con una stima del potenziale risparmio (in KB e secondi). </p> <h3 class="text-xl font-bold mb-4 mt-8">4. Faro in DevTools</h3> <p class="text-gray-600 leading-relaxed mb-4"> Chrome DevTools ha una scheda Lighthouse integrata. Esegui un controllo delle prestazioni e controlla due diagnostiche: </p> <ul class="space-y-2 text-gray-600 mb-4 ml-4"> <li class="flex gap-2"><span class="text-amber-500">•</span> <strong>"Rinvia immagini fuori schermo"</strong> — caricamento lento non implementato o incompleto</li> <li class="flex gap-2"><span class="text-amber-500">•</span> <strong>"L'immagine più grande di Contentful Paint è stata caricata pigramente"</strong> — sei pigro nel caricare il tuo LCP (risolvilo immediatamente!)</li> </ul> <div class="bg-red-50 border border-red-200 rounded-xl p-5"> <p class="text-sm text-gray-700"> <strong>Attenzione a:</strong> L'avviso del Faro <em>"L'immagine più grande di Contentful Paint è stata caricata pigramente"</em> è la diagnostica più critica. Se vedi questo, la tua immagine LCP ha <code>caricamento="pigro"</code> e ti costa ~1 secondo. Passa a <code>caricamento="ansioso"</code> con <code>fetchpriority="alta"</code> immediatamente. </p> </div> </section>  <section class="mb-16"> <h2 class="text-2xl md:text-3xl font-bold mb-6">Thunder vs caricamento lento manuale</h2> <div class="overflow-x-auto mb-6"> <table class="w-full text-sm border-collapse"> <thead> <tr class="bg-gray-50"> <th class="text-left p-3 border border-gray-200 font-semibold"></th> <th class="text-left p-3 border border-gray-200 font-semibold">⚡ Thunder</th> <th class="text-left p-3 border border-gray-200 font-semibold">Implementazione manuale</th> </tr> </thead> <tbody> <tr> <td class="p-3 border border-gray-200 font-medium">Orario di impostazione</td> <td class="p-3 border border-gray-200 text-green-700">60 secondi</td> <td class="p-3 border border-gray-200 text-red-700">2–6 ore</td> </tr> <tr class="bg-gray-50"> <td class="p-3 border border-gray-200 font-medium">Abilità richiesta</td> <td class="p-3 border border-gray-200 text-green-700">Nessuno</td> <td class="p-3 border border-gray-200 text-red-700">Liquido + HTML + JS</td> </tr> <tr> <td class="p-3 border border-gray-200 font-medium">Rilevamento LCP</td> <td class="p-3 border border-gray-200 text-green-700">Automatico (per pagina)</td> <td class="p-3 border border-gray-200 text-red-700">Manuale per modello</td> </tr> <tr class="bg-gray-50"> <td class="p-3 border border-gray-200 font-medium">Ottimizzazione dello script dell'app</td> <td class="p-3 border border-gray-200 text-green-700">Incluso</td> <td class="p-3 border border-gray-200 text-red-700">Non possibile manualmente</td> </tr> <tr> <td class="p-3 border border-gray-200 font-medium">Gestione reattiva</td> <td class="p-3 border border-gray-200 text-green-700">Tutti i punti di interruzione</td> <td class="p-3 border border-gray-200 text-red-700">La migliore ipotesi</td> </tr> <tr class="bg-gray-50"> <td class="p-3 border border-gray-200 font-medium">Manutenzione continua</td> <td class="p-3 border border-gray-200 text-green-700">Zero (automatico)</td> <td class="p-3 border border-gray-200 text-red-700">Ogni modifica al tema/layout</td> </tr> <tr> <td class="p-3 border border-gray-200 font-medium">Rischio di rottura del negozio</td> <td class="p-3 border border-gray-200 text-green-700">Zero (reversibile)</td> <td class="p-3 border border-gray-200 text-red-700">Medio (modifiche al codice)</td> </tr> <tr class="bg-gray-50"> <td class="p-3 border border-gray-200 font-medium">Miglioramento tipico</td> <td class="p-3 border border-gray-200 text-green-700 font-bold">27+ punti di velocità</td> <td class="p-3 border border-gray-200">5–15 punti (solo immagini)</td> </tr> </tbody> </table> </div> <div class="text-center"> <a href={thunderInstallUrl} class="inline-flex items-center gap-2 bg-amber-500 text-white px-8 py-4 rounded-xl font-semibold hover:bg-amber-600 transition shadow-lg shadow-amber-200 text-lg" > Prova Thunder Free: vedi i risultati in 60 secondi → </a> </div> </section>  <section id="faq" class="mb-16"> <h2 class="text-2xl md:text-3xl font-bold mb-8">Domande frequenti</h2> <div class="space-y-6"> {faqItems.map((item) => ( <div class="border border-gray-200 rounded-xl p-6"> <h3 class="text-lg font-bold mb-3">{item.question}</h3> <p class="text-gray-600 leading-relaxed">{item.answer}</p> </div> ))} </div> </section>  <section class="mb-16"> <h2 class="text-2xl md:text-3xl font-bold mb-6">Risorse correlate</h2> <div class="grid md:grid-cols-2 gap-4"> <a href="/it/blog/shopify-image-optimization/" class="block bg-gray-50 rounded-xl p-5 hover:bg-gray-100 transition border border-gray-200"> <p class="font-semibold text-gray-900 mb-1">Guida all'ottimizzazione delle immagini di Shopify</p> <p class="text-sm text-gray-500">Formati, compressione, immagini reattive e altro</p> </a> <a href="/it/blog/shopify-lcp-optimization/" class="block bg-gray-50 rounded-xl p-5 hover:bg-gray-100 transition border border-gray-200"> <p class="font-semibold text-gray-900 mb-1">Ottimizzazione LCP di Shopify</p> <p class="text-sm text-gray-500">La guida completa alla pittura con contenuti più grandi</p> </a> <a href="/it/blog/shopify-render-blocking-resources/" class="block bg-gray-50 rounded-xl p-5 hover:bg-gray-100 transition border border-gray-200"> <p class="font-semibold text-gray-900 mb-1">Risorse per il blocco del rendering su Shopify</p> <p class="text-sm text-gray-500">Come identificare e correggere il blocco CSS e JS</p> </a> <a href="/it/blog/shopify-core-web-vitals-guide/" class="block bg-gray-50 rounded-xl p-5 hover:bg-gray-100 transition border border-gray-200"> <p class="font-semibold text-gray-900 mb-1">Guida ai parametri fondamentali del web</p> <p class="text-sm text-gray-500">LCP, CLS, INP: cosa significano e come risolverli</p> </a> </div> </section> </div> </article>  <section class="py-16 bg-gray-50"> <div class="max-w-4xl mx-auto px-4"> <DualCTA /> </div> </section> </Base>

Shopify Caricamento lento: Immagini, video e altro

📋 Sommario

Cos'è il caricamento lento?

Perché il caricamento lento è importante per i negozi Shopify

L'errore di caricamento lento n. 1 (e ti costa 1 secondo)

Salta il lavoro manuale: Thunder gestisce automaticamente il caricamento lento

Lazy Loading nativo vs JavaScript: quale utilizzare nel 2026

Caricamento lento nativo (`caricamento="pigro"`)

Shopify Caricamento lento: Immagini, video e altro

📋 Sommario

Cos'è il caricamento lento?

Perché il caricamento lento è importante per i negozi Shopify

L'errore di caricamento lento n. 1 (e ti costa 1 secondo)

Salta il lavoro manuale: Thunder gestisce automaticamente il caricamento lento

Lazy Loading nativo vs JavaScript: quale utilizzare nel 2026

Caricamento lento nativo (caricamento="pigro")

Caricamento lento nativo (`caricamento="pigro"`)