Velocizza la tua home page Shopify in 60 secondi
Esegui un test di velocità gratuito sulla tua home page per vedere esattamente cosa lo rallenta. La diagnostica mostrerà quali risorse bloccano il rendering e quali immagini necessitano di ottimizzazione. Per una soluzione immediata, Thunder Page Speed Optimizer affronta automaticamente i problemi di velocità della home page più importanti:
- Defers render-blocking JavaScript from apps and theme (often 500KB-2MB on homepages)
- Ottimizza il caricamento dei CSS in modo che i contenuti sopra la piega vengano visualizzati immediatamente
- Lazy carica le immagini fuori schermo nelle raccolte in primo piano e nelle sezioni sotto-piega
- Precarica risorse critiche come l'immagine del tuo eroe
Installazione con un clic, zero modifiche al codice, funziona con ogni tema Shopify. Le ottimizzazioni manuali riportate di seguito ti garantiscono ulteriori vincite oltre ai miglioramenti automatici di Thunder.
Perché la tua home page di Shopify è la pagina più lenta
Le pagine dei prodotti caricano 5-10 sezioni. Le pagine di raccolta caricano una griglia e alcuni filtri. Ma le home page? Sono una vetrina di tutto : banner eroi, collezioni in primo piano, bestseller, nuovi arrivi, testimonianze, storie del marchio, feed di Instagram, popup di newsletter e altro ancora. Ogni sezione aggiunge:
- Nodi DOM : più elementi HTML da analizzare e visualizzare per il browser. Una home page di 20 sezioni può avere 3.000-5.000 nodi DOM.
- Immagini : ciascuna raccolta in primo piano carica 4-16 immagini di prodotto, le sezioni degli eroi caricano 1-5 diapositive, le testimonianze aggiungono avatar. Una tipica home page carica 40-80 immagini in totale.
- JavaScript : librerie di presentazioni, timer per il conto alla rovescia, script di animazione, carosello JS. JS specifico per la home page può aggiungere 200-500 KB oltre al tema e agli script dell'app.
- Widget dell'app : chat dal vivo, badge di recensione, consenso ai cookie, barre degli annunci, popup. Ciascuno carica il proprio bundle JS/CSS.
Il risultato: le home page ottengono costantemente un punteggio inferiore di 10-20 punti rispetto alle pagine dei prodotti su Google PageSpeed Insights. Risolviamo quella sezione per sezione.
Sezione Hero: lo speed killer n. 1 sulla home page di Shopify
La sezione del tuo eroe è quasi sempre quella Il più grande elemento Contentful Paint (LCP). — il singolo parametro più importante per la velocità di caricamento percepita. L'ottimizzazione dell'eroe ha l'impatto maggiore di ogni singola modifica.
Immagine singola vs presentazione
Una presentazione di eroi sembra impressionante ma uccide le prestazioni. Ecco il costo reale:
| Fattore | Immagine eroe singolo | Presentazione a 3 diapositive |
|---|---|---|
| Immagini caricate | 1 (200-400KB) | 3 (600KB-1,2MB) |
| JavaScript richiesto | 0KB | 30-100KB |
| Rischio CLS | Nessuno | Alta (diverse dimensioni dell'immagine) |
| Impatto LCP | Veloce (precaricabile) | Lento (download concorrenti) |
| Dati di conversione | CTR più alto (messaggio mirato) | CTR inferiore (cecità del banner) |
Elenco di controllo per l'ottimizzazione dell'immagine Hero
- Utilizza una singola immagine statica dell'eroe : un messaggio chiaro, un CTA, nessuna animazione
- Precarica l'immagine dell'eroe — aggiungi
nel<head>confetchpriority="alta" - Taglia adeguata : eroe desktop a 1920×700-900px, mobile a 750×900px. Non caricare un'immagine da 3000 px.
- Usa immagini reattive : offre dimensioni diverse per dispositivi mobili e desktop tramite
Dimensioni
srcset Attributie - Evita sovrapposizioni di testo su immagine ove possibile: utilizza testo HTML sopra l'immagine in modo che il testo venga visualizzato prima del caricamento dell'immagine
- Non caricare mai pigramente l'eroe — questo è l'elemento LCP. Dovrebbe caricarsi immediatamente con
caricamento="ansioso"
Sezioni della raccolta in primo piano: Less is More
Le raccolte in primo piano rappresentano il secondo più grande drenaggio di velocità della home page. Ogni sezione della collezione carica da 4 a 16 immagini di prodotto e la maggior parte delle home page ha 2-4 sezioni della collezione. Questo è potenzialmente 64 immagini di prodotto su un'unica pagina.
Strategie di ottimizzazione
- Mostra 4-8 prodotti per collezione invece di 12-16. Più prodotti = più immagini = pagina più lenta.
- Una raccolta sopra la piega, il resto sotto : carica in modo lento tutte le sezioni di raccolta sotto la piega
- Utilizza immagini di prodotto più piccole : le miniature dei prodotti sulla home page non richiedono una risoluzione di 1000 px. La larghezza di 400-600 px è sufficiente.
- Limita a 2 sezioni di raccolta in primo piano : la maggior parte dei visitatori fa comunque clic sulle pagine della raccolta. La home page deve solo indirizzarli.
- Evitare i caroselli di raccolta : caricano tutte le immagini in anticipo per uno scorrimento fluido. Una griglia con il collegamento "Visualizza tutto" è più veloce e altrettanto efficace.
Per le pagine delle collezioni stesse (che caricano molti più prodotti), vedere il nostro guida rapida alla pagina di raccolta.
Sfondi video e incorporamenti nella tua home page
Un video hero o un video con la storia del brand può aggiungere 2-5 MB alla tua home page se caricato direttamente. Gli incorporamenti di YouTube e Vimeo sono più leggeri ma caricano comunque 500KB-1MB di risorse iframe. La soluzione è la modello di facciata:
- Mostra un'immagine in miniatura statica invece del lettore video vero e proprio
- Quando il visitatore fa clic sulla miniatura, sostituiscila con il video incorporato reale
- Ciò consente di risparmiare 500KB-5MB sul caricamento iniziale della pagina per i visitatori che non riproducono mai il video (la maggior parte di loro)
Per i dettagli completi sull'implementazione, incluso il codice della facciata di YouTube Lite e Vimeo, vedere il nostro Guida all'ottimizzazione dei video di Shopify.
Se usi un video di sfondo nella sezione del tuo eroe: sostituiscilo con un'immagine statica sul cellulare. Le connessioni mobili sono più lente, gli schermi sono più piccoli e la maggior parte degli utenti mobili ha limiti di dati. L'impatto visivo di un video di sfondo su uno schermo da 375 px è minimo rispetto al costo delle prestazioni.
Widget dell'app home page: la tassa sulla velocità nascosta
Ogni app Shopify che installi può inserire JavaScript e CSS nella tua home page. Anche le app che sembrano leggere si sommano. Ecco il costo reale dei widget comuni della home page:
| Tipo di widget | Aggiunto JS/CSS | Impatto sulla velocità | Raccomandazione |
|---|---|---|---|
| Chat dal vivo (Tidio, Gorgia) | 200-500KB | Alto | Rinviare o caricare l'interazione |
| Distintivi di recensione (Judge.me, Loox) | 100-300KB | Medio | Carica solo sulle pagine dei prodotti |
| Consenso cookie (GDPR) | 50-200KB | Medio | Utilizza un banner leggero |
| Feed di Instagram | 500KB-1MB | Alto | Sostituisci con immagini statiche |
| Conto alla rovescia | 50-100KB | Basso-Med | Utilizza solo CSS o rinvia JS |
| Popup newsletter | 100-300KB | Medio | Carica dopo il rendering della pagina |
È in corso il caricamento di un negozio con 5-6 di questi widget 1-3 MB di JavaScript extra solo per i widget della home page. Questo si aggiunge al tema JS, al JS di Shopify e agli script di analisi. Scopri di più sull'identificazione delle app problematiche nel nostro app che rallentano il tuo negozio .
Thunder rinvia automaticamente gli script delle app non critici: prima viene eseguito il rendering della pagina, quindi i widget vengono caricati in background. Questa è la singola modifica di maggiore impatto per la maggior parte delle home page.
Controlla le sezioni della tua home page Shopify
Apri il pannello di controllo Shopify → Negozio online → Personalizza → Home page. Conta le tue sezioni. Se ne hai più di 12, probabilmente danneggi le prestazioni senza un vantaggio di conversione proporzionale. Ecco un quadro per decidere cosa rimanere:
✅ Mantieni (alto valore di conversione)
- Banner eroe con CTA primario
- 1-2 griglie di raccolta in evidenza (4-8 prodotti ciascuna)
- Prove sociali/testimonianze (widget basati su testo, non incorporati)
- Proposte di valore (spedizione, resi, garanzie)
- CTA a piè di pagina / iscrizione alla newsletter
❌ Considerare la rimozione (valore basso, costo elevato)
- Feed Instagram (larghezza di banda elevata, conversione bassa)
- Presentazioni multiple/caroselli
- Sezioni dei post del blog (link al blog invece)
- Mappa/localizzazione negozio sulla home page
- Sezioni di raccolta ridondanti (3+ raccolte in primo piano)
- Sfondi video con riproduzione automatica
Ogni sezione che rimuovi è costituita da immagini che non vengono caricate, nodi DOM che non vengono analizzati e JavaScript che non viene eseguito. Per un controllo più approfondito a livello di sito, segui il nostro Lista di controllo del controllo della velocità di Shopify.
Velocità della home page mobile: dove conta di più
Over 70% of Shopify traffic comes from mobile devices — and mobile is where homepage speed problems are most severe. Slower connections, less RAM, smaller screens mean every extra kilobyte hurts more. Here's what to focus on:
- Offre immagini hero ottimizzate per dispositivi mobili : non caricare un eroe da 1920×900px su uno schermo da 375px. Utilizzare
Attributi
srcset Attributieper pubblicare un'immagine da 750 px su dispositivi mobili. Solo questo può far risparmiare 200-400KB. - Riduci i prodotti visibili sui dispositivi mobili : una griglia di prodotti a 4 colonne su desktop diventa una griglia a 2 colonne su dispositivi mobili. Mostra 4 prodotti invece di 8: il resto richiede comunque lo scorrimento.
- Disattiva gli sfondi video sui dispositivi mobili : sostituisci con un'immagine statica utilizzando una query multimediale CSS o le impostazioni del tema. Il video in background sul cellulare consuma larghezza di banda e batteria.
- Semplifica la navigazione mobile : i mega menu che caricano dozzine di immagini di raccolte al passaggio del mouse si traducono in pesanti menu hamburger mobili che precaricano quelle stesse immagini.
- Test su dispositivi reali : la limitazione di Chrome DevTools non simula perfettamente le prestazioni mobili reali. Utilizzare il nostro strumento di test della velocità o PageSpeed Insights di Google con una connessione mobile reale.
Per un'ottimizzazione mobile completa oltre la home page, vedere il nostro Guida all'ottimizzazione della velocità mobile.
Ottimizzazione Above-the-Fold per le home page di Shopify
Il browser visualizza la tua pagina dall'alto verso il basso. Ciò che appare "above the fold" (il viewport visibile prima dello scorrimento) determina il tuo punteggio LCP e la prima impressione del visitatore. Ottimizza quest'area senza pietà:
- Identifica il tuo elemento LCP : esegui PageSpeed Insights e cerca la diagnostica "Elemento Paint con contenuto più grande". Di solito è l'immagine dell'eroe. Precarica questa immagine con alta priorità.
- CSS critico in linea : il CSS necessario per visualizzare il contenuto Above-fold deve essere incorporato nel file
<head>, non in un foglio di stile esterno che blocca il rendering. Il nostro Guida all'ottimizzazione CSS tratta questo argomento in dettaglio. - Rimanda le sezioni sotto-piega : tutto dopo l'eroe e la prima sezione visibile dovrebbe caricarsi lentamente. Le immagini ottengono
caricamento="pigro"e le sezioni con uso intensivo di JavaScript dovrebbero utilizzare l'osservatore di intersezione per caricarsi solo quando si scorre nella vista. - Riduci al minimo le risorse che bloccano il rendering : ogni file CSS e JavaScript sincrono nel file
<head>blocca la prima vernice. Thunder elimina le risorse che bloccano il rendering automaticamente rinviando gli script non critici.
⚡ Correzione rapida rispetto all'ottimizzazione manuale della home page
| Ottimizzazione | Thunder (automatico) | Manuale (è necessario uno sviluppatore) |
|---|---|---|
| Rinvia gli script di blocco del rendering | ✅ Un clic | Modifica theme.liquid, rischio di danneggiare le app |
| Ottimizza il caricamento CSS | ✅ Automatico | Estrai manualmente i CSS critici |
| Immagini a caricamento lento | ✅ Automatico | Aggiungi caricamento = "pigro" per immagine |
| Precarica l'immagine dell'eroe | ✅ Automatico | Aggiungi il tag del collegamento di precaricamento nel tema |
| È ora di implementare | 60 secondi | 4-8 ore di tempo di sviluppo |
| Rischio | Zero (reversibile) | Può interrompere temi/app |
Installa Thunder per l'ottimizzazione automatica della home page, quindi applica le vittorie manuali (riduzione della sezione, scambio dell'immagine dell'eroe) per il massimo effetto. Vedi i prezzi.
Domande frequenti
Perché la mia home page di Shopify è più lenta delle pagine dei prodotti?
Le home page sono in genere la pagina più pesante in un negozio Shopify perché contengono il maggior numero di sezioni: slider di eroi, collezioni in primo piano (caricamento di 8-16 immagini di prodotto), banner promozionali, sfondi video, caroselli di testimonianze, feed di Instagram, barre di annunci e widget di app. Ogni sezione aggiunge nodi DOM, CSS, JavaScript e immagini. Una tipica home page ha 15-30 sezioni mentre una pagina di prodotto ne ha 5-10. Questo è il motivo per cui le home page di solito ottengono 10-20 punti in meno su PageSpeed Insights rispetto alle pagine dei prodotti.
Dovrei utilizzare una presentazione o un'immagine hero singola sulla mia home page di Shopify?
Una singola immagine di un eroe è significativamente più veloce di una presentazione. Le presentazioni caricano 3-5 immagini a dimensione intera in anticipo (anche se solo una è visibile), aggiungono JavaScript per l'animazione/navigazione e spesso causano CLS (Cumulative Layout Shift) quando le immagini vengono caricate a velocità diverse. Una singola immagine hero statica carica un'immagine, non richiede JavaScript ed è prevedibile per lo scanner di precaricamento del browser. Se devi utilizzare una presentazione, limitala a 2-3 diapositive e carica le diapositive 2+.
Quante sezioni dovrebbe avere una home page di Shopify?
Per una velocità ottimale, mantieni la tua home page a un massimo di 8-12 sezioni. Ogni sezione aumenta le dimensioni del DOM, la complessità dei CSS e spesso carica le proprie immagini o script. Le sezioni Above the Fold (eroe, barra degli annunci, navigazione) dovrebbero caricarsi immediatamente. Tutto ciò che segue dovrebbe essere caricato lentamente. Molti negozi Shopify ad alte prestazioni utilizzano solo 6-8 sezioni: hero, collezione in evidenza, proposte di valore, testimonianze, prodotti in evidenza e CTA a piè di pagina.
I widget dell'app della home page rallentano il mio negozio Shopify?
Sì, in modo significativo. I widget comuni della home page includono chat dal vivo (Tidio, Gorgias – 200-500KB JS), badge di recensione (Judge.me, Loox – 100-300KB), banner di consenso sui cookie (50-200KB), barre di annunci con timer per il conto alla rovescia (50-100KB JS) e feed di Instagram (500KB-1MB comprese le immagini). Ogni widget carica i propri JavaScript e CSS, spesso bloccando il rendering. Un negozio con 5-6 widget della home page può facilmente aggiungere 1-2 secondi al tempo di caricamento. Thunder rinvia questi script in modo che vengano caricati dopo il rendering della pagina.
Qual è un buon punteggio PageSpeed per una home page di Shopify?
Sui dispositivi mobili, un punteggio di 50-70 è realistico per una home page di Shopify con collezioni in primo piano e widget di app. Un punteggio compreso tra 70 e 90 è ottenibile con l'ottimizzazione (Thunder + ottimizzazione dell'immagine + riduzione della sezione). I punteggi superiori a 90 sui dispositivi mobili sono rari per le home page con contenuti reali. Sul desktop, punta a 80-95. Non ossessionarti sul numero del punteggio: concentrati sui parametri del mondo reale: LCP inferiore a 2,5 secondi, CLS inferiore a 0,1 e INP inferiore a 200 ms.
Come faccio a caricare la mia home page Shopify in meno di 2 secondi?
Per ottenere un caricamento della home page inferiore a 2 secondi: (1) Utilizza una singola immagine hero ottimizzata anziché una presentazione, precaricata con fetchpriority='high'. (2) Limite a 8-10 sezioni totali. (3) Carica pigramente tutto sotto la piega. (4) Rimuovere o posticipare i widget delle app non essenziali. (5) Utilizza un tema Shopify 2.0 veloce come Dawn. (6) Installa Thunder Page Speed Optimizer per rinviare automaticamente gli script di blocco del rendering e ottimizzare l'ordine di caricamento delle risorse. (7) Limita le sezioni della collezione in evidenza a 4-8 prodotti invece di 16+.
Rendi la tua home page di Shopify la pagina più veloce del tuo negozio
Your homepage doesn't have to be your slowest page. The biggest wins are structural: replace the slideshow with a single hero image, cut sections from 20 to 10, limit featured collections to 4-8 products each, and defer app widgets that aren't needed for first render. These changes alone can cut 1-3 seconds off your homepage load time.
Per le ottimizzazioni tecniche (differimento dello script, ottimizzazione CSS, precaricamento delle immagini, eliminazione del blocco del rendering) Thunder Page Speed Optimizer li gestisce automaticamente. Un clic, miglioramento del punteggio di oltre 27 punti, funziona su ogni tema.
Metti alla prova la velocità della tua home page adesso e guarda dove ti trovi. Per il playbook completo oltre la tua home page, consulta il nostro guida completa all'ottimizzazione della velocità di Shopify.
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