Precaricamento immagine Shopify Hero: Correggi LCP con fetchpriority e Liquid (2026)

Correzione rapida con Thunder

Quando il precarico dell'immagine Hero aiuta davvero

La pittura con contenuto più grande misura quando il testo visibile o l'elemento immagine più grande termina il rendering. La buona soglia di Google è di 2,5 secondi o meno per almeno il 75% degli utenti reali. Nelle home page, nelle pagine di destinazione e nelle pagine di raccolta di Shopify, l'elemento LCP è spesso l'immagine del banner principale.

Il precaricamento aiuta quando il browser altrimenti scoprirebbe tardi l'immagine dell'eroe. Ciò accade quando l'URL dell'immagine è sepolto all'interno di uno snippet di sezione, caricato tramite JavaScript, nascosto dietro una logica reattiva o referenziato dopo molti tag CSS e script. Il precaricamento dice al browser: recupera presto questa immagine importante.

Il precaricamento non risolve un'immagine da 900 KB, uno slider che attende JavaScript o Risorse che bloccano il rendering che ritardano l'intera pagina. È una parte della catena LCP. Usalo con la compressione delle immagini, le dimensioni corrette e la pulizia degli script.

Passaggio 1: confermare l'elemento LCP

Esegui PageSpeed Insights o Chrome DevTools Performance. In Lighthouse, espandere la diagnostica LCP e verificare quale elemento viene segnalato. Se è l'immagine dell'eroe, continua. Se si tratta di un titolo o di un'immagine del prodotto, precarica invece quella risorsa.

Non indovinare. I temi Shopify spesso mostrano risorse eroiche diverse su desktop e dispositivi mobili e gli slider possono far sì che un elemento diverso vinca LCP su dispositivi mobili. Il nostro guida ai risultati del test di velocità spiega come leggere il report senza inseguire la metrica sbagliata.

Passaggio 2: precarica l'URL esatto dell'immagine Shopify

Aggiungi il collegamento di precaricamento tema.liquid dentro la testa, prima di script pesanti. Usa lo stesso oggetto immagine e la stessa larghezza utilizzati dal tuo eroe.

{%- if template.name == 'index' and settings.hero_image != blank -%}
  <link
    rel="preload"
    as="image"
    href="{{ settings.hero_image | image_url: width: 1600 }}"
    imagesrcset="
      {{ settings.hero_image | image_url: width: 800 }} 800w,
      {{ settings.hero_image | image_url: width: 1200 }} 1200w,
      {{ settings.hero_image | image_url: width: 1600 }} 1600w
    "
    imagesizes="100vw"
    fetchpriority="high"
  >
{%- endif -%}

Il nome esatto dell'oggetto varierà in base al tema. Potrebbe essere sezione.impostazioni.immagine, settings.hero_imageo un'immagine di blocco. Se l'URL di precaricamento non corrisponde abbastanza fedelmente all'URL dell'immagine visualizzata, il browser potrebbe scaricare due immagini.

Passaggio 3: contrassegna l'immagine dell'eroe come desiderosa e con priorità alta

Il tag immagine stesso non deve essere caricato in modo lento. Utilizza il caricamento rapido e l'alta priorità di recupero per la prima immagine hero outside-the-fold.

{{ section.settings.image
  | image_url: width: 1600
  | image_tag:
    widths: '800, 1200, 1600',
    sizes: '100vw',
    loading: 'eager',
    fetchpriority: 'high',
    alt: section.settings.heading
}}

Il caricamento lento dell'eroe è uno degli errori Shopify LCP più comuni. Il caricamento lento è corretto per le immagini e le gallerie dei prodotti sotto la piega; è sbagliato per l'unica immagine di cui il browser ha bisogno immediatamente. Per il resto del tuo negozio, usa il nostro Guida all'ottimizzazione delle immagini di Shopify.

Passaggio 4: evitare il doppio download dell'immagine reattiva

Se il tuo precarico punta a un'immagine desktop ma il dispositivo mobile esegue un ritaglio mobile separato, i visitatori mobili potrebbero scaricare il file precaricato sbagliato e quindi scaricare l'immagine mobile reale. Ciò peggiora l’LCP.

{%- assign hero = section.settings.mobile_image | default: section.settings.image -%}

<link
  rel="preload"
  as="image"
  href="{{ hero | image_url: width: 1200 }}"
  imagesrcset="{{ hero | image_url: width: 600 }} 600w, {{ hero | image_url: width: 1200 }} 1200w"
  imagesizes="100vw"
  fetchpriority="high"
>

Per temi con immagini hero per desktop e dispositivi mobili veramente diverse, utilizza con attenzione i collegamenti di precaricamento specifici dei media. Testa entrambe le dimensioni del viewport e controlla la scheda Rete per eventuali download duplicati.

Passaggio 5: fai attenzione ai cursori

I thread LCP della community di Shopify spesso indicano le presentazioni hero come il problema nascosto. Anche con una diapositiva visibile, uno slider può attendere JavaScript, inizializzare il layout, nascondere le immagini finché non sono pronte o precaricare più diapositive. Precaricare un'immagine non può correggere completamente un eroe controllato da un pesante script di carosello.

Per la prima visualizzazione, un eroe statico di solito batte una presentazione. Se mantieni il dispositivo di scorrimento, precarica solo la prima diapositiva visibile, impostala con priorità elevata/intensa, carica lentamente le diapositive successive e rimuovi il JavaScript a riproduzione automatica sui dispositivi mobili se crea attività lunghe.

Questo è anche dove riducendo al minimo il lavoro del thread principale conta. Uno script carosello può ritardare l'immagine anche quando l'immagine viene richiesta in anticipo.

Correzione manuale vs. Correzione Thunder

Ripeti il test senza illuderti

Dopo aver aggiunto il precaricamento, apri DevTools Network con la cache disabilitata. Verifica che l'immagine hero venga avviata in anticipo, verifica che l'immagine renderizzata non venga scaricata due volte e confronta le esecuzioni di Lighthouse su dispositivi mobili. Quindi guarda l'LCP degli utenti reali nella dashboard Prestazioni Web di Shopify o in Search Console Core Web Vitals.

Se la richiesta dell'eroe inizia presto ma LCP è ancora lento, il collo di bottiglia è probabilmente il peso dell'immagine, CSS che blocca il rendering o JavaScript. Usa il guida completa all'ottimizzazione della velocità di Shopify, quindi controlla se anche PageSpeed viene contrassegnato Catene di richieste critiche di Shopify, enormi carichi utili di rete, o Tempo di blocco totale. Confronta Funzionalità di ottimizzazione di Thundere controlla piani attuali se vuoi il percorso automatizzato.

Riferimenti e validazione

Per l'obiettivo metrico, utilizzare La più grande guida alla pittura con contenuti di web.dev: un buon LCP è 2,5 secondi o più veloce al 75° percentile. Per suggerimenti sulla priorità, controlla Guida alla fetchpriority di web.dev; preload e fetchpriority risolvono diverse parti del problema di rilevamento e definizione delle priorità.

I thread LCP della community di Shopify mostrano spesso la stessa modalità di errore: un commerciante precarica un'immagine hero e vede poco movimento perché il tema lo sta ancora caricando lentamente, lo script del carosello ritarda il rendering o le risorse che bloccano il rendering hanno la priorità. Convalida la cascata di rete, l'URL dell'immagine sottoposta a rendering e l'elemento LCP prima di dichiarare inefficace il precaricamento. La correzione riguarda la priorità precisa delle risorse, non più i tag di precaricamento.