Cosa fa Shopify in modo nativo per il caricamento lento
Shopify non ha un solo interruttore "caricamento lento" nel pannello di amministrazione. Non c'è alcuna casella di controllo in Impostazioni → Prestazioni che lo abiliti in tutto il negozio. Invece, Shopify fornisce Strumenti per sviluppatori di temi per implementare il caricamento lento e l'utilizzo di tali strumenti dipende interamente dal tema.
Ecco cosa offre Shopify a livello di piattaforma:
Il filtro Liquid image_tag — Quando i temi usano questo filtro per mostrare le immagini, Shopify può aggiungere automaticamente loading="lazy" alle immagini delle sezioni più in basso nella pagina.
La proprietà section.index — Indica la posizione di una sezione nella pagina. Consente di caricare subito le immagini delle prime 2 sezioni e differire quelle sottostanti.
Conversione automatica WebP/AVIF — La CDN di Shopify pubblica automaticamente le immagini nei formati moderni quando il browser le supporta, riducendo le dimensioni dei file del 25–50%.
Immagini adattabili — Il filtro image_tag genera più dimensioni dell’immagine, così il browser scarica quella adatta a ciascuno schermo.
Questi sono elementi costitutivi solidi. Ma sono solo elementi costitutivi, non una soluzione completa. Il divario tra gli "strumenti disponibili" e gli "strumenti effettivamente utilizzati nel tuo negozio" è dove si trovano la maggior parte dei problemi di prestazioni.
Sei curioso di sapere dove si trova il tuo negozio? Esegui un test di velocità gratuito per vedere se il caricamento lento aiuta o danneggia le tue prestazioni.
Come funzionano image_tag e section.index in Shopify
Il filtro Liquid image_tag è il metodo consigliato da Shopify per mostrare le immagini nei temi. Se usato correttamente, gestisce dimensioni adattabili, conversione del formato e caricamento differito in una sola riga:
{{ product.featured_image | image_url: width: 800 | image_tag: loading: "lazy" }}È particolarmente utile abbinarlo a section.index. Questa proprietà indica la posizione di una sezione nella pagina. Il team delle prestazioni di Shopify consiglia di usarla così:
{%- liquid
if section.index > 2
assign loading = "lazy"
else
assign loading = "eager"
endif
-%}
{{ section.settings.image | image_url: width: 1080 | image_tag: loading: loading }}Questo codice carica subito le immagini delle prime due sezioni (in genere l'immagine principale e la collezione in evidenza) e differisce tutto ciò che si trova più in basso. Questo approccio evita l'errore più comune del caricamento differito: applicarlo all'immagine LCP.
Dettaglio importante: La proprietà section.index è stata introdotta solo alla fine del 2022. I temi precedenti non la usano: spesso differiscono tutte le immagini (danneggiando LCP) oppure nessuna (peggiorando le prestazioni dei contenuti sotto l’area visibile).
Il filtro image_tag genera anche un attributo srcset con più larghezze dell’immagine, permettendo al browser di scegliere la dimensione ottimale. Questo completa il caricamento differito: quando serve un’immagine, il browser sceglie da srcset la versione adatta alla larghezza dell’area visibile.
Quali temi Shopify hanno il caricamento lento nativo?
Non tutti i temi sono uguali quando si tratta di implementazione del caricamento lento. Ecco la ripartizione:
Temi con buon caricamento lento nativo
Dawn (e i temi basati su di esso) usa correttamente image_tag e section.index, aggiungendo fetchpriority="high" alle immagini LCP. È l’implementazione di riferimento di Shopify e un modello per le prestazioni dei temi.
Sense, Craft, Taste, Colorblock — Questi temi gratuiti di Shopify si basano sull’architettura Dawn e ne ereditano la logica di caricamento differito.
La maggior parte dei temi premium aggiornati dopo il 2023 — Sviluppatori di temi affidabili come Out of the Sandbox, Archetype e Prestige hanno aggiornato i loro temi da utilizzare section.index e image_tag.
Temi con caricamento lento nativo scarso o assente
Temi costruiti prima del 2022 — Questi sono precedenti section.index e spesso utilizzano librerie di caricamento lento JavaScript come lazysizes o nessun caricamento lento.
Temi fortemente personalizzati — Anche se il tema di base presentava un caricamento lento, le modifiche personalizzate spesso lo interrompono. Gli sviluppatori che aggiungono sezioni personalizzate spesso saltano il file
Logica section.index .
Temi che utilizzano il caricamento lento solo JS — Alcuni temi utilizzano lazysize o librerie simili che aggiungono sovraccarico a JavaScript e possono entrare in conflitto con il caricamento lento del browser nativo.
Non sei sicuro in quale categoria rientri il tuo tema? Il modo più semplice per scoprirlo è ispezionare il tuo sito, di cui parleremo nel sezione test di seguito. Per uno sguardo più approfondito alle prestazioni del tema, consulta la nostra guida su Temi Shopify più veloci Guida.
5 cose che il Lazy Loading nativo di Shopify non copre
Anche con un tema moderno utilizzando image_tag correttamente, il caricamento lento nativo di Shopify presenta punti ciechi significativi:
1. Immagini e script inseriti nell'app
Ogni app Shopify che aggiunge elementi visivi (widget di revisione, badge di fiducia, popup di upsell, widget di chat) inserisce le proprie immagini e script direttamente nel DOM. Questi ignorano completamente il caricamento lento del tuo tema perché non sono renderizzati tramite Liquid image_tag.
Il negozio Shopify medio ha 6-8 app installate. Ognuno aggiunge script che si caricano immediatamente, indipendentemente da dove appaiono nella pagina. Questo è il il più grande killer di velocità nella maggior parte dei negozi — ed è completamente al di fuori dell'ambito del caricamento lento nativo.
2. Elementi con immagini di sfondo CSS
loading="lazy" funziona solo sugli elementi <img> e <iframe>. Le immagini impostate come sfondi CSS (background-image: url(...)), comuni nelle sezioni hero, nei banner e negli overlay, vengono sempre caricate subito. Il browser le scarica non appena analizza il CSS, anche se la sezione si trova molto sotto la piega.
3. Video e incorporamenti
Sebbene loading="lazy" funzioni tecnicamente sugli iframe, inclusi gli incorporamenti di YouTube, il filtro Shopify image_tag non si applica agli elementi video o agli iframe: riguarda solo le immagini. I commercianti che aggiungono video di prodotti, recensioni di YouTube o contenuti Instagram incorporati devono gestire separatamente il caricamento differito. Consulta la nostra guida all'ottimizzazione dei video in Shopify per modelli di facciata e tecniche di caricamento differito. Per comprendere meglio i compromessi, leggi il confronto tra lazy loading ed eager loading in Shopify.
4. Decisioni di caricamento reattive
L'approccio section.index > 2 è un'euristica approssimativa. Ciò che si trova "sotto la piega" su un monitor desktop può essere molto diverso su un telefono. Una griglia di immagini che mostra 4 colonne su desktop, tutte visibili, potrebbe mostrare 1 sola colonna sui dispositivi mobili, con solo 1 immagine visibile. Il lazy loading nativo non si adatta alle dimensioni dello schermo: utilizza la stessa logica basata sulla sezione su ogni dispositivo.
5. Differimento dello script
Il caricamento lento delle immagini è solo metà dell'equazione delle prestazioni. Script di blocco del rendering — sia dal vostro tema che dalle app — spesso causano più danni alle prestazioni rispetto alle immagini non ottimizzate. Il caricamento lento nativo si occupa delle immagini ma non fa nulla per JavaScript. Il rinvio degli script delle app, l'incorporazione di CSS critici e il precaricamento dei font richiedono un set di strumenti completamente diverso.
Colma ogni lacuna: Thunder gestisce ciò che il Lazy Loading nativo non può
Thunder Page Speed Optimizer funziona sopra il caricamento lento nativo del tuo tema: colma tutte le lacune elencate sopra. Identifica automaticamente la tua immagine LCP e la carica con entusiasmo, carica in modo lento tutto Below the Fold (incluso il contenuto inserito dall'app) e rinvia gli script non critici che il caricamento lento dell'immagine non può toccare.
- ✦ Rinvia gli script dell'app : il più grande killer di velocità che nessuna quantità di caricamento lento delle immagini può risolvere
- ✦ Rilevamento LCP intelligente : non carica mai pigramente i contenuti Above-fold, indipendentemente dal dispositivo
- ✦ Funziona con qualsiasi tema : vecchio, nuovo, personalizzato o pronto all'uso
- ✦ Incorpora CSS critici + precarica i caratteri : ottimizzazione completa, non solo caricamento delle immagini
La maggior parte dei negozi vede a Miglioramento del punteggio di velocità di oltre 27 punti dopo l'installazione, perché Thunder gestisce l'intero stack di ottimizzazione, non solo il caricamento delle immagini. Vedi i prezzi.
Installa Thunder — Prova gratuita →Come verificare se il tuo negozio Shopify ha un caricamento lento
Prima di apportare qualsiasi modifica, verifica se il tuo tema implementa già il caricamento lento. Ecco tre modi per verificare:
Metodo 1: Ispeziona elemento (30 secondi)
- 1. Apri il tuo negozio in Chrome
- 2. Scorri verso il basso fino a un'immagine ben sotto la piega (ad esempio, un prodotto nella terza riga di una collezione)
- 3. Fare clic con il pulsante destro del mouse sull'immagine → Ispeziona
- 4. Cerca
Etichetta
loading="lazy"nel<img>
Se vedi loading="lazy", il tuo tema ha un caricamento lento nativo per quell'immagine. Se vedi loading="eager" o nessun attributo di caricamento, non è così.
Metodo 2: scheda Rete di Chrome DevTools
- 1. Apri DevTools (F12) → scheda Rete
- 2. Filtra per "Img"
- 3. Ricaricamento forzato (Ctrl+Shift+R)
- 4. Controlla il conteggio delle immagini: se tutte le immagini vengono caricate immediatamente, il caricamento lento non funziona
- 5. Ora scorri lentamente verso il basso: se mentre scorri vengono visualizzate richieste di nuove immagini, il caricamento lento è attivo
Metodo 3: PageSpeed Insights
Gestisci il tuo negozio Google PageSpeed Insights. Se vedi il consiglio "Rinvia immagini fuori schermo", significa che le tue immagini lower-fold non vengono caricate in modo lento. Se tale raccomandazione non viene visualizzata, è probabile che il caricamento lento funzioni. Puoi anche usare il nostro Test di velocità Shopify gratuito per una rapida valutazione.
Aggiunta manuale del caricamento lento nativo a Shopify
Se il tuo tema non ha il caricamento lento o lo implementa male, ecco come aggiungerlo manualmente. Ciò richiede la modifica dei file Liquid del tuo tema: esegui prima un backup.
Passaggio 1: utilizza image_tag invece dei tag img
Trova le istanze in cui il tuo tema utilizza raw
Tag <img> e sostituiscili con quelli di Shopify
Filtro image_tag . Questo da solo ti offre immagini reattive, conversione WebP e le basi per il caricamento lento.
Prima (tag img manuale):
<img src="{{ product.featured_image | image_url: width: 800 }}" alt="{{ product.title }}" />Dopo (image_tag con caricamento lento):
{{ product.featured_image | image_url: width: 800 | image_tag: loading: "lazy", alt: product.title }}Passaggio 2: aggiungere la logica section.index
Per evitare il caricamento lento delle immagini sopra la piega, aggiungi la logica condizionale basata sulla posizione della sezione:
{%- liquid
if section.index > 2
assign loading = "lazy"
else
assign loading = "eager"
endif
-%}
{{ section.settings.image | image_url: width: 1080 | image_tag: loading: loading }}Passaggio 3: aggiungi la fetchpriority alla tua immagine LCP
Per l'immagine hero o l'immagine principale del prodotto (il probabile elemento LCP), aggiungi fetchpriority="high" per dire al browser di dargli la priorità:
{{ section.settings.hero_image | image_url: width: 1200 | image_tag: loading: "eager", fetchpriority: "high" }} ⚠️ Importante: Utilizzare solo fetchpriority="high" su 1–2 immagini per pagina. Usarlo su più immagini vanifica lo scopo: se tutto ha una priorità alta, niente lo è. Per Strategie di ottimizzazione LCP, consulta la nostra guida dedicata.
Errori comuni di caricamento lento nativo su Shopify
❌ Caricamento lento dell'immagine dell'eroe
Aggiunta loading="lazy" al banner hero o all'immagine del prodotto in primo piano forza il browser ad attendere che IntersectionObserver confermi che è visibile, aggiungendo 200–1000 ms al tuo LCP. Il team delle prestazioni di Shopify ha confermato che costa in media 1,0 secondo di LCP.
❌ Miscelazione di caricamento lento nativo e JS
Alcuni temi includono lazysizes.js e nativo
Attributi loading="lazy". Ciò crea una doppia elaborazione: il caricamento lento nativo del browser si attiva, e la libreria JS esegue la propria logica di intersezione. Spreca tempo della CPU e può far lampeggiare o caricare le immagini due volte. Scegline uno: il nativo è la scelta giusta nel 2026.
❌ Attributi larghezza e altezza mancanti
Caricamento lento senza esplicito
Causa degli attributi width e height (o proporzioni CSS). Spostamento cumulativo del layout (CLS). Quando l'immagine lenta viene caricata, la pagina salta mentre l'immagine spinge il contenuto verso il basso. Il
Il filtro image_tag aggiunge le dimensioni automaticamente: un altro motivo per usarlo al posto del formato grezzo <img> .
❌ Supponendo che tutte le sezioni utilizzino image_tag
Anche nei temi che generalmente utilizzano image_tag, le sezioni personalizzate e le app di sezioni di terze parti spesso utilizzano raw
Tag <img> . Una sezione caricata in modo errato può compromettere le prestazioni dell'intera pagina. Controlla tutte le sezioni, non solo le impostazioni predefinite del tema.
Questi errori sono esattamente il motivo per cui molti commercianti preferiscono una soluzione completa. Se vuoi comprendere il quadro completo di ciò che sta rallentando il tuo negozio, diagnostica i problemi di velocità del tuo negozio con la nostra guida passo passo o semplicemente segui la guida completa all'ottimizzazione.
Domande frequenti
Shopify differisce automaticamente il caricamento delle immagini?
In parte. Il filtro Liquid image_tag di Shopify imposta loading='lazy' sulle immagini delle sezioni con un valore section.index maggiore di 2. Le immagini delle prime due sezioni vengono caricate subito, quelle delle altre in modo differito. Questo funziona solo nei temi che usano correttamente image_tag. Molti temi vecchi o personalizzati non lo usano affatto, quindi le loro immagini vengono caricate subito per impostazione predefinita. Thunder Page Speed Optimizer applica automaticamente il caricamento differito intelligente a tutti i temi.
Il tema Dawn ha il caricamento differito integrato?
Sì. Dawn usa il filtro Liquid image_tag di Shopify e la proprietà section.index per differire automaticamente il caricamento delle immagini nelle sezioni successive alle prime due. Usa anche fetchpriority='high' per le immagini LCP. Questa implementazione non copre però le immagini inserite dinamicamente dalle app, gli sfondi definiti tramite CSS, i video o gli iframe. Anche questi elementi possono beneficiare del caricamento differito.
Ho bisogno di un'app di caricamento differito se il mio tema ce l'ha già?
Dipende dalla qualità dell’implementazione del tema. Se il tema usa correttamente il filtro nativo image_tag di Shopify e avete poche app, il caricamento differito integrato può bastare. Se invece usate più app che inseriscono immagini e script propri, avete un tema personalizzato o desiderate un’ottimizzazione completa con differimento degli script, CSS critico e precaricamento dei font, un’app come Thunder offre risultati nettamente migliori del solo caricamento differito a livello di tema.
Qual è la differenza tra il caricamento differito nativo di Shopify e il caricamento differito del browser?
Il caricamento differito del browser usa l’attributo HTML loading='lazy', che rinvia il download di un’immagine finché l’utente non scorre nelle sue vicinanze. Funziona in oltre il 96% dei browser moderni. Il caricamento differito nativo di Shopify indica il filtro Liquid image_tag, che aggiunge automaticamente loading='lazy' alle immagini delle sezioni fuori dall’area inizialmente visibile. Liquid di Shopify imposta l’attributo e il browser esegue il caricamento differito.
Il caricamento differito nativo di Shopify può incidere sul mio punteggio di velocità?
Sì. Se il tema applica loading='lazy' alle immagini nell’area inizialmente visibile, ritarda l’LCP aggiungendo un passaggio IntersectionObserver non necessario. Il team che si occupa delle prestazioni di Shopify ha rilevato che i negozi che caricano la propria immagine LCP in modo differito hanno un LCP mediano più lento di 1,0 secondi rispetto a quelli che la caricano subito. I temi ben implementati lo evitano con section.index, ma non tutti lo fanno correttamente.
Conclusioni sul caricamento lento nativo di Shopify
Shopify ha un caricamento lento nativo, ma è uno strumento per sviluppatori di temi, non una funzionalità a livello di negozio. Se sei su un tema moderno come Dawn, questo lo implementa image_tag e section.index correttamente, probabilmente le immagini del tuo tema sono state caricate correttamente in modo lento. Ma ciò lascia ancora i contenuti inseriti nelle app, le immagini di sfondo CSS, i video e, soprattutto, gli script di blocco del rendering completamente irrisolti.
Per la maggior parte dei negozi, il caricamento lento nativo copre circa il 30-40% delle opportunità di ottimizzazione. Il resto richiede differimento dello script, ottimizzazione dell'immagine, integrazione CSS critica e prioritizzazione intelligente delle risorse: esattamente cosa Thunder Page Speed Optimizer lo fa automaticamente.
Inizia testando il tuo negozio: Esegui un test di velocità gratuito per vedere a che punto sei, quindi decidi se il lazy load nativo è sufficiente o se hai bisogno di un approccio più completo.