Velocizza le pagine dei prodotti Shopify in 60 secondi
Prima di immergerci nelle ottimizzazioni manuali, prova la velocità della pagina del tuo prodotto per vedere il tuo punteggio attuale. Inserisci l'URL della pagina del prodotto (non solo la tua home page) per un'immagine precisa. Se il tuo punteggio mobile è inferiore a 60, Thunder Page Speed Optimizer può aiutare immediatamente:
- Rinvia gli script dell'app di revisione (Judge.me, Loox, Stamped) in modo che le immagini del prodotto vengano visualizzate per prime
- Ritarda il widget JavaScript di upsell e cross-sell fino a dopo il caricamento della pagina
- Ottimizza l'ordine di caricamento per analisi e script di chat sulle pagine dei prodotti
- Funziona con tutti i temi Shopify 2.0: non sono necessarie modifiche al codice
Per i commercianti che desiderano capire cosa rallenta le pagine dei loro prodotti e ottimizzare anche manualmente, continua a leggere.
Perché le pagine dei prodotti Shopify sono più lente delle altre pagine
La tua home page potrebbe ottenere un punteggio di 75 sui dispositivi mobili mentre le pagine dei tuoi prodotti possono ottenere un punteggio di 45. Questo divario non è casuale. Le pagine dei prodotti caricano molte più risorse rispetto a qualsiasi altro tipo di pagina nel tuo negozio:
| Risorsa | Dimensioni tipiche | Perché è caricato |
|---|---|---|
| Immagini del prodotto (5-10) | 500KB-2MB | Galleria, zoom, immagini varianti |
| Esamina gli script dell'app | 150-500KB | Classificazione in stelle, carosello di recensioni |
| App di upsell/cross-sell | 100-400KB | Widget "Potrebbero interessarti anche". |
| Selettore variante JS | 20-80KB | Campioni di colore, selettori di dimensioni |
| Dati JSON del prodotto | 10-150KB | Prezzi delle varianti, inventario, metafield |
| Script di analisi | 150-600KB | Monitoraggio e-commerce migliorato |
| Widget di chat | 300-800KB | Bolla di supporto su ogni pagina |
Viene caricata una tipica pagina di prodotto con recensioni, consigli di upsell, analisi e un widget di chat 1,5-4 MB solo di JavaScript — sopra le immagini del prodotto. Confrontalo con una home page con un'immagine hero e alcuni prodotti in evidenza che caricano 500 KB-1 MB di JavaScript.
L'ironia: le pagine dei prodotti sono il luogo in cui avviene la conversione. Una pagina di prodotto lenta ti costa direttamente le vendite. Il nostro dati su velocità e conversioni mostra che ogni secondo in più del tempo di caricamento della pagina del prodotto riduce i tassi di conversione del 7-12%.
Ottimizzazione delle immagini dei prodotti per la velocità
Le immagini dei prodotti sono in genere la risorsa più grande sulle pagine dei prodotti e le più comuni Elemento LCP. Ottenere la corretta ottimizzazione delle immagini è la modifica manuale di maggiore impatto che puoi apportare.
Carica dimensioni e formato
- Dimensione massima di caricamento: 2000x2000px. Il CDN di Shopify genera automaticamente versioni più piccole tramite
srcset Attributi. Il caricamento di originali da 4000px spreca tempo di elaborazione e archiviazione. - Utilizza JPEG per le foto dei prodotti — La qualità dell'80-85% rappresenta il miglior equilibrio. PNG solo per prodotti con trasparenza (vetro, sovrapposizioni).
- Shopify si converte automaticamente in WebP per i browser che lo supportano, ma la qualità del file sorgente è comunque importante per il fallback.
- Comprimi prima del caricamento. Strumenti come TinyPNG o Squoosh possono ridurre le dimensioni dell'immagine del 40-60% senza perdita visibile di qualità. Nostro guida all'ottimizzazione delle immagini copre l'intero flusso di lavoro.
Numero di immagini del prodotto
Ogni immagine del prodotto aggiunge peso alla pagina, anche con il caricamento lento. I temi Shopify in genere caricano rapidamente le prime 1-2 immagini e caricano lentamente il resto, ma il browser rileva e inizia comunque ad analizzare tutti gli URL delle immagini durante il caricamento iniziale della pagina.
| Immagini per prodotto | Impatto sul peso della pagina | Raccomandazione |
|---|---|---|
| 1-3 immagini | 100-400KB | Ideale per prodotti semplici |
| 4-6 immagini | 300-800KB | Punto debole per la maggior parte dei prodotti |
| 7-10 immagini | 500KB-1.5MB | Moda/arredamento: garantisce il funzionamento del caricamento lento |
| 10+ immagini | 1MB+ | Considera invece il video per le riprese di dettaglio |
Precarica l'immagine principale del prodotto
La prima immagine del prodotto è quasi sempre l'elemento LCP sulle pagine dei prodotti. Il precaricamento indica al browser di recuperarlo prima di trovarlo nell'HTML, tagliando LCP di 300-800 ms:
{% comment %} Add to theme.liquid <head> {% endcomment %}
{'{% if template contains "product" %}'}{'
'}
{' {% assign featured_image = product.featured_image %}'}{'
'}
{' {% if featured_image %}'}{'
'}
{' '}{'
'}
{' {% endif %}'}{'
'}
{'{% endif %}'}}Per ulteriori tecniche di precaricamento, vedere il nostro Guida ai suggerimenti sulle risorse per Shopify.
Script dell'app della pagina prodotto: The Hidden Speed Killer
Molte app Shopify si rivolgono specificamente alle pagine dei prodotti. Widget di revisione, consigli di upsell, tabelle delle taglie, badge di fiducia: tutti inseriscono JavaScript che viene eseguito su ogni pagina di prodotto. Ecco come le app delle pagine prodotto più comuni influiscono sulla velocità:
App di revisione
Le app di revisione sono essenziali per la prova sociale ma sono tra gli script più pesanti sulle pagine dei prodotti. Caricano widget di valutazione a stelle, caroselli di recensioni, recensioni di foto e sezioni di domande e risposte, tutti richiedono JavaScript significativo:
- Judge.me: 150-300KB JS: relativamente leggera tra le app di recensione
- Loox (recensioni fotografiche): 200-500KB JS: più pesante a causa della funzionalità della galleria immagini
- Stamped.io: 150-400KB JS: varia in base ai widget abilitati
- Yotpo: 300-600KB JS: uno dei più pesanti grazie alle funzionalità della suite completa
Le recensioni sono fondamentali per la conversione, quindi rimuovere l'app non è la risposta. Rimanda invece lo script di revisione in modo che l'immagine del prodotto, il titolo, il prezzo e il pulsante Aggiungi al carrello vengano visualizzati per primi. Thunder lo gestisce automaticamente.
App di upsell e cross-sell
"Frequently bought together" and "You may also like" widgets add 100-400KB of JavaScript plus additional product image requests. These widgets are valuable below the fold but shouldn't block the main product content from rendering.
Trust Badge e app di prova sociale
Le app per badge di fiducia (badge di spedizione gratuiti, icone di pagamento sicuro) sembrano leggere ma molte caricano 50-150 KB di JavaScript per semplici immagini statiche. Prendi in considerazione la possibilità di sostituire i badge di fiducia basati su app con HTML/CSS statici direttamente nel tuo tema: zero JavaScript, stesso impatto visivo. La nostra guida su app che rallentano il tuo negozio elenca i peggiori trasgressori e le alternative più veloci.
Come controllare gli script delle pagine di prodotto
- Apri una pagina di prodotto in Chrome → DevTools → scheda Rete
- Filtra per "JS" per vedere tutti i file JavaScript
- Ordina per dimensione (prima il più grande)
- Cerca domini di terze parti: ognuno rappresenta un'app o uno script esterno
- Nota quali script bloccano il rendering (controlla la colonna "Iniziatore")
This audit often reveals surprises — scripts from apps you forgot you installed, or script di terze parti caricamento sulle pagine dei prodotti dove non servono a nulla.
Velocità del selettore delle varianti sulle pagine dei prodotti Shopify
I prodotti con molte varianti (dimensioni, colore, materiale) creano sfide prestazionali. L'oggetto JSON del prodotto Shopify, incorporato in linea in ogni pagina del prodotto, contiene dati per ogni variante, inclusi prezzo, stato dell'inventario e immagini.
Impatto per numero di varianti:
- Meno di 20 varianti: Impatto trascurabile (~5-20KB di JSON)
- 20-50 varianti: Impatto moderato (~20-60KB di JSON)
- 50-100 varianti: Impatto notevole (~60-150KB di JSON, potrebbe influire su INP)
- Oltre 100 varianti: Significativo: considera la suddivisione in più prodotti
Oltre al peso dei dati, possono causare selettori di varianti con molte opzioni Problemi INP se il JavaScript che gestisce il cambio di variante non è ottimizzato. Ogni modifica di variante attiva un aggiornamento DOM per prezzo, disponibilità e potenzialmente immagini: maggiore è il numero di varianti, più pesante è ogni interazione.
Suggerimento per l'ottimizzazione: Se disponi di immagini specifiche per la variante, assicurati che venga caricata solo l'immagine della variante corrente. Lascia che il caricamento lento gestisca il resto. Alcuni temi prerecuperano tutte le immagini varianti, il che aumenta notevolmente il peso della pagina.
Struttura della pagina prodotto Shopify per la massima velocità
L'ordine e la struttura delle sezioni della pagina del prodotto sono importanti sia per la velocità percepita che per quella misurata. Ecco la struttura ottimale per le pagine dei prodotti veloci:
Above the Fold (carica immediatamente)
- Galleria immagini prodotto — Prima immagine precaricata, il resto è caricato pigro
- Titolo e prezzo del prodotto : HTML semplice, non è necessario JavaScript
- Selettore variante — JS minimo per il menu a discesa/campione
- Pulsante Aggiungi al carrello — Deve essere immediatamente funzionante
- Breve descrizione — Prime 2-3 frasi della descrizione del prodotto
Below the Fold (carico lento)
- Descrizione completa del prodotto — Può utilizzare schede pieghevoli
- Widget di revisione - Rimanda lo script, visualizzato dopo lo scorrimento
- Prodotti correlati / "Potrebbe interessarti anche" - Carica su scorrimento
- Prodotti visualizzati di recente - Carica su scorrimento
- Badge e garanzie fiduciarie : HTML statico, non è necessario JS
The key principle: everything the customer needs to make a purchase decision (image, price, Add to Cart) should load first. Everything else can wait. This is what separates a product page that scores 40 on mobile from one that scores 70.
Per un approccio completo all'ottimizzazione dell'intero negozio, consulta il nostro guida completa all'ottimizzazione della velocità.
Velocità della pagina del prodotto mobile: il campo di battaglia della conversione
Over 70% of Shopify traffic comes from mobile devices, and product pages are where the speed gap between mobile and desktop is largest. A product page scoring 90 on desktop might score 45 on mobile because:
- Le CPU mobili sono più lente : l'analisi JavaScript richiede in media 3-5 volte più tempo sui dispositivi mobili rispetto ai desktop
- Le reti mobili sono meno affidabili — Anche su 4G, i picchi di latenza causano ritardi nel caricamento delle risorse
- Le gallerie di immagini dei prodotti sono più pesanti sui dispositivi mobili : le gallerie a scorrimento spesso precaricano immagini adiacenti per uno scorrimento fluido
- Le finestre mobili attivano diversi layout — Alcuni temi caricano CSS e JS aggiuntivi per layout di pagine di prodotti specifici per dispositivi mobili
Controlla il tuo Punteggi di velocità su dispositivi mobili e desktop : se il divario è superiore a 30 punti, è probabile che ci sia un'app con molto JavaScript che è particolarmente punitiva sui dispositivi mobili. Utilizza la limitazione della CPU di Chrome DevTools (rallentamento 4x) per simulare l'esperienza mobile sul desktop.
Thunder mira specificamente alle prestazioni mobili: il differimento dello script ha l'impatto maggiore sui punteggi mobili perché è lì che l'analisi JavaScript rappresenta il collo di bottiglia. Vedi .
Velocità della pagina prodotto e SEO: cosa misura Google
Google utilizza Core Web Vitals come fattore di ranking e le pagine dei tuoi prodotti vengono misurate individualmente. Una pagina di prodotto lenta può avere prestazioni inferiori nei risultati di ricerca anche se la tua home page è veloce. Le metriche che contano di più per le pagine dei prodotti:
- LCP (Pittura con contenuto più grande): Di solito l'immagine principale del prodotto. Obiettivo inferiore a 2,5 secondi. Precaricare l'immagine è la soluzione n. 1.
- INP (Interazione con la pittura successiva): Selezione delle varianti, clic su Aggiungi al carrello e interazioni con la galleria. Obiettivo inferiore a 200 ms. Gli script pesanti delle app sono solitamente il colpevole.
- CLS (Spostamento cumulativo del layout): Gallerie di immagini senza dimensioni esplicite, widget di revisione che si caricano tardi e spingono i contenuti verso il basso, variazioni di prezzo sulla selezione delle varianti. Obiettivo inferiore a 0,1.
Correggi queste metriche con le nostre guide dedicate: Ottimizzazione LCP, Correzioni INPe Correzioni CLS.
Velocità della pagina prodotto: correzione manuale rispetto a Thunder
| Ottimizzazione | Avvicinamento manuale | Con tuoni |
|---|---|---|
| Rivedere il differimento dello script | Modifica il codice del tema, rischio di rottura della visualizzazione della revisione | Automatico: le recensioni continuano a caricarsi, subito dopo il rendering della pagina |
| Ottimizzazione del widget di upsell | Contatta lo sviluppatore dell'app, opzioni limitate | Rinvio automatico dei widget non critici |
| Gestione script analitici | Strategia di caricamento personalizzata per script | Tutte le analisi differite senza perdita di dati |
| Precaricamento immagine | Aggiungi suggerimento di precaricamento in theme.liquid | Prioritizzazione automatica delle risorse |
| Tipico aumento del punteggio mobile | 10-20 punti (ore di lavoro) | 20-35 punti (impostazione di 60 secondi) |
Migliori risultati: combina l'ottimizzazione manuale delle immagini con Ottimizzazione automatica degli script di Thunder. Vedi piani attuali.
Elenco di controllo della velocità della pagina prodotto
Work through this checklist from top to bottom — items are ordered by impact:
- Installa Thunder Page Speed Optimizer — Rinvia tutti gli script non critici sulle pagine dei prodotti. Maggiore impatto, minimo sforzo. Installa ora
- Comprimi tutte le immagini del prodotto : utilizza TinyPNG o Squoosh, target inferiore a 200 KB per immagine a 2000x2000 px massimo.
- Limita le immagini a 4-6 per prodotto — Più immagini = più peso. Se necessario, utilizza il video per ulteriori angolazioni.
- Precarica l'immagine principale del prodotto — Add the preload hint from the code snippet above.
- Controlla le app della pagina prodotto — Count JavaScript files from third-party domains. Remove apps you're not using.
- Sostituisci i badge di fiducia basati su app con HTML statico : non è necessario JavaScript per le immagini statiche.
- Riduci il conteggio delle varianti : suddividi i prodotti con oltre 100 varianti in elenchi separati.
- Assicurarsi che il caricamento lento funzioni — Controlla che le immagini Below the Fold abbiano
caricamento="pigro". - Test su cellulare — Corri il nostro test di velocità con l'URL della pagina del prodotto, non solo della home page.
Domande frequenti sulla velocità della pagina del prodotto Shopify
Qual è un buon punteggio di velocità per una pagina di prodotto Shopify?
A realistic target for Shopify product pages is 60-80 on mobile and 85-95 on desktop in PageSpeed Insights. Stock themes with no apps score 80-95 on mobile, but real stores with review apps, upsell widgets, and analytics rarely stay above 70. If your product pages score below 40 on mobile, there's a significant optimization opportunity — typically from app scripts and unoptimized product images.
Perché le pagine dei miei prodotti Shopify sono più lente della mia home page?
Le pagine dei prodotti caricano più risorse rispetto alla maggior parte delle altre pagine: immagini dei prodotti ad alta risoluzione (spesso 5-10 per prodotto), selettore di varianti JavaScript, widget di recensione, script di app di upsell/cross-sell e markup dei dati strutturati. Molte app inseriscono anche script specifici nelle pagine dei prodotti che non vengono eseguiti nella home page. Una home page con una singola immagine principale e sezioni minime ha molto meno da caricare rispetto a una pagina di prodotto con una galleria, recensioni e prodotti consigliati.
Quante immagini di prodotto dovrei utilizzare per la massima velocità?
Utilizza 4-6 immagini di prodotto per il miglior equilibrio tra conversione e velocità. Ogni immagine aggiuntiva aggiunge 50-200 KB a seconda della risoluzione. Oltre le 6 immagini, il costo in termini di velocità supera il vantaggio di conversione per la maggior parte dei prodotti. Se hai bisogno di più immagini (mobili, moda), utilizza il caricamento lento in modo aggressivo in modo che solo le prime 1-2 immagini vengano caricate immediatamente. Il caricamento lento nativo di Shopify gestisce questo nella maggior parte dei temi moderni.
Le recensioni dei prodotti rallentano le pagine dei prodotti Shopify?
Sì: le app di recensione sono uno dei contributori di script più pesanti sulle pagine dei prodotti. Judge.me aggiunge 150-300KB di JavaScript, Loox (con recensioni di foto) aggiunge 200-500KB e Stamped aggiunge 150-400KB. Gli script vengono caricati su ogni pagina di prodotto indipendentemente dal fatto che quel prodotto abbia recensioni o meno. Thunder rinvia gli script delle app di revisione in modo che vengano caricati dopo il rendering della pagina, preservando il valore SEO delle recensioni senza penalizzazioni in termini di velocità.
Il numero di varianti del prodotto influisce sulla velocità della pagina?
Somewhat. Each variant adds data to the product JSON object embedded in the page. A product with 100+ variants (e.g., size × color × material combinations) can add 50-150KB of inline JSON. The bigger impact comes from variant-specific images — if each variant has its own image set, the browser may preload more images than necessary. Keep variants under 50 when possible and use a consistent image set across similar variants.
In che modo Thunder accelera nello specifico le pagine dei prodotti Shopify?
Thunder rinvia tutti i JavaScript non critici sulle pagine dei prodotti, inclusi widget di recensione, app di upsell, script di analisi e widget di chat, in modo che vengano caricati dopo che la pagina diventa interattiva. Ciò significa che la galleria di immagini del prodotto, il titolo, il prezzo e il pulsante Aggiungi al carrello vengono visualizzati più velocemente. La maggior parte delle pagine dei prodotti registra un miglioramento di 20-35 punti nel punteggio PageSpeed mobile. Thunder è completamente compatibile con tutti i temi Shopify 2.0 e non influisce sulla funzionalità della pagina del prodotto.
Rendi veloci le tue pagine dei prodotti Shopify
Product pages are your most important pages and typically your slowest. The speed gap comes from product image galleries, review widgets, upsell apps, and analytics scripts — all fighting for bandwidth on the page where conversion happens.
L'ottimizzazione della velocità della pagina del prodotto più efficace combina: compressione e limitazione delle immagini del prodotto, precarico dell'immagine del prodotto principale, controllo e rimozione delle app non necessarie e utilizzo Thunder Page Speed Optimizer per rinviare tutti gli script non critici in modo che il contenuto del prodotto venga visualizzato per primo.
Prova subito una pagina di prodotto — non la tua home page — per vedere il punteggio di velocità della tua pagina prodotto reale. Quindi segui la lista di controllo qui sopra per colmare il divario.
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