Correzione rapida con Thunder
Thunder Page Speed migliora automaticamente gli errori comuni di caricamento delle immagini di Shopify, inclusa la pressione delle immagini sotto la piega e i modelli di caricamento lento che possono danneggiare Core Web Vitals. Ti offre una base di riferimento più sicura prima di modificare i modelli Liquid.
Perché PageSpeed contrassegna le immagini fuori schermo su Shopify
PageSpeed contrassegna le immagini fuori schermo quando le immagini all'esterno del viewport iniziale vengono scaricate prima che siano necessarie. Su Shopify, ciò accade spesso nelle sezioni della home page, nelle griglie di raccolta, nei mega menu, nei blocchi di consigli, nelle miniature dei blog, nelle recensioni multimediali, nei feed di Instagram e nelle gallerie multimediali dei prodotti.
Il costo non è solo la larghezza di banda. I primi download di immagini competono con CSS, caratteri, JavaScript e l'immagine che definisce effettivamente la prima visualizzazione. La guida LCP di Google consiglia di rendere visibile rapidamente il probabile elemento di pittura con contenuto più grande. Un buon LCP è di 2,5 secondi o più veloce per almeno il 75% delle visite e sprecare la priorità di rete iniziale sulle immagini di pagina inferiore rende il tutto più difficile.
Se il tuo avviso viene visualizzato insieme a payload di grandi dimensioni o avvisi di consegna di immagini, leggi Ottimizzazione dell'immagine Shopify, migliora la consegna delle immaginie enormi carichi utili di rete. Il differimento delle immagini fuori schermo è una parte dello stack più ampio di velocità dell'immagine.
La regola: pigro Below the Fold, eager Above the Fold
La semplice regola è utile: di solito dovrebbero essere utilizzate le immagini sotto la piega caricamento="pigro", mentre le immagini probabilmente visibili nella prima finestra dovrebbero utilizzare il caricamento rapido. La parte difficile è che le sezioni Shopify sono riutilizzabili. Una sezione banner potrebbe essere la prima sulla home page, la terza su una pagina di destinazione e all'interno di un modello di pagina di prodotto. Lo stesso snippet può richiedere priorità diverse a seconda del posizionamento.
La guida alle prestazioni di Google mette in guardia contro il caricamento lento dell'immagine LCP. Per Shopify, ciò di solito significa l'immagine hero della home page, l'immagine del prodotto principale o il banner della collezione principale. Se carichi in modo lento tali risorse, il browser potrebbe rilevarle in ritardo e LCP peggiora anche se l'avviso di immagine fuori schermo migliora.
Manuale passo passo: correggi il rinvio delle immagini fuori schermo su Shopify
1. Individuare l'immagine da non rinviare
In PageSpeed Insights, trova l'elemento LCP. Se si tratta di un banner hero, di un'immagine di prodotto o di un'immagine di raccolta sopra la piega, non caricarlo pigramente. Dategli dimensioni chiare e priorità alta.
<!-- Above-the-fold hero image -->
{{ section.settings.hero_image
| image_url: width: 1600
| image_tag:
widths: '750, 1100, 1600',
sizes: '100vw',
loading: 'eager',
fetchpriority: 'high',
alt: section.settings.hero_image.alt
}}Per maggiori dettagli, utilizzare il Guida al precaricamento dell'immagine Hero di Shopify e Guida all'ottimizzazione LCP.
2. Caricamento lento delle schede prodotto ripetute sotto la prima riga
Le griglie di raccolta possono scaricare dozzine di immagini di prodotti contemporaneamente. Mantieni la prima riga visibile attiva o predefinita, quindi carica in modo lento le righe inferiori. Se la tua griglia viene visualizzata con un indice di loop, usalo per decidere la priorità.
{% assign image_loading = 'lazy' %}
{% assign image_priority = 'auto' %}
{% if forloop.index <= 4 %}
{% assign image_loading = 'eager' %}
{% assign image_priority = 'high' %}
{% endif %}
{{ product.featured_image
| image_url: width: 700
| image_tag:
loading: image_loading,
fetchpriority: image_priority,
widths: '350, 500, 700',
sizes: '(min-width: 990px) 25vw, 50vw',
alt: product.featured_image.alt
}}3. Aggiungi dimensioni in modo che le immagini pigre non spostino il layout
Il caricamento lento può creare CLS se il browser non sa quanto spazio riservare. L'helper dei tag immagine di Shopify può generare larghezza e altezza, ma il markup personalizzato spesso li dimentica. Utilizza le proporzioni CSS per le schede e riserva slot stabili per i contenuti multimediali.
.product-card__media {
aspect-ratio: 1 / 1.25;
overflow: hidden;
}
.product-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}Se lo spostamento del layout sta già fallendo, controlla il file Guida alla correzione di Shopify CLS prima di modificare il comportamento di caricamento delle immagini nel tema.
4. Ritarda i supporti incorporati e gli avanzamenti sotto la piega
I feed di Instagram, i wall di foto, i lookbook e le miniature dei video sono comuni trasgressori di immagini fuori schermo. Carica lentamente le immagini e valuta la possibilità di caricare l'intero widget dopo lo scorrimento o l'inattività se non è necessario per la prima decisione di acquisto.
<img
src="{{ block.settings.image | image_url: width: 800 }}"
loading="lazy"
decoding="async"
width="800"
height="800"
alt="{{ block.settings.image.alt | escape }}"
>5. Ritestare insieme LCP e il controllo dell'immagine fuori schermo
Non celebrare l'avviso di immagine fuori schermo se LCP peggiora. Il risultato corretto è un minor numero di download iniziali di immagini non necessari e un LCP stabile o migliorato. Testare prima i dispositivi mobili perché reti e CPU più lente rendono più visibili i problemi di priorità delle immagini.
Correzione manuale vs. Correzione Thunder
| Problema di immagine | Correzione manuale | Correzione del tuono |
|---|---|---|
| Le immagini sotto la piega si caricano presto | Aggiungi il caricamento lento selettivo per sezione e posizione del loop. | Automatizza le impostazioni predefinite di caricamento delle immagini più sicure per i modelli Shopify comuni. |
| L'immagine dell'eroe è caricata in modo lento | Cambia l'immagine principale o principale del prodotto in caricamento rapido e priorità alta. | Protects key above-the-fold images from common lazy-loading mistakes. |
| La griglia di raccolta viene scaricata troppo | Dai priorità alla prima riga e carica lentamente le righe inferiori. | Riduce la pressione dell'immagine non necessaria mantenendo veloci i contenuti chiave. |
| Le immagini pigre causano CLS | Riserva dimensioni o slot di proporzioni per ogni contenitore di immagini. | Aiuta le modifiche al caricamento delle immagini a funzionare con Core Web Vitals anziché contro di essi. |
Modelli Shopify comuni da verificare
Controlla prima la home page se utilizza sezioni di immagini in pila, banner di eroi, raccolte in primo piano, lookbook, testimonianze e griglie di blog. Controlla le pagine dei prodotti se utilizzano gallerie multimediali di grandi dimensioni, foto di recensioni, blocchi di consigli o UGC. Controlla le pagine di collezione se il primo caricamento include troppe schede prodotto.
Anche il contenuto dell'app è importante. Le app di revisione, le app di feed di Instagram, i creatori di pagine e le app di consigli spesso inseriscono immagini al di fuori dei normali snippet Liquid del tema. Thunder può migliorare la base di riferimento della vetrina, ma alcuni widget di terze parti necessitano ancora di impostazioni o rimozione a livello di app. La guida a App di Shopify che rallentano i negozi ti aiuta a decidere cosa vale la pena conservare.
Come verificare che la correzione abbia funzionato
Esegui gli stessi URL tramite PageSpeed Insights e il Test di velocità di Shopify. Guarda il controllo delle immagini fuori schermo, la dimensione totale del trasferimento, i tempi delle risorse LCP e CLS. Quello di Google Guida all'ottimizzazione LCP suddivide LCP in risposta del server, ritardo di caricamento delle risorse, durata del caricamento delle risorse e ritardo di rendering, il che è utile quando le modifiche alla priorità dell'immagine non spostano la metrica come previsto.
If the warning remains after lazy loading lower-page images, the remaining offenders may come from an app embed or a section that renders hidden images for sliders, tabs, or variant media. Hidden does not always mean free. Browsers may still discover images in markup, CSS backgrounds, or app-generated DOM.
FAQ
Cosa significa differire le immagini fuori schermo su Shopify?
Significa che le immagini sotto la prima finestra vengono caricate troppo presto. Il browser li scarica prima che gli acquirenti ne abbiano bisogno, il che può ritardare risorse critiche come l'immagine hero, l'immagine del prodotto, il CSS e i caratteri.
Tutte le immagini di Shopify dovrebbero utilizzare il caricamento lento?
No. Le immagini Below the Fold di solito dovrebbero essere caricate in modo lento, ma la probabile immagine LCP non dovrebbe essere caricata in modo lento. I banner hero e le immagini dei prodotti principali Above the Fold necessitano di un caricamento tempestivo e spesso di un'elevata priorità di recupero.
Il caricamento lento può danneggiare Shopify LCP?
Sì. Il caricamento lento dell'immagine hero o dell'immagine del prodotto principale può ritardare la scoperta e peggiorare la visualizzazione del contenuto più grande. Le linee guida LCP di Google consigliano invece di rendere la risorsa LCP rilevabile in anticipo.
La correzione di Thunder può rinviare gli avvisi relativi alle immagini fuori schermo?
Thunder può automatizzare un comportamento di caricamento delle immagini più sicuro per molte vetrine Shopify, inclusa la riduzione della pressione delle immagini sotto la piega e proteggendo al tempo stesso le risorse chiave sopra la piega.
Come posso testare le correzioni delle immagini fuori schermo?
Testa la home page, la pagina del prodotto e la pagina della collezione su dispositivi mobili. Controlla se l'avviso si riduce, l'LCP non regredisce, le immagini continuano a caricarsi durante lo scorrimento e gli spostamenti del layout non aumentano.
Correggi il caricamento delle immagini senza danneggiare LCP
Rimanda le immagini fuori schermo su Shopify ritardando ciò che gli acquirenti non possono ancora vedere, non caricando lentamente ogni immagine. Thunder ti offre la linea di base automatizzata più sicura e le modifiche manuali di Liquid possono gestire casi limite personalizzati.
Installa Thunder