Ottimizzazione Velocità Shopify 2026: Guida Completa ai Core Web Vitals e Prestazioni

January 15, 2026 (1mo ago)

Ottimizzazione Velocità Shopify 2026: Guida Completa ai Core Web Vitals e Prestazioni

La velocità delle pagine influisce direttamente sul tuo fatturato. Gli studi dimostrano che:

Eppure il negozio Shopify medio si carica in 5-7 secondi - troppo lento. Dopo aver ottimizzato oltre 20 negozi Shopify, ho costantemente raggiunto tempi di caricamento di 2-3 secondi con aumenti di conversione del 15-40%.

In questa guida completa, ti mostrerò esattamente come ottimizzare il tuo negozio Shopify per la massima velocità e prestazioni.

Indice

  1. Perché la velocità è importante
  2. Comprendere i Core Web Vitals
  3. Misurare la velocità attuale
  4. Ottimizzazione delle immagini
  5. Ottimizzazione del tema
  6. Audit e pulizia delle app
  7. Ottimizzazione del codice
  8. Script di terze parti
  9. Tecniche avanzate
  10. Monitoraggio e manutenzione

Perché la velocità è importante

L'impatto sul business

Dati reali dai miei clienti:

Cliente A (Negozio di moda):

Cliente B (Negozio CBD):

L'impatto sulla SEO

Google ha confermato nel 2021 che i Core Web Vitals sono fattori di ranking. I siti lenti si posizionano peggio:

I negozi con buoni Core Web Vitals vedono posizionamenti organici più alti del 20-30%.

L'impatto sull'esperienza utente

Comportamento degli utenti per tempo di caricamento:

Il mobile è ancora più critico:

Comprendere i Core Web Vitals

I Core Web Vitals di Google misurano l'esperienza utente reale:

1. LCP (Largest Contentful Paint)

Cosa misura: Tempo fino al caricamento del contenuto principale

Obiettivo:

Elementi LCP comuni:

Come migliorare:

2. FID (First Input Delay)

Cosa misura: Tempo fino a quando la pagina diventa interattiva

Obiettivo:

Cause comuni di FID scarso:

Come migliorare:

3. CLS (Cumulative Layout Shift)

Cosa misura: Stabilità visiva (elementi che si spostano durante il caricamento)

Obiettivo:

Cause comuni:

Come migliorare:

Misurare la velocità attuale

Strumenti da utilizzare

1. Google PageSpeed Insights (Gratuito)

URL: https://pagespeed.web.dev/

Pro:

Come usarlo:

  1. Inserisci l'URL del tuo negozio
  2. Attendi l'analisi
  3. Controlla i punteggi (punta a 90+ sia su mobile che desktop)
  4. Esamina opportunità e diagnostica

Punteggi obiettivo:

2. GTmetrix (Gratuito)

URL: https://gtmetrix.com/

Pro:

Metriche chiave:

3. WebPageTest (Gratuito)

URL: https://www.webpagetest.org/

Pro:

Usalo per: Analisi tecnica approfondita

4. Shopify Admin (Integrato)

Vai su: Negozio online > Temi > Azioni > Visualizza rapporto velocità

Mostra:

Cosa misurare

Pagine chiave:

  1. ✅ Homepage (traffico più alto)
  2. ✅ Pagine delle collezioni
  3. ✅ Pagine prodotto (intenzione più alta)
  4. ✅ Pagina carrello

Testa da più posizioni:

Stabilire una baseline

Prima dell'ottimizzazione, documenta:

Esempio di baseline:

Homepage (Prima dell'ottimizzazione)
- Performance mobile: 42
- Performance desktop: 68
- Tempo di caricamento: 6,8s
- Peso pagina: 4,2MB
- Richieste: 127
- LCP: 5,2s
- FID: 280ms
- CLS: 0,18

Ottimizzazione delle immagini

Le immagini rappresentano tipicamente il 50-70% del peso della pagina. Questa è l'opportunità più grande.

1. Scegli il formato giusto

Confronto formati:

| Formato | Caso d'uso | Compressione | |---------|-----------|-------------| | WebP | Migliore per la maggior parte delle immagini | 25-35% più piccolo del JPG | | AVIF | Nuova generazione (non completamente supportato) | 50% più piccolo del JPG | | JPG | Foto, immagini complesse | Buona compressione | | PNG | Loghi, trasparenza necessaria | File più grandi | | SVG | Icone, loghi (vettoriale) | Più piccolo |

Raccomandazione: Usa WebP con fallback JPG.

Shopify serve automaticamente WebP ai browser supportati - basta caricare JPG di alta qualità.

2. Comprimi le immagini

Non caricare mai immagini direttamente dalla fotocamera/designer.

Strumenti di compressione:

Online (Gratuiti):

App Mac:

App Shopify:

Dimensioni obiettivo:

3. Ridimensiona le immagini correttamente

Non caricare immagini 4000x3000px per una visualizzazione a 800px.

Dimensioni immagini Shopify:

| Tipo di immagine | Dimensione consigliata | |------------------|----------------------| | Immagini prodotto | 2048 x 2048px (massimo Shopify) | | Immagini hero | 1920 x 1080px (desktop) | | Immagini collezione | 1200 x 800px | | Miniature | 400 x 400px | | Icone | 100 x 100px o SVG |

Shopify crea automaticamente queste dimensioni:

Usa la dimensione giusta per il contesto:

{% raw %}
<!-- Miniatura prodotto -->
<img src="{{ product.featured_image | img_url: 'medium' }}" loading="lazy">
 
<!-- Pagina dettaglio prodotto -->
<img src="{{ product.featured_image | img_url: '1024x1024' }}">
 
<!-- Hero a larghezza piena -->
<img src="{{ section.settings.image | img_url: '1920x' }}">
{% endraw %}

4. Implementa il lazy loading

Il lazy loading ritarda il caricamento delle immagini finché l'utente non scorre vicino ad esse.

Lazy loading nativo (il più semplice):

<img src="product.jpg" loading="lazy" alt="Nome del prodotto">

I temi Shopify dovrebbero includerlo per impostazione predefinita. Verifica:

{% raw %}
{{ image | image_url: width: 800 | image_tag: loading: 'lazy' }}
{% endraw %}

Caricamento prioritario per le immagini above-the-fold:

<!-- Immagine hero - carica immediatamente -->
<img src="hero.jpg" loading="eager" fetchpriority="high">

5. Usa immagini responsive

Servi dimensioni diverse in base alla dimensione dello schermo:

<img
  srcset="
    product-small.jpg 400w,
    product-medium.jpg 800w,
    product-large.jpg 1200w
  "
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  src="product-medium.jpg"
  alt="Nome del prodotto"
>

Il filtro image_tag di Shopify lo fa automaticamente:

{% raw %}
{{ product.featured_image | image_url: width: 1200 | image_tag:
  widths: '200, 400, 600, 800, 1000, 1200' }}
{% endraw %}

6. Rimuovi le immagini inutilizzate

Fai un audit dei file Shopify:

  1. Vai su Impostazioni > File
  2. Ordina per dimensione
  3. Elimina le immagini non utilizzate

Molti negozi hanno centinaia di MB di immagini caricate ma mai utilizzate.

Ottimizzazione del tema

1. Scegli un tema veloce

Temi Shopify più veloci (2026):

  1. Dawn (Gratuito) - Predefinito di Shopify, prestazioni eccellenti
  2. Sense (Gratuito) - Minimalista, veloce
  3. Impulse (350$) - Premium, ottimizzato
  4. Turbo (350$) - Si chiama "Turbo" per un motivo
  5. Tema personalizzato - Migliori prestazioni se costruito correttamente

Evita:

Migrazione: Se il tuo tema è lento, migrare a Dawn migliora tipicamente i punteggi di 20-30 punti.

2. Rimuovi le sezioni inutilizzate

Molti temi includono sezioni che non usi mai:

  1. Vai su Negozio online > Temi > Personalizza
  2. Esamina ogni pagina
  3. Elimina le sezioni non utilizzate
  4. Ogni sezione aggiunge peso al codice

3. Ottimizza il codice del tema

Problemi comuni del tema:

CSS che blocca il rendering

Problema: Il CSS blocca il rendering della pagina

Soluzione: CSS critico inline, differire il non critico

{% raw %}
<!-- CSS critico inline -->
<style>
  {{ 'critical.css' | asset_url | stylesheet_tag }}
</style>
 
<!-- Differisci il CSS non critico -->
<link rel="preload" href="{{ 'non-critical.css' | asset_url }}" as="style" onload="this.rel='stylesheet'">
{% endraw %}

CSS inutilizzato

Problema: Caricamento di CSS per componenti non presenti nella pagina

Soluzione: Usa strumenti come PurgeCSS o rimuovi manualmente

JavaScript bloccante

Problema: File JS grandi che bloccano il rendering

Soluzione: Differisci o carica in modo asincrono gli script non critici

<!-- Differisci lo script (mantiene l'ordine di esecuzione) -->
<script src="script.js" defer></script>
 
<!-- Script asincrono (si carica appena possibile, non blocca) -->
<script src="analytics.js" async></script>

4. Ottimizzazione dei font

I font personalizzati possono aggiungere 500ms+ al tempo di caricamento.

Best practice:

1. Limita le varianti dei font:

/* Male: Caricamento di 8 file di font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800');
 
/* Bene: Caricamento di 2 file di font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700');

2. Precarica i font:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

3. Usa font-display:

@font-face {
  font-family: 'Inter';
  src: url('inter.woff2') format('woff2');
  font-display: swap; /* Mostra il font di fallback durante il caricamento */
}

4. Font di sistema (più veloci):

/* Zero tempo di caricamento */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

Audit e pulizia delle app

Ogni app Shopify aggiunge:

I negozi con 20+ app spesso ottengono < 30 su PageSpeed.

Processo di audit delle app

1. Elenca tutte le app installate:

Vai su App nell'Amministrazione Shopify

2. Per ogni app, chiediti:

3. Categorizza le app:

Essenziali (Mantieni):

Utili (Valuta):

Non necessarie (Rimuovi):

Impatto sulle prestazioni per tipo di app

App più pesanti (Evita se possibile):

App moderate (Usa selettivamente):

App leggere (OK da usare):

Alternative leggere

Invece di app di recensioni pesanti:

Invece di app popup:

Invece di page builder:

Rimuovere le app correttamente

Non limitarti a disinstallare!

  1. Disinstalla l'app da Shopify
  2. Controlla il codice del tema per snippet residui
  3. Rimuovi gli embed dell'app dalle impostazioni del tema
  4. Elimina i file dell'app dagli asset del tema
  5. Testa il sito per assicurarti che nulla si sia rotto

Controlla il codice residuo:

Vai su Negozio online > Temi > Azioni > Modifica codice

Cerca il nome dell'app in:

Ottimizzazione del codice

1. Minifica CSS/JS

La minificazione rimuove:

Risultato: File più piccoli del 30-50%

Come: La maggior parte dei temi moderni lo fa automaticamente. Controlla il processo di build del tuo tema.

2. Combina i file

Invece di:

<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="product.css">
<link rel="stylesheet" href="footer.css">

Fai:

<link rel="stylesheet" href="combined.css">

Meno richieste = caricamento più veloce.

3. Rimuovi codice Liquid inutilizzato

Codice inutile comune:

{% raw %}
<!-- Non ciclare su tutti i prodotti se ne mostri solo 4 -->
{% for product in collections.all.products limit: 4 %}
  <!-- Usa invece una collezione con 4 prodotti -->
{% endfor %}
 
<!-- Non renderizzare HTML per elementi nascosti -->
{% if section.settings.show_feature %}
  <!-- Renderizza solo se effettivamente mostrato -->
{% endif %}
{% endraw %}

4. Ottimizzazione delle query al database

Limita le collezioni/prodotti recuperati:

{% raw %}
<!-- Male: Carica tutti i prodotti (possono essere migliaia) -->
{% assign products = collections.all.products %}
 
<!-- Bene: Carica solo ciò che serve -->
{% assign products = collections.featured.products | limit: 8 %}
{% endraw %}

5. Cache del contenuto dinamico

Per contenuti che non cambiano spesso:

{% raw %}
{% cache 'homepage_featured', expires_in: '24 hours' %}
  <!-- Operazioni Liquid costose qui -->
{% endcache %}
{% endraw %}

Nota: Il tag Liquid {% cache %} è disponibile solo su Shopify Plus.

Script di terze parti

Gli script di terze parti sono spesso il killer più grande delle prestazioni:

Audit degli script di terze parti

Scopri cosa si sta caricando:

  1. Apri Chrome DevTools (F12)
  2. Vai alla scheda Network
  3. Carica il tuo sito
  4. Ordina per Dimensione (decrescente)
  5. Identifica i domini di terze parti

Colpevoli comuni:

Strategie di ottimizzazione

1. Carica gli script in modo asincrono

<!-- Blocca il rendering -->
<script src="analytics.js"></script>
 
<!-- Non blocca (meglio) -->
<script src="analytics.js" async></script>

2. Ritarda gli script non critici

Carica dopo l'interazione dell'utente:

// Carica il widget di chat solo quando l'utente scorre al 50%
let chatLoaded = false;
window.addEventListener('scroll', () => {
  if (!chatLoaded && window.scrollY > document.body.scrollHeight * 0.5) {
    loadChatWidget();
    chatLoaded = true;
  }
});

3. Usa Google Tag Manager

Invece di:

<script src="analytics.js"></script>
<script src="facebook-pixel.js"></script>
<script src="tiktok-pixel.js"></script>
<script src="pinterest-tag.js"></script>

Fai:

<script src="gtm.js" async></script>
<!-- Gestisci tutti i tag dalla dashboard GTM -->

Vantaggi:

4. Ospita in locale gli script critici

Invece di caricare jQuery dal CDN:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Ospita in locale:

<script src="{{ 'jquery.min.js' | asset_url }}"></script>

Pro:

Contro:

Tecniche avanzate

1. HTTP/2 e HTTP/3

Shopify usa HTTP/2 per impostazione predefinita (nessuna azione necessaria).

Vantaggi:

Verifica: Controlla nella scheda Network di DevTools (la colonna Protocol dovrebbe mostrare "h2")

2. Preconnect ai domini esterni

Velocizza le risorse di terze parti:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="dns-prefetch" href="https://cdn.shopify.com">

Preconnect: Stabilisce una connessione anticipata (usa per risorse critiche) DNS-prefetch: Risolve solo il DNS (usa per risorse meno critiche)

3. Prefetch della pagina successiva

Per le pagine prodotto, precarica la probabile pagina successiva:

<link rel="prefetch" href="/products/next-product">

Quando l'utente passa il mouse su un link:

document.querySelectorAll('a.product-link').forEach(link => {
  link.addEventListener('mouseenter', () => {
    const prefetchLink = document.createElement('link');
    prefetchLink.rel = 'prefetch';
    prefetchLink.href = link.href;
    document.head.appendChild(prefetchLink);
  });
});

4. Service Worker e caching

Per utenti avanzati: Implementa un service worker per un caching aggressivo.

Vantaggi:

Complessità: Alta (richiede sviluppo personalizzato)

5. Ottimizzazione CDN delle immagini

Il CDN di Shopify è buono, ma si può ottimizzare ulteriormente:

{% raw %}
<!-- Aggiungi trasformazioni immagine tramite URL -->
{{ image | image_url: width: 800, crop: 'center', format: 'pjpg' }}
{% endraw %}

Parametri:

6. Riduci i redirect

Ogni redirect aggiunge ~200ms.

Problemi comuni:

Controlla: Usa lo strumento Redirect Mapper

Correggi:

Monitoraggio e manutenzione

Monitoraggio continuo

Settimanale:

Mensile:

Trimestrale:

Budget delle prestazioni

Imposta obiettivi e rispettali:

Budget delle prestazioni
- Peso pagina: < 2MB
- Richieste: < 50
- Tempo di caricamento: < 3s
- Punteggio PageSpeed: > 90
- LCP: < 2,5s
- FID: < 100ms
- CLS: < 0,1

Prima di aggiungere nuove funzionalità/app:

Monitoraggio automatizzato

Strumenti:

Prevenzione delle regressioni

Le regressioni delle prestazioni avvengono quando:

Previeni con:

Workflow di ottimizzazione reale

Esempio: Ottimizzazione di un negozio di moda

Prima:

Passo 1: Ottimizzazione immagini (Settimana 1)

Passo 2: Pulizia delle app (Settimana 2)

Passo 3: Ottimizzazione del tema (Settimana 3)

Passo 4: Ottimizzazione del codice (Settimana 4)

Risultati finali:

Impatto sul business:

Tempo investito: 40 ore in 4 settimane ROI: €18.500/mese × 12 = €222.000/anno per 40 ore di lavoro

Conclusione

L'ottimizzazione della velocità non è opzionale. È essenziale per:

Piano d'azione prioritario:

Settimana 1:

Settimana 2:

Settimana 3:

Settimana 4:

Risultati obiettivo:

Hai bisogno di aiuto esperto? Ho ottimizzato oltre 20 negozi Shopify con un miglioramento medio di PageSpeed di 50+ punti. Contattami per un audit gratuito della velocità.

Domande frequenti

Qual è un buon punteggio PageSpeed per Shopify?

Punta a 90+ su mobile, 95+ su desktop. Qualsiasi punteggio sopra 80 è buono, sotto 50 necessita di intervento.

Quanto tempo richiede l'ottimizzazione?

2-4 settimane per un'ottimizzazione completa. Le vittorie rapide (compressione immagini) possono essere fatte in 1 giorno.

Influirà sulla mia SEO?

Sì - positivamente! I siti più veloci si posizionano meglio e ottengono più traffico organico.

Posso farlo da solo?

Sì, se sei tecnico. L'ottimizzazione delle immagini e la pulizia delle app sono facili. L'ottimizzazione del tema/codice potrebbe richiedere uno sviluppatore.

Quanto costa?

Fai da te: Gratuito (solo il tuo tempo) Assumi uno sviluppatore: €1.500-5.000 Agenzia: €5.000-15.000 Il ROI si raggiunge tipicamente in 1-3 mesi.

Shopify Plus è più veloce?

Non intrinsecamente, ma Plus include funzionalità come Shopify Flow e limiti API migliori. La velocità dipende dal tema, dalle app e dall'ottimizzazione.

Sull'autore: Francis Silva è uno sviluppatore Shopify Plus specializzato nell'ottimizzazione delle prestazioni. Con oltre 20 negozi ottimizzati e punteggi PageSpeed medi di 90+, aiuta le aziende a massimizzare il fatturato attraverso tempi di caricamento più rapidi. Scopri di più su shopifydev.eu.