Caricamento differito e caricamento immediato su Shopify: Correggi l'LCP dell'immagine del tuo eroe

Confronto rapido: caricamento differito e caricamento immediato

Prima di immergerci in profondità, ecco la differenza fondamentale. Entrambe le strategie controllano quando il browser scarica una risorsa, ma i loro obiettivi sono opposti.

Il negozio Shopify ideale utilizza entrambi Temi : caricamento rapido per i contenuti che i visitatori vedono per primi, caricamento differito per tutto ciò che scorreranno in seguito. La sfida è sapere dove tracciare il limite, soprattutto quando "above the fold" differisce da un dispositivo all'altro. Metti alla prova la velocità del tuo negozio per vedere come si comporta la tua attuale strategia di caricamento.

Come funziona ogni strategia di caricamento dietro il cofano

Caricamento immediato: il percorso predefinito

Il caricamento immediato è il comportamento predefinito del browser. Quando il parser HTML incontra un tag <img> senza l'attributo loading, mette subito l'immagine in coda per il download:

Questo è veloce e prevedibile per le immagini Above-fold. Lo svantaggio? Se in una pagina di raccolta sono presenti 40 immagini, il browser tenta di scaricarle tutte e 40 contemporaneamente. La tua immagine da eroe: quella che determina il tuo Punteggio LCP : deve condividere la larghezza di banda con altre 39 immagini a cui il visitatore non ha effettuato lo scorrimento.

Caricamento differito: rinviato fino a quando necessario

Quando aggiungi loading="lazy" su un'immagine, il browser la registra ma non lo scarica finché IntersectionObserver rileva che l'immagine si sta avvicinando al viewport:

Questo passaggio aggiuntivo è esattamente il motivo per cui il caricamento differito della tua immagine LCP è così costoso: stai aggiungendo un'attesa non necessaria per il tuo elemento visivo più importante. Ma per le immagini Below the Fold, questo differimento è un puro vantaggio: meno concorrenza sulla larghezza di banda e rendering iniziale più veloce.

Quando utilizzare Eager Loading su Shopify

Carica immediatamente qualsiasi elemento che appare nella finestra iniziale: ciò che vede il visitatore prima scorrimento. Su Shopify, questo in genere significa:

Quando utilizzare il caricamento differito su Shopify

Carica lentamente tutto ciò che il visitatore non vedrà finché non scorrerà. Nella maggior parte dei negozi Shopify, questa è la maggior parte delle immagini:

Per maggiori dettagli su cosa caricare lazy e sull'implementazione tecnica, consulta la nostra versione completa Guida al caricamento differito di Shopify.

Strategia di caricamento per tipo di pagina Shopify

Diversi modelli di pagina hanno diversi elementi LCP e strutture di contenuto. Ecco la strategia di caricamento ottimale per ciascuno:

Come implementare entrambe le strategie di caricamento in Shopify Liquid

Ecco il pratico codice Liquid per implementare la giusta strategia di caricamento sul tuo tema. Questo segue Caricamento differito nativo di Shopify migliori pratiche.

Base: caricamento basato sull'indice delle sezioni

{%- liquid
  if section.index > 2
    assign loading = "lazy"
  else
    assign loading = "eager"
  endif
-%}

{{ section.settings.image | image_url: width: 1200 | image_tag: loading: loading }}

Avanzato: immagine LCP con priorità di recupero

{%- if section.index == 1 -%}
  {%- comment -%} Hero section — LCP image, maximum priority {%- endcomment -%}
  {{ section.settings.image | image_url: width: 1400 | image_tag: loading: "eager", fetchpriority: "high", decoding: "sync" }}
{%- elsif section.index == 2 -%}
  {%- comment -%} Second section — eager but normal priority {%- endcomment -%}
  {{ section.settings.image | image_url: width: 1200 | image_tag: loading: "eager" }}
{%- else -%}
  {%- comment -%} Below fold — lazy load {%- endcomment -%}
  {{ section.settings.image | image_url: width: 1200 | image_tag: loading: "lazy" }}
{%- endif -%}

Griglia del prodotto: prima fila caricata subito, resto differito

{%- for product in collection.products -%}
  {%- if forloop.index <= 4 and section.index <= 2 -%}
    {%- assign img_loading = "eager" -%}
  {%- else -%}
    {%- assign img_loading = "lazy" -%}
  {%- endif -%}

  {{ product.featured_image | image_url: width: 600 | image_tag: loading: img_loading, alt: product.title }}
{%- endfor -%}

fetchpriority: la terza strategia di caricamento che dovresti conoscere

Oltre al caricamento immediato e differito, c'è un terzo controllo: fetchpriority. Questo attributo non determina quando una risorsa viene caricata, ma la sua priorità rispetto alle altre risorse:

La combinazione di loading="eager" + fetchpriority="high" sull'immagine LCP è la strategia di caricamento più aggressiva disponibile. Dice al browser: "Scaricalo immediatamente e dagli la priorità su tutto il resto". Per Ottimizzazione LCP, questa combinazione in genere riduce di 100–300 ms il tempo LCP.

Correzione: caricamento immediato dell’immagine principale Shopify in theme.liquid

Uno dei problemi di velocità di Shopify più comuni nel 2026: l'immagine del tuo banner hero viene caricata in modo lento per impostazione predefinita, distruggendo il tuo punteggio LCP. Molti temi, incluso Dawn : non impostano fetchpriority="high" sull'immagine dell'eroe, lasciando la prestazione sul tavolo.

Ecco la soluzione esatta per il tuo theme.liquid o file della sezione eroe:

{%- comment -%} Fix: Force eager loading + high priority for hero banner image {%- endcomment -%}
{%- assign hero_image = section.settings.image -%}

{%- if hero_image != blank -%}
  {{ hero_image | image_url: width: 1400 | image_tag:
    loading: "eager",
    fetchpriority: "high",
    decoding: "sync",
    alt: hero_image.alt | default: section.settings.heading,
    class: "hero-banner__image"
  }}
{%- endif -%}

Dopo aver apportato questa modifica, esegui un test di velocità per verificare il miglioramento dell'LCP. Dovresti vedere un miglioramento di 100-500 ms nel tempo LCP, a seconda delle dimensioni dell'immagine hero e del tempo di risposta del server. Per i negozi in cui la modifica del codice non è un'opzione, Thunder lo gestisce automaticamente : rileva il tuo elemento LCP e applica gli attributi di caricamento ottimali senza toccare i file del tema.

5 errori di strategia di caricamento di Shopify che uccidono il tuo punteggio di velocità

Vediamo questi errori su centinaia di negozi Shopify. Ognuno di essi ti costa punti PageSpeed reali:

Domande frequenti

La giusta strategia di caricamento fa davvero la differenza

Il caricamento differito e il caricamento immediato non sono una scelta binaria: si tratta di applicare la giusta strategia all'elemento giusto. Carica immediatamente la tua immagine LCP con priorità alta, carica immediatamente il resto del contenuto inizialmente visibile e carica in modo differito tutto ciò che si trova sotto la zona inizialmente visibile. Questa è la formula che ti consente di ottenere il rendering iniziale più veloce possibile senza sprecare larghezza di banda.

Va ricordato che la strategia di caricamento delle immagini è solo una parte dell’equazione. Ottimizzare le immagini Shopify (formato, compressione e dimensioni) è altrettanto importante. Inoltre, gli script di terze parti provenienti dalle app spesso danneggiano le prestazioni più delle immagini non ottimizzate. Un approccio olistico, che gestisca insieme immagini, script, CSS e font, garantisce i risultati migliori.

Passaggio successivo: Esegui il tuo test di velocità gratuito per vedere in che modo la tua attuale strategia di caricamento influisce sulle prestazioni, quindi esplora il nostro guida completa all'ottimizzazione della velocità di Shopify per l'immagine completa.