Shopify Defer Immagini fuori schermo: correggi l'avviso PageSpeed

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 sotto la piega, desideroso sopra la piega

La regola è semplice: le immagini sotto l’area inizialmente visibile dovrebbero usare loading="lazy", mentre quelle probabilmente visibili all’apertura dovrebbero caricarsi subito. Le sezioni Shopify sono però riutilizzabili: lo stesso banner può trovarsi al primo posto nella home page, al terzo in una pagina di destinazione o in un modello di pagina prodotto. Lo stesso snippet può quindi richiedere una priorità diversa in base alla posizione.

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

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.

Se l'avviso persiste dopo il lazy loading delle immagini della parte inferiore della pagina, i responsabili rimanenti potrebbero provenire da un app embed o una sezione che rende immagini nascoste per sliders, tabs, o media varianti. Nascosto non significa sempre gratuito. I browser potrebbero comunque scoprire immagini in markup, CSS backgrounds, o DOM generato dall'app.

FAQ