Suggerimenti sulle risorse Shopify: Precarica, preconnetti e precarica per negozi più veloci

Il modo più veloce per ottimizzare il caricamento delle risorse

I suggerimenti manuali sulle risorse richiedono la modifica del codice Liquid del tema e la comprensione di quali risorse sono fondamentali. Se preferisci saltare le modifiche al codice, Thunder Page Speed Optimizer gestisce automaticamente la priorità di caricamento delle risorse:

• Rinvia gli script non critici in modo che le risorse critiche (immagini, CSS, caratteri) vengano caricate per prime
• Gestisce automaticamente l'ordine di esecuzione degli script di terze parti
• Non è richiesta la modifica del codice del tema: installa e vai

Metti alla prova la velocità del tuo negozio per vedere le prestazioni attuali di caricamento delle risorse, quindi continua a leggere per l'approccio manuale.

Cosa sono i suggerimenti sulle risorse e perché sono importanti per Shopify?

Quando un browser carica il tuo negozio Shopify, legge l'HTML dall'alto verso il basso e scopre le risorse (immagini, CSS, caratteri, script) man mano che procede. Alcune risorse critiche, come l'immagine hero o il carattere principale, sono sepolte in profondità nei file CSS o caricate tramite JavaScript. Il browser non li troverà finché non avrà già analizzato molto codice.

I suggerimenti sulle risorse ti consentono di dire al browser: "Ehi, inizia a lavorare su queste risorse adesso: non aspettare per scoprirle in modo naturale." Loro <link> elementi posizionati nel <head> del tuo HTML.

Esistono quattro tipi, ciascuno con casi d'uso diversi:

Ogni suggerimento ha un diverso profilo costi-benefici. Usati saggiamente, accelerano LCP, riduce la latenza di connessione e migliora le prestazioni percepite. Usati con noncuranza, sprecano larghezza di banda e possono effettivamente rallentare le risorse più importanti.

Precaricamento: dai la priorità alle risorse critiche su Shopify

preload è il suggerimento sulle risorse più potente e quello più comunemente utilizzato in modo improprio. Dice al browser: "Scarica questo file adesso, è fondamentale per la pagina corrente." Il browser lo considera obbligatorio e recupera la risorsa con alta priorità.

Precaricamento dell'immagine dell'eroe (vincita LCP più grande)

L'immagine hero è solitamente l'elemento Contentful Paint più grande sulla tua home page e sulle pagine di destinazione. Senza precaricamento, il browser lo rileva solo dopo aver scaricato e analizzato il CSS del tema, il che può ritardare LCP di 1-2 secondi. Ecco come precaricarlo su Shopify:

{% comment %} Add to theme.liquid inside <head> {% endcomment %}



{% if template == "index" %}

  {% comment %} Preload hero image on homepage {% endcomment %}

  <link

    rel="preload"

    href="{{ section.settings.hero_image | image_url: width: 1200 }}"

    as="image"

    fetchpriority="high"

  />

{% endif %}



{% if template contains "product" %}

  {% comment %} Preload main product image {% endcomment %}

  {% if product.featured_image %}

    <link

      rel="preload"

      href="{{ product.featured_image | image_url: width: 800 }}"

      as="image"

      fetchpriority="high"

    />

  {% endif %}

{% endif %}

Questa tecnica in genere migliora LCP di 500 ms-1,5 s perché il browser inizia a scaricare l'immagine dell'eroe in parallelo con CSS e JavaScript invece di attendere. Il team Performance di Shopify raccomanda questo approccio in particolare.

Precaricamento dei caratteri

Se il vostro tema utilizza caratteri web personalizzati, il precaricamento del file di caratteri più critico impedisce al browser di bloccare il rendering del testo mentre scopre il carattere tramite CSS. Consultate la nostra completa guida all'ottimizzazione dei caratteri per i dettagli. L'implementazione di base:

{% comment %} Preload primary body font {% endcomment %}

<link

  rel="preload"

  href="{{ "body-font-regular.woff2" | asset_url }}"

  as="font"

  type="font/woff2"

  crossorigin

/>

Importante: Il crossorigin è richiesto per i precaricamenti dei caratteri, anche quando il carattere si trova sullo stesso dominio. Senza di esso, il browser scarica il carattere due volte.

Utilizzo dei filtri di precaricamento liquidi di Shopify

Il template Liquid di Shopify fornisce il supporto integrato per il precaricamento tramite image_tag e stylesheet_tag :

{% comment %} Preload via Liquid image_tag filter {% endcomment %}

{{ section.settings.hero_image | image_url: width: 1200 | image_tag: preload: true, fetchpriority: 'high' }}



{% comment %} Preload critical stylesheet {% endcomment %}

{{ 'critical.css' | asset_url | stylesheet_tag: preload: true }}

Questi filtri Liquid generano automaticamente il corretto <link rel="preload"> tag insieme al riferimento effettivo alla risorsa, il che è più pulito rispetto alla scrittura manuale dei suggerimenti di precaricamento.

Preconnessione: riduce il tempo di connessione di terze parti

Ogni volta che il vostro browser necessita di una risorsa da un nuovo dominio, esegue tre passaggi: risoluzione DNS (50-200ms), handshake TCP (50-150ms) e negoziazione TLS (100-200ms). Si tratta di 200-550ms di configurazione della connessione prima del download di un singolo byte.

preconnect dice al browser di completare questi passaggi in anticipo, quindi quando la risorsa è effettivamente necessaria, la connessione è già stabilita.

Target di preconnessione comuni per i negozi Shopify

{% comment %} Add to theme.liquid <head> — before stylesheet and script tags {% endcomment %}



{% comment %} Shopify CDN — your images, fonts, and assets {% endcomment %}

<link rel="preconnect" href="https://cdn.shopify.com" crossorigin />



{% comment %} Google Fonts (if used) {% endcomment %}

<link rel="preconnect" href="https://fonts.googleapis.com" />

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />



{% comment %} Google Analytics/GTM {% endcomment %}

<link rel="preconnect" href="https://www.googletagmanager.com" />



{% comment %} YouTube embeds (if used) {% endcomment %}

<link rel="preconnect" href="https://www.youtube.com" />

<link rel="preconnect" href="https://i.ytimg.com" />

Quando usarlo crossorigin: Aggiungi il crossorigin attributo quando le risorse da quel dominio verranno recuperate con CORS (caratteri, immagini caricate tramite <img> con crossorigin, recupera chiamate API). Se non sei sicuro, includilo: il caso peggiore è una connessione aggiuntiva.

Limiti di preconnessione

Ciascuna preconnessione utilizza uno slot di connessione del browser e una piccola quantità di CPU/memoria. I browser in genere hanno 6 connessioni per dominio e un totale limitato. Limita le preconnessioni a 3-5 domini — solo quelli che la tua pagina utilizzerà sicuramente.

Per i domini che potresti utilizzare (ad esempio, un widget di chat che si carica solo per alcuni visitatori), usa l'accendino dns-prefetch invece.

Prelettura DNS: preparazione della connessione leggera

dns-prefetch è il suggerimento sulle risorse più leggero: risolve solo l'indirizzo IP del dominio (risparmio di 50-200 ms) senza stabilire una connessione completa. Usalo per domini di terze parti che contengono la tua pagina potrebbe bisogno:

{% comment %} DNS-prefetch for optional third-party services {% endcomment %}

<link rel="dns-prefetch" href="https://connect.facebook.net" />

<link rel="dns-prefetch" href="https://www.google-analytics.com" />

<link rel="dns-prefetch" href="https://cdn.judge.me" />

<link rel="dns-prefetch" href="https://cdn.klaviyo.com" />

Migliore pratica: Utilizzare preconnect per i tuoi 3-5 domini critici principali. Utilizzare dns-prefetch come fallback per tutti gli altri domini di terze parti. Uno schema comune è quello di includere entrambi:

{% comment %} Belt and suspenders: preconnect with dns-prefetch fallback {% endcomment %}

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link rel="dns-prefetch" href="https://fonts.gstatic.com" />

I browser meno recenti che non supportano preconnect beneficiano comunque di dns-prefetch. I browser moderni usano la preconnessione e ignorano il prefetch DNS ridondante. Questo è particolarmente utile per i negozi Shopify visitati da dispositivi mobili meno recenti.

Prefetch: Precaricamento delle risorse per la pagina successiva

prefetch dice al browser: "L'utente probabilmente visiterà questa pagina o avrà bisogno di questa risorsa in seguito: scaricala in background durante il tempo di inattività." Ciò è utile per i percorsi multipagina come sfogliare raccolte → pagine di prodotto.

{% comment %} On collection pages: prefetch the first few product pages {% endcomment %}

{% for product in collection.products limit: 3 %}

  <link rel="prefetch" href="{{ product.url }}" />

{% endfor %}



{% comment %} Prefetch critical CSS for product pages {% endcomment %}

<link rel="prefetch" href="{{ 'product.css' | asset_url }}" as="style" />

Usa il precaricamento con attenzione: Le risorse precaricate vengono scaricate utilizzando la larghezza di banda inattiva, quindi non bloccano i contenuti critici. Ma sui dispositivi mobili con piani dati limitati, il precaricamento non necessario spreca la larghezza di banda. Precarica solo le risorse con un'elevata probabilità di navigazione.

Buoni candidati per il precaricamento su Shopify: la pagina del prodotto quando un utente passa il mouse su un articolo della collezione, il foglio di stile del checkout nella pagina del carrello e le immagini del prodotto visibili in una griglia della collezione.

5 errori comuni nei suggerimenti sulle risorse su Shopify

I suggerimenti sulle risorse possono ritorcersi contro se implementati in modo errato. Questi sono gli errori che vediamo più spesso durante il controllo dei negozi Shopify (esegui a test di velocità e controlla la tua pagina <head> per individuarli):

Dove inserire i suggerimenti sulle risorse nei temi Shopify

L'ordine di posizionamento è importante. Suggerimenti sulle risorse in <head> del tuo theme.liquid dovrebbe seguire questo ordine per la massima efficacia:

<head>

  <meta charset="utf-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />


  <!-- 1. Preconnects FIRST (establish connections early) -->

  <link rel="preconnect" href="https://cdn.shopify.com" crossorigin />

  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />


  <!-- 2. Preloads SECOND (start downloading critical resources) -->

  {% if template == "index" %}

    <link rel="preload" href="{{ hero_image_url }}" as="image" fetchpriority="high" />

  {% endif %}

  <link rel="preload" href="{{ "body-font.woff2" | asset_url }}" as="font" type="font/woff2" crossorigin />


  <!-- 3. Critical CSS -->

  {{ "theme.css" | asset_url | stylesheet_tag }}


  <!-- 4. DNS-prefetch for secondary domains -->

  <link rel="dns-prefetch" href="https://connect.facebook.net" />

  <link rel="dns-prefetch" href="https://cdn.klaviyo.com" />


  <!-- 5. Everything else (meta tags, scripts, etc.) -->

  ...

</head>

Le preconnessioni dovrebbero avvenire il prima possibile nel <head> perché il browser avvia immediatamente la connessione. Dovrebbero seguire i precaricamenti, poi i fogli di stile, quindi i suggerimenti per il precaricamento DNS. Leggi il nostro Guida alle risorse per il blocco del rendering per un quadro completo di come strutturare i tuoi temi <head> per un ordine di caricamento ottimale.

Come misurare l'impatto dei suggerimenti sulle risorse

Dopo aver aggiunto i suggerimenti sulle risorse, misura il miglioramento utilizzando questi strumenti:

1. Test di velocità gratuito di Thunder — Confronto rapido prima/dopo delle prestazioni complessive del tuo negozio.
2. Scheda Rete di Chrome DevTools — Guarda il grafico a cascata. Le risorse precaricate dovrebbero iniziare a scaricarsi prima (più a sinistra nel grafico). I domini preconnessi dovrebbero mostrare barre di connessione più corte.
3. Lighthouse - Controlla se il controllo "Precarica immagine Paint con contenuto più grande" viene superato dopo aver aggiunto il precaricamento dell'immagine hero. Verificare inoltre che non vengano visualizzati avvisi di "precaricamenti non utilizzati".
4. WebPageTest : la visualizzazione a cascata mostra esattamente quando inizia il download di ciascuna risorsa. Confronta le cascate prima e dopo aver aggiunto i suggerimenti per vedere lo spostamento dei tempi.

Per una guida completa all'interpretazione di questi risultati, leggi il nostro guida ai risultati del test di velocità e il ns guida completa all'ottimizzazione della velocità.

Domande frequenti sui suggerimenti sulle risorse Shopify

Fai contare ogni millisecondo con i suggerimenti sulle risorse

I suggerimenti sulle risorse sono una delle ottimizzazioni della velocità Shopify con il minimo sforzo e il massimo impatto che puoi implementare. Un singolo precarico dell'immagine dell'eroe può migliorare l'LCP di oltre un secondo. Le preconnessioni strategiche eliminano centinaia di millisecondi di tempo di configurazione della connessione. La chiave è la moderazione: precaricare solo ciò che è veramente critico e lasciare che sia il browser a gestire il resto.

Inizia con le due modifiche di maggiore impatto: precaricare la tua immagine hero e preconnettersi ai domini di terze parti più utilizzati. Quindi utilizzare Thunder Page Speed Optimizer per la definizione completa delle priorità delle risorse e la gestione degli script di terze parti nell'intero negozio Shopify.

Metti alla prova la velocità del tuo negozio adesso per vedere dove il caricamento delle risorse ti rallenta e utilizza le tecniche di questa guida per risolverlo.