Caricamento lento e caricamento desideroso su Shopify: Correggi l'LCP dell'immagine del tuo eroe

Confronto rapido: caricamento lento e caricamento desideroso

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 lento 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 impaziente: il percorso predefinito

Il caricamento rapido è ciò che fanno i browser per impostazione predefinita. Quando il parser HTML incontra un file Tag senza a caricamento Attributo , mette immediatamente in coda l'immagine 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 lento: rinviato fino a quando necessario

Quando aggiungi caricamento="pigro" 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 lento 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 con impazienza qualsiasi elemento che appare nella finestra iniziale: ciò che vede il visitatore prima scorrimento. Su Shopify, questo in genere significa:

Quando utilizzare il caricamento lento 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 lento 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 lento 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 desiderosa, resto pigro

{%- 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 alla pigrizia e all'entusiasmo, c'è una terza leva: priorità di recupero. Questo attributo non controlla quando una risorsa viene caricata ma quanto è importante è relativo ad altre risorse:

La combinazione di caricamento="ansioso" + fetchpriority="alta" 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 impaziente dell'immagine del banner Shopify Hero 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 Alba : non impostare fetchpriority="alta" sull'immagine dell'eroe, lasciando la prestazione sul tavolo.

Ecco la soluzione esatta per il tuo tema.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 lento e il caricamento desideroso non sono una scelta binaria: si tratta di applicare la giusta strategia all'elemento giusto. Carica con impazienza la tua immagine LCP con priorità alta, carica con impazienza il resto del contenuto Above-fold e carica con pigrizia tutto ciò che è Below the Fold. Questa è la formula che ti consente di ottenere il rendering iniziale più veloce possibile senza sprecare larghezza di banda.

Ma ricorda: la strategia di caricamento delle immagini è solo una parte dell'equazione. Correttamente ottimizzando le tue immagini Shopify (formato, compressione, dimensionamento) conta altrettanto. E third-party scripts from apps spesso causa maggiori danni alle prestazioni rispetto alle immagini non ottimizzate. Un approccio olistico, ovvero la gestione congiunta di immagini, script, CSS e caratteri, garantisce i migliori risultati.

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.