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
Tag elementi posizionati nel <head> del tuo HTML.
Esistono quattro tipi, ciascuno con casi d'uso diversi:
| Suggerimento | Cosa fa | Quando usarlo |
|---|---|---|
| precarico | Scarica immediatamente un file specifico | Immagini hero, caratteri critici, CSS chiave |
| preconnessione | Apre una connessione a un dominio (DNS + TCP + TLS) | Domini di terze parti che utilizzerai sicuramente |
| precaricamento DNS | Risolve solo il DNS di un dominio | Domini di terze parti che potresti utilizzare |
| prelettura | Scarica un file per una navigazione futura | Risorse necessarie nella prossima pagina probabile |
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
precarico è 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 %}'}{'
'}
{' '}{'
'}
{'{% endif %}'}{'
'}
{'
'}
{'{% if template contains "product" %}'}{'
'}
{' {% comment %} Preload main product image {% endcomment %}'}{'
'}
{' {% if product.featured_image %}'}{'
'}
{' '}{'
'}
{' {% 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
If your theme uses custom web fonts, preloading the most critical font file prevents the browser from blocking text rendering while it discovers the font through CSS. See our full guida all'ottimizzazione dei caratteri per i dettagli. L'implementazione di base:
{% comment %} Preload primary body font {% endcomment %}
{''}} Importante: Il origine incrociata
L'attributo è 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 tag_immagine
Il filtro e stylesheet_tag
Filtri :
{% 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 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
Every time your browser needs a resource from a new domain, it performs three steps: DNS resolution (50-200ms), TCP handshake (50-150ms), and TLS negotiation (100-200ms). That's 200-550ms of connection setup prima del download di un singolo byte.
preconnessione 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 %}'}{'
'}
{''}{'
'}
{'
'}
{'{% comment %} Google Fonts (if used) {% endcomment %}'}{'
'}
{''}{'
'}
{''}{'
'}
{'
'}
{'{% comment %} Google Analytics/GTM {% endcomment %}'}{'
'}
{''}{'
'}
{'
'}
{'{% comment %} YouTube embeds (if used) {% endcomment %}'}{'
'}
{''}{'
'}
{''}} Quando usarlo origine incrociata
L'attributo: Aggiungi il origine incrociata
L'attributo attribute when the resources from that domain will be fetched with CORS (fonts, images loaded via
Tag
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 precaricamento DNS invece.
Prelettura DNS: preparazione della connessione leggera
precaricamento DNS è 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 %}
{''}{'
'}
{''}{'
'}
{''}{'
'}
{''}} Migliore pratica: Utilizzare preconnessione per i tuoi 3-5 domini critici principali. Utilizzare precaricamento DNS 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 %}
{''}{'
'}
{''}}
Browser meno recenti che non supportano preconnessione will still benefit from the precaricamento DNS. I browser moderni utilizzano la preconnessione e ignorano il ridondante prefetch DNS. Ciò è particolarmente rilevante per i negozi Shopify con visitatori su dispositivi mobili meno recenti.
Prefetch: Precaricamento delle risorse per la pagina successiva
prelettura 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 %}'}{'
'}
{' '}{'
'}
{'{% endfor %}'}{'
'}
{'
'}
{'{% comment %} Prefetch critical CSS for product pages {% endcomment %}'}{'
'}
{""}}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):
❌ Errore 1: precaricare tutto
Aggiunta precarico a 10+ risorse vanifica lo scopo. Quando tutto è “critico”, nulla ha la priorità. Le connessioni limitate del browser vengono suddivise equamente tra tutti i precarichi, rallentando quelli veramente importanti.
Correzione: Precarica solo 2-4 risorse: immagine hero, carattere primario e CSS outside-the-fold critico.
❌ Errore 2: crossorigin mancante nei precaricamenti dei caratteri
I caratteri richiedono il file origine incrociata
L'attributo attribute on preload links, even when served from the same domain. Without it, the browser downloads the font twice — once from the preload (without CORS) and once from the CSS (with CORS).
Correzione: Aggiungi sempre origine incrociata
L'attributo per precaricare i caratteri: <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />
❌ Errore 3: precaricare risorse che non vengono utilizzate
La console di Chrome DevTools mostra "La risorsa è stata precaricata ma non utilizzata entro pochi secondi" se precarichi qualcosa di cui la pagina non ha effettivamente bisogno. Ciò spreca larghezza di banda e slot di connessione.
Correzione: Precarica solo le risorse effettivamente utilizzate dalla pagina corrente. Usa la logica liquida condizionale: {% if template == "index" %} per precaricamenti solo della home page.
❌ Errore 4: preconnessione a domini non utilizzati
Una preconnessione che non viene utilizzata mantiene aperta una connessione per ~ 10 secondi prima del timeout. Ciò spreca risorse del browser e può effettivamente ritardare le connessioni ai domini di cui hai bisogno.
Correzione: Controlla quali domini di terze parti vengono effettivamente caricati dalla tua pagina (Chrome DevTools → Rete → ordina per dominio). Preconnettersi solo ai domini con risorse nel percorso critico.
❌ Errore 5: URL immagine errato nel precaricamento dell'eroe
Il sistema di immagini reattive di Shopify offre dimensioni diverse in base alla larghezza del viewport. Se l'URL di precaricamento non corrisponde all'URL effettivamente richiesto dal CSS/HTML, il precaricamento viene sprecato e il browser scarica l'immagine due volte.
Correzione: Abbina l'URL di precaricamento esattamente a ciò che richiederà il browser. Usa Shopify
Filtro url_immagine
Filtro con lo stesso parametro di larghezza utilizzato dal tema per l'immagine dell'eroe.
Dove inserire i suggerimenti sulle risorse nei temi Shopify
L'ordine di posizionamento è importante. Suggerimenti sulle risorse in <head> del tuo tema.liquid dovrebbe seguire questo ordine per la massima efficacia:
<head>
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' {% if template == "index" %}'}{'
'}
{' '}{'
'}
{' {% endif %}'}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' {{ "theme.css" | asset_url | stylesheet_tag }}'}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' ...'}{'
'}
{''}}
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.
Suggerimenti manuali sulle risorse vs Thunder: confronto
| Fattore | Suggerimenti sulle risorse manuali | Thunder |
|---|---|---|
| Impostazione | Modifica theme.liquid, comprendi le priorità delle risorse | Installazione con un clic |
| Miglioramento LCP | 500ms-1,5s (precaricamento immagine hero) | Guadagni simili tramite l'ottimizzazione automatica |
| Copre il differimento dello script | No: i suggerimenti non rinviano gli script | Sì: gestione completa degli script |
| Rischio di ottimizzazione eccessiva | Alto se vengono aggiunti troppi suggerimenti | Basso: priorità automatica |
| Manutenzione | Aggiorna quando cambia il tema o cambiano le app | Automatico |
Per la massima velocità, combina entrambi: precarico manuale dell'immagine dell'eroe + Thunder per l'ottimizzazione completa degli script. Vedi prezzi per i dettagli del piano.
Come misurare l'impatto dei suggerimenti sulle risorse
Dopo aver aggiunto i suggerimenti sulle risorse, misura il miglioramento utilizzando questi strumenti:
- Test di velocità gratuito di Thunder — Confronto rapido prima/dopo delle prestazioni complessive del tuo negozio.
- 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.
- 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".
- 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
Cosa sono i suggerimenti sulle risorse in Shopify?
I suggerimenti sulle risorse sono elementi di collegamento HTML che indicano al browser di preparare le risorse prima che siano necessarie. I quattro tipi sono: preload (scarica questa risorsa immediatamente: è necessaria per la pagina corrente), preconnect (stabilisci una connessione a questo dominio: ne avremo bisogno presto), dns-prefetch (risolvi il DNS di questo dominio, una versione più leggera di preconnect) e prefetch (scarica questa risorsa per la navigazione futura della pagina). Su Shopify, i suggerimenti sulle risorse vanno nel <head> del tuo file theme.liquid o vengono applicati tramite filtri Liquid come image_tag con preload.
Devo precaricare la mia immagine hero su Shopify?
Sì: precaricare l'immagine del tuo eroe è uno dei modi più efficaci per migliorare il Largest Contentful Paint (LCP). L'immagine hero è in genere l'elemento LCP sulla home page e sulle pagine di destinazione. Senza precarico, il browser rileva l'immagine solo dopo aver scaricato e analizzato HTML e CSS. Con il precaricamento, il browser inizia a scaricare immediatamente l'immagine hero, spesso riducendo il tempo LCP di 500 ms-1,5 secondi. Usa <link rel='preload' as='image'> nel tuo tema.liquid head per l'immagine dell'eroe.
Qual è la differenza tra precarico e preconnessione?
Preload tells the browser to download a specific file immediately — you know the exact URL of the resource. Preconnect tells the browser to establish a connection (DNS + TCP + TLS) to a domain — you know you'll need resources from that domain but don't know the exact URLs yet. Use preload for known critical resources like hero images and key fonts. Use preconnect for third-party domains like Google Fonts, YouTube, or analytics services.
Troppi suggerimenti sulle risorse possono danneggiare le prestazioni di Shopify?
Sì. Ogni precarico e preconnessione compete per gli slot di connessione e la larghezza di banda limitati del browser. Se precarichi più di 10 risorse, stai essenzialmente dicendo al browser che tutto è fondamentale, il che significa che nulla ha la priorità. Best practice: precaricare solo 2-4 risorse veramente critiche (immagine hero, carattere principale, CSS critico), preconnettersi a 2-3 domini chiave di terze parti e utilizzare il prefetch con parsimonia per le probabili navigazioni della pagina successiva. Fornire suggerimenti eccessivi è peggio che non fornire alcun suggerimento.
Thunder Page Speed Optimizer gestisce i suggerimenti sulle risorse?
Thunder ottimizza automaticamente la priorità di caricamento delle risorse, inclusa la gestione di come e quando le risorse di terze parti si connettono e scaricano. Invece di aggiungere tag di preconnessione o precaricamento manuali, il differimento degli script e la definizione delle priorità delle risorse di Thunder garantiscono che le risorse critiche vengano caricate per prime mentre gli script di terze parti non critici attendono. Ciò consente di ottenere risultati simili ai suggerimenti manuali sulle risorse senza richiedere modifiche al codice del tema.
Come precarico i caratteri su Shopify?
Add a preload link in your theme.liquid <head> per il file di caratteri più critici (in genere il carattere del corpo del testo in formato WOFF2). La sintassi è: <link rel='preload' href='your-font.woff2' as='font' type='font/woff2' crossorigin>. The crossorigin attribute is required for fonts even if they're on the same domain. Only preload 1-2 font files — preloading all font weights wastes bandwidth on files the current page may not need.
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.
Expert Speed Optimization for Your Store
Our team handles everything — theme optimization, app cleanup, Core Web Vitals guarantee. Most stores optimized in 2 weeks.
✅ Core Web Vitals Guarantee · ⚡ 2-Week Delivery · 🎁 6 Months Free Thunder
Starting from €1,500 · Learn more