Velocità delle pagine collezione Shopify: risolvere caricamenti lenti e immagini eager

Perché le pagine collezione sono le più lente su Shopify

Se avete mai testato il vostro negozio Shopify con Google PageSpeed Insights, avrete probabilmente notato uno schema: la homepage ottiene un punteggio discreto, le pagine prodotto se la cavano, ma le pagine collezione ottengono punteggi pessimi.

Non è un bug — è la natura delle pagine collezione. Mentre una pagina prodotto mostra 1-5 immagini e un po' di testo, una pagina collezione deve renderizzare:

Il calcolo è semplice: una pagina prodotto con 3 immagini totalizza forse 300KB di dati immagine. Una pagina collezione che mostra 24 prodotti con immagini non ottimizzate può facilmente raggiungere 3-5MB di soli dati immagine. Aggiungete JavaScript, CSS, font e script di tracciamento e arrivate a 5-8MB di peso totale della pagina.

Su uno smartphone con connessione 4G, questo si traduce in un tempo di caricamento di 6-12 secondi. Google considera qualsiasi valore sopra i 2.5 secondi un'esperienza scadente per il Largest Contentful Paint (LCP).

I 6 maggiori killer di velocità delle pagine collezione

Non tutti i problemi di prestazioni sono uguali. Ecco i problemi specifici che danneggiano di più le pagine collezione, classificati per impatto:

1. Immagini prodotto non ottimizzate (impatto maggiore)

È il killer di velocità numero 1 sulle pagine collezione, responsabile del 60-80% del peso totale della pagina nella maggior parte dei negozi. Problemi comuni:

• • Immagini sovradimensionate — caricare foto prodotto da 4000×4000px che vengono mostrate a 300×300px nelle card della collezione
• • Nessun lazy loading — tutte le 24+ immagini si scaricano subito, anche quelle sotto la piega che il visitatore non ha ancora raggiunto
• • Formato sbagliato — servire JPEG/PNG quando WebP o AVIF sarebbero più piccoli del 30-50%
• • Nessun srcset — servire la stessa immagine grande a mobile e desktop invece di dimensioni adatte al dispositivo

2. JavaScript dei filtri che blocca il rendering

Le funzionalità di filtro e ordinamento delle collezioni — che siano i filtri nativi di Shopify OS 2.0 o app di terze parti come Boost Product Filter — caricano spesso 50-200KB di JavaScript che bloccano il rendering della pagina. Il visitatore non può vedere i prodotti finché questo JavaScript non finisce di scaricarsi ed eseguirsi.

Le app di filtri più diffuse aggiungono i propri bundle CSS e JS sopra gli asset del tema. Alcune iniettano script inline nell'<head> che devono essere eseguiti prima che qualsiasi contenuto venga renderizzato. Approfondite nella nostra guida su come risolvere le risorse che bloccano il rendering su Shopify.

3. Troppi prodotti per pagina

Alcuni titolari di negozi impostano le collezioni per mostrare 48, 72 o addirittura 100 prodotti per pagina, pensando che migliori l'esperienza di acquisto. In realtà, moltiplica ogni problema di prestazioni — più immagini, più elementi DOM, più uso di memoria, più calcoli di layout.

4. Immagini banner delle collezioni

Molti temi mostrano una grande immagine hero/banner in cima alle pagine collezione. Questa immagine è spesso l'elemento LCP — il contenuto visibile più grande al caricamento della pagina. Se non è dimensionata e precaricata correttamente, ritarda l'intero tempo di caricamento percepito.

5. Script di app di terze parti

Gli script di terze parti di app di recensioni, programmi fedeltà, widget di chat e strumenti di analytics si caricano su ogni pagina — comprese le pagine collezione. Su una pagina prodotto, 500ms di overhead da script di terze parti si notano. Su una pagina collezione già pesante, vi spingono oltre il punto di rottura.

6. Effetti hover e scambio di immagini

Un pattern di design molto diffuso è mostrare una seconda immagine prodotto al passaggio del mouse. Significa caricare due immagini per card prodotto invece di una — raddoppiando il peso delle immagini per una funzione che la maggior parte degli utenti mobile non vedrà mai (niente hover sui touchscreen).

Soluzione: eager loading dell'immagine banner hero in theme.liquid

Uno dei problemi di velocità più comuni delle pagine collezione Shopify riguarda il modo in cui si carica l'immagine banner hero. Molti temi — tra cui Dawn, Refresh e altri temi OS 2.0 — impostano il banner della collezione su loading="lazy" di default. Per il banner hero è sbagliato, perché di solito è l'elemento Largest Contentful Paint (LCP) — il contenuto visibile più grande al primo caricamento della pagina.

Quando il banner hero è in lazy loading, il browser ne ritarda deliberatamente il download finché l'utente non vi si avvicina scorrendo. Ma il banner è già visibile nel viewport — quindi il browser attende inutilmente, affossando il punteggio LCP.

La soluzione: impostare i banner hero su eager loading

Trovate la sezione hero/banner della collezione nei file del tema. Nella maggior parte dei temi OS 2.0 si trova in sections/main-collection-banner.liquid o simile. Cercate il tag <img> che renderizza il banner della collezione e cambiate (o aggiungete) questi attributi:

<!-- ❌ Wrong: lazy loading the hero banner -->
<img
  src="{{ section.settings.image | image_url: width: 1600 }}"
  loading="lazy"
  alt="{{ section.settings.image.alt }}">

<!-- ✅ Correct: eager loading with high fetch priority -->
<img
  src="{{ section.settings.image | image_url: width: 1600 }}"
  loading="eager"
  fetchpriority="high"
  width="{{ section.settings.image.width }}"
  height="{{ section.settings.image.height }}"
  alt="{{ section.settings.image.alt }}">

Nello specifico per i temi Dawn/OS 2.0

Nei temi basati su Dawn, il banner della collezione viene spesso renderizzato tramite il filtro image_tag o image_url in sections/main-collection-banner.liquid. Potrebbe anche servire aggiungere un tag <link rel="preload"> nell'head di theme.liquid per dire al browser di iniziare a scaricare l'immagine del banner ancora prima di incontrare il tag <img>:

<!-- Add to theme.liquid <head> for collection pages -->
{% if template.name == 'collection' and collection.image %}
  <link rel="preload" as="image"
    href="{{ collection.image | image_url: width: 1600 }}"
    fetchpriority="high">
{% endif %}

Soluzione manuale n. 1: ottimizzare le immagini delle collezioni

Il singolo intervento a maggiore impatto è sistemare il modo in cui le immagini prodotto si caricano sulle pagine collezione.

Aggiungete il lazy loading nativo

Trovate il template della card prodotto della collezione (di solito snippets/card-product.liquid o simile) e aggiungete loading="lazy" alle immagini prodotto. Ma attenzione — NON dovete applicare il lazy loading alla prima riga di prodotti visibili, perché ritarda l'LCP.

{% for product in collection.products %}
  {% if forloop.index <= 4 %}
    <img src="{{ product.featured_image | image_url: width: 400 }}"
         loading="eager"
         fetchpriority="{% if forloop.first %}high{% else %}auto{% endif %}"
         width="400" height="400"
         alt="{{ product.featured_image.alt | escape }}">
  {% else %}
    <img src="{{ product.featured_image | image_url: width: 400 }}"
         loading="lazy"
         width="400" height="400"
         alt="{{ product.featured_image.alt | escape }}">
  {% endif %}
{% endfor %}

Usate dimensioni immagine responsive

Invece di servire un'unica immagine grande a tutti i dispositivi, usate l'attributo srcset con il filtro image_url di Shopify:

<img
  src="{{ product.featured_image | image_url: width: 400 }}"
  srcset="
    {{ product.featured_image | image_url: width: 200 }} 200w,
    {{ product.featured_image | image_url: width: 400 }} 400w,
    {{ product.featured_image | image_url: width: 600 }} 600w"
  sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
  loading="lazy"
  width="400" height="400"
  alt="{{ product.featured_image.alt | escape }}">

Impostate dimensioni esplicite

Includete sempre gli attributi width e height sulle immagini. Senza di essi, il browser non può calcolare il layout finché l'immagine non si carica, causando il Cumulative Layout Shift (CLS) — i prodotti saltano qua e là man mano che le immagini arrivano. Consultate la nostra guida ai Core Web Vitals per approfondire il CLS.

Soluzione manuale n. 2: ridurre i prodotti per pagina

È la soluzione manuale più semplice, ma spesso trascurata. Nelle impostazioni del tema (o nel template della collezione), regolate il numero di prodotti mostrati per pagina.

Nei temi Shopify Online Store 2.0, di solito si cambia in Personalizza → Pagina collezione → Griglia prodotti → Prodotti per pagina. Per i temi vintage dovrete modificare il tag Liquid paginate del template della collezione:

{% paginate collection.products by 20 %}
  <!-- product grid -->
{% endpaginate %}

Tenete presente: ridurre i prodotti per pagina significa più paginazione. Assicuratevi che la vostra paginazione sia accessibile e facile da usare, con numeri di pagina chiari e pulsanti avanti/indietro.

Soluzione manuale n. 3: ottimizzare filtri e ordinamento

Le funzionalità di filtro e ordinamento sono essenziali per l'usabilità delle collezioni — ma sono anche una fonte importante di JavaScript in eccesso. Ecco come ottimizzarle:

Usate il filtraggio nativo dello storefront di Shopify

Se usate un tema Shopify Online Store 2.0, sfruttate il filtraggio integrato dello storefront di Shopify invece delle app di filtri di terze parti. Il filtraggio nativo è server-side, quindi non richiede JavaScript pesante lato client. La pagina si ricarica con i risultati filtrati invece di filtrare sul client.

Per attivarlo: andate su Admin Shopify → Negozio online → Navigazione → Filtri per collezioni e ricerca. Aggiungete i filtri che desiderate (prezzo, disponibilità, tipo di prodotto, fornitore, ecc.).

Rinviate il JavaScript dei filtri

Se dovete usare un'app di filtri di terze parti per funzionalità avanzate, assicuratevi che i suoi script siano rinviati. Cercate nel tema il tag <script> che carica il JS dell'app di filtri e aggiungete l'attributo defer:

<!-- Before (render-blocking) -->
<script src="https://filter-app.com/bundle.js"></script>

<!-- After (deferred) -->
<script src="https://filter-app.com/bundle.js" defer></script>

Soluzione manuale n. 4: implementare una paginazione intelligente

Il modo in cui gestite la paginazione influisce sia sulla velocità sia sull'esperienza utente. Ecco i tre approcci, classificati per prestazioni:

Se usate l'infinite scroll o "Carica altro", assicuratevi che l'implementazione usi l'API Intersection Observer (non i listener sugli eventi di scroll, che affossano le prestazioni) e includa una paginazione di fallback <noscript> corretta per i crawler SEO.

Soluzione manuale n. 5: CSS critico per le collezioni

Il browser non può renderizzare alcun contenuto finché non scarica e analizza l'intero file CSS. Su Shopify, i file CSS dei temi pesano in genere 100-300KB. L'incorporamento del CSS critico risolve il problema mettendo il CSS necessario per i contenuti above the fold direttamente nell'HTML.

Per le pagine collezione, il CSS critico include gli stili per:

• • Header/navigazione
• • Immagine banner della collezione (se presente)
• • La prima riga di card prodotto (layout della griglia, dimensioni delle immagini, stile del testo)
• • Layout della sidebar dei filtri (se visibile above the fold)

Generare il CSS critico manualmente è tedioso — bisogna identificare quali regole CSS si applicano agli elementi above the fold, estrarle, incorporarle in un tag <style> nell'<head> e poi caricare in modo asincrono il foglio di stile completo. Strumenti come Critical di Addy Osmani possono aiutare ad automatizzare il processo, ma integrarli nel processo di build di un tema Shopify non è banale.

Come misurare la velocità delle pagine collezione

Non tirate a indovinare — misurate. Potete testare la velocità della vostra pagina collezione in pochi secondi con il nostro strumento gratuito, oppure usare le opzioni qui sotto. Ma testate gli URL giusti. La maggior parte delle persone testa la homepage e si ferma lì. Per la velocità delle pagine collezione, dovete testare:

Usate questi strumenti per i test (approfondite nella nostra guida al monitoraggio delle prestazioni):

• • Google PageSpeed Insights — testa mobile e desktop, mostra i Core Web Vitals
• • GTmetrix — grafici a cascata dettagliati che mostrano esattamente cosa è lento
• • Chrome DevTools (scheda Network) — filtrate per immagini per vedere il peso totale delle immagini
• • WebPageTest — vista filmstrip per vedere quando i prodotti diventano visibili

Thunder vs ottimizzazione manuale delle pagine collezione

Domande frequenti

Risorse correlate