Core Web Vitals per Shopify: Guida Completa (2026)

Shopify e Core Web Vitals: una sfida di tipo diverso

Shopify è fondamentalmente diverso da WordPress o dai siti personalizzati quando si tratta di ottimizzazione dei Core Web Vitals. Su WordPress controlli tutto: il server, il database, il livello di caching, ogni riga di codice. Su Shopify lavori all'interno di una piattaforma gestita dove alcune cose sono completamente fuori dal tuo controllo.

Secondo il Core Web Vitals Technology Report, Shopify supera WordPress nei tassi di superamento dei CWV su mobile (circa il 65% contro il 44% alla fine del 2025). Questo perché l'infrastruttura di Shopify è eccellente per impostazione predefinita: server veloci, un CDN globale tramite Cloudflare, conversione automatica del formato delle immagini e temi base pre-ottimizzati. La piattaforma gestisce bene il lato server.

I problemi derivano da ciò che i merchant aggiungono in più: app, script di terze parti, modifiche personalizzate ai temi, immagini sovradimensionate e caricamento eccessivo di font. È qui che i negozi Shopify falliscono nei Core Web Vitals. E poiché hai un accesso limitato al server e al codice di base, la tua strategia di ottimizzazione deve essere diversa.

Core Web Vitals di Shopify in numeri

Shopify si posiziona al 2° posto complessivo nel CrUX Technology Report per i tassi di superamento dei Core Web Vitals, dietro solo a Duda (una piattaforma meno diffusa). Ecco il quadro completo dai dati CrUX e dai benchmark indipendenti:

Fonti: CrUX Technology Report (giugno 2025), analisi CMS di SearchEngineJournal, benchmark Shero Commerce su 1.000 negozi (novembre 2025). *Valori mediani dal benchmark Shero, non p75 CrUX.

Il benchmark di Shero Commerce su 1.000 negozi Shopify reali ha rilevato che solo il 48% supera tutti e tre i Core Web Vitals su mobile. Questo valore è inferiore a quello che il CrUX Technology Report mostra per Shopify nel complesso, il che suggerisce che i negozi presenti in CrUX (che richiedono un traffico Chrome sufficiente) sono sbilanciati verso negozi più grandi e meglio ottimizzati. Il LCP mobile mediano di 2,26 secondi si aggira pericolosamente vicino alla soglia "buono" di 2,5 secondi, il che significa che anche piccole aggiunte (un'app in più, un'immagine hero non ottimizzata) possono far passare un negozio dal superamento al fallimento.

Il punto positivo: il CLS mediano di Shopify di 0,01 è eccellente, e il INP mediano di 153ms è comodamente all'interno dell'intervallo buono. LCP è la metrica su cui i negozi Shopify si giocano il superamento dei Core Web Vitals.

I dati real user di CoreDash dai negozi Shopify confermano questo schema. I negozi che falliscono i CWV falliscono quasi sempre su LCP. I negozi che caricano più di 8 script di app di terze parti mostrano un LCP mobile mediano superiore a 3,0 secondi. I negozi con 3 o meno script di app mantengono un LCP mediano inferiore a 2,0 secondi. La correlazione tra il numero di app installate e il LCP è il predittore più forte del fallimento dei CWV su Shopify che osserviamo nei dati.

Cosa non puoi controllare su Shopify

Prima di ottimizzare, comprendi i vincoli. Su Shopify non puoi:

• Cambiare il server o l'hosting. Shopify funziona sulla propria infrastruttura. Non puoi passare a un host più veloce, configurare il caching a livello server o modificare le impostazioni PHP. La buona notizia: il TTFB di Shopify è generalmente eccellente (sotto i 300ms per la maggior parte delle regioni).
• Rimuovere content_for_header. Shopify inietta JavaScript obbligatorio in ogni pagina attraverso questo tag Liquid. Include le analytics di Shopify, gli script del checkout e l'infrastruttura di caricamento delle app. Non puoi rimuoverlo o differirlo.
• Controllare il CDN. Shopify utilizza Cloudflare come CDN. Non puoi configurare le regole di caching, gli edge worker o gli header personalizzati come faresti con la tua configurazione Cloudflare.
• Accedere al database o al codice backend. Il linguaggio di templating Liquid di Shopify viene eseguito lato server, ma non puoi ottimizzare le query al database o il rendering lato server oltre a quanto Liquid consente.

Questo significa che la tua intera strategia di ottimizzazione si concentra su ciò che puoi controllare: il codice del tuo tema, le app installate, le immagini, i font e gli script di terze parti.

Il problema n. 1 dei CWV su Shopify: il sovraccarico di app

Le app Shopify installate sono la singola causa principale di fallimento dei Core Web Vitals nei negozi Shopify. Ogni app può iniettare JavaScript e CSS su ogni pagina del tuo negozio, anche su pagine dove quell'app non viene utilizzata. Un'app di recensioni che si carica sulla tua homepage. Un widget di raccomandazione prodotti che si carica sulla pagina dei contatti. Un timer per il conto alla rovescia che si carica su ogni pagina prodotto anche quando nessuna promozione è attiva.

Come le app iniettano il codice

Le app Shopify iniettano il codice in diversi modi, e questo è importante per la pulizia:

• App Embed (editor del tema): possono essere attivate o disattivate nell'editor del tema sotto "App Embed". Questo è il metodo più pulito e più facile da gestire.
• Snippet del tema: alcune app aggiungono codice direttamente ai file del tema durante l'installazione. La disinstallazione dell'app potrebbe non rimuovere questo codice. È necessario controllare manualmente snippets/ e sections/ per i file residui.
• ScriptTag API: le app possono iniettare script programmaticamente senza toccare i file del tema. Questi vengono caricati tramite il content_for_header di Shopify. La disinstallazione dell'app li rimuove, ma lo script potrebbe essere nella cache.
• Loader di terze parti: alcune app caricano JavaScript esterno dal proprio CDN, creando ricerche DNS e richieste di rete aggiuntive.

Il processo di audit delle app

Ecco come verifico le app Shopify per l'impatto sulle prestazioni:

1. Esegui la tua homepage, una pagina prodotto, una pagina collezione e la pagina carrello su PageSpeed Insights. Registra i punteggi LCP, INP e CLS.
2. Apri Chrome DevTools e vai alla scheda Coverage. Ricarica la pagina e osserva la percentuale di JavaScript inutilizzato. Nei negozi Shopify sovraccarichi, dal 60% all'80% del JavaScript caricato non viene utilizzato su una data pagina.
3. Controlla la scheda Network filtrata per JavaScript. Ordina per dimensione. Identifica quali script provengono dalle app e quali dal tuo tema. La colonna "Initiator" ti dice cosa ha caricato ciascuno script.
4. Disabilita le app una alla volta (o disattiva i loro App Embed) e ritesta. Misura l'impatto su INP e LCP di ogni singola app.
5. Per ogni app, decidi: il valore commerciale giustifica il costo in termini di prestazioni? Può essere sostituita con un'alternativa più leggera? Può essere caricata solo su specifici tipi di pagina?

I dati CoreDash dai progetti di ottimizzazione Shopify mostrano l'impatto tipico della pulizia delle app: la rimozione di un singolo script di un widget di recensioni non necessario ha migliorato il INP mediano di 45ms su un negozio. La rimozione di tre app inutilizzate (un tool di popup precedentemente disabilitato, un programma fedeltà e un widget di chat dismesso) ha ridotto il JavaScript totale della pagina di 380KB e migliorato il LCP mobile di 1,1 secondi. La lezione: effettua audit senza pietà. Ogni app che non utilizzi più attivamente è prestazione gratuita in attesa di essere recuperata.

Risolvere LCP su Shopify

Nei negozi Shopify, l'elemento LCP è quasi sempre l'immagine del banner hero sulla homepage, l'immagine del prodotto in evidenza nelle pagine prodotto o il banner della collezione nelle pagine collezione. Il CDN di Shopify serve automaticamente le immagini in formato WebP, il che aiuta. Ma ci sono diverse ottimizzazioni che devi gestire tu stesso.

Precaricare l'immagine hero

I temi Shopify spesso caricano le immagini hero tramite background CSS o le caricano con lazy loading, il che ritarda significativamente LCP. La soluzione: aggiungi un hint di preload nel file theme.liquid del tuo tema e imposta fetchpriority="high" sul tag <img> dell'hero.

In Liquid, puoi precaricare condizionalmente l'hero per la homepage:

{%- if template == 'index' -%}
  <link rel="preload" as="image" href="{{ section.settings.hero_image | image_url: width: 1200 }}" fetchpriority="high">
{%- endif -%}

Per la strategia completa di preloading dell'immagine LCP, consulta come precaricare l'immagine LCP.

Non usare il lazy loading above the fold

Molti temi Shopify applicano loading="lazy" a tutte le immagini, inclusa l'hero. Questo dice al browser di deprioritizzare l'immagine più importante della pagina. Assicurati che il tuo tema escluda le immagini above the fold dal lazy loading. Per i temi moderni che utilizzano il filtro image_tag di Shopify, usa loading: 'eager' per le immagini hero.

Ottimizzare le dimensioni delle immagini

Il CDN di Shopify può ridimensionare le immagini al volo utilizzando i parametri URL, ma i tuoi template Liquid devono richiedere la dimensione corretta. Non caricare un'immagine larga 2000px quando viene visualizzata a 800px. Utilizza il markup responsive di Shopify con gli attributi srcset e sizes appropriati. Consulta la nostra guida sull'ottimizzazione delle immagini.

Risolvere INP su Shopify

I fallimenti di INP su Shopify sono causati quasi interamente dal JavaScript che blocca il thread principale. L'iniezione di content_for_header di Shopify aggiunge già JavaScript di base che non puoi rimuovere. Tutto ciò che aggiungi in più aggrava il problema.

Ritardare gli script di terze parti non critici

I widget di chat (Tidio, Zendesk, Intercom), le app di recensioni (Judge.me, Yotpo, Loox), gli strumenti di personalizzazione (popup di Klaviyo, Privy) e le analytics (Google Analytics, Facebook Pixel, Hotjar) dovrebbero tutti essere ritardati fino alla prima interazione dell'utente. Questo significa che vengono caricati dopo che l'utente scorre, clicca o tocca per la prima volta.

Puoi implementare questo sostituendo l'attributo src con data-src e poi ripristinandolo al primo evento di interazione:

<script>
(window.requestIdleCallback || function(cb) { setTimeout(cb, 1); })(function() {
  document.querySelectorAll('script[data-src]').forEach(function(s) {
    s.src = s.dataset.src;
  });
});
</script>

Questo carica gli script differiti solo quando il thread principale del browser è inattivo, così non competono mai con il rendering o le interazioni dell'utente. Il fallback con setTimeout copre Safari, che non supporta requestIdleCallback. Non servono listener di interazione.

Per ulteriori strategie di differimento JavaScript, consulta 14 metodi per differire JavaScript.

Ridurre il JavaScript del tema

I temi Online Store 2.0 di Shopify (come Dawn) sono progettati per essere leggeri, ma molti temi di terze parti aggiungono JavaScript pesante per mega menu, slider di prodotti, modali di visualizzazione rapida e animazioni. Verifica il JavaScript del tuo tema usando la scheda Coverage di Chrome DevTools. Se il tuo tema carica più di 200KB di JavaScript, cerca funzionalità che puoi disabilitare o sostituire con alternative CSS.

Risolvere CLS su Shopify

Il Cumulative Layout Shift nei negozi Shopify è tipicamente causato da tre cose: immagini senza dimensioni, scambio dei font e contenuto iniettato dinamicamente dalle app.

Impostare le dimensioni delle immagini nei template Liquid

Controlla i tuoi template Liquid per i tag <img> che mancano degli attributi width e height. Il filtro image_tag di Shopify può generarli automaticamente:

Questo genera immagini responsive con dimensioni appropriate, prevenendo lo spostamento del layout durante il caricamento delle immagini.

Riservare spazio per il contenuto dinamico

Gli App Embed che iniettano stelle di recensione, badge di fiducia, timer per il conto alla rovescia o barre di annuncio dopo il caricamento della pagina causano CLS. Per ogni elemento dinamico, riserva spazio con min-height CSS in modo che il contenuto circostante non si sposti quando l'elemento appare. Questo è particolarmente importante per gli elementi iniettati sopra il contenuto esistente.

Ottimizzare il caricamento dei font

Se il tuo tema Shopify carica font web personalizzati, assicurati che utilizzino font-display: swap con un font fallback ben abbinato. Precarica i file del tuo font principale per ridurre il tempo prima che il testo venga renderizzato con il font corretto. Carica solo i pesi e gli stili dei font che utilizzi effettivamente. Consulta la nostra guida sull'ottimizzazione dei font.

Scelta del tema Shopify e prestazioni

La scelta del tema imposta la baseline delle prestazioni per il tuo negozio. Il progetto ThemeVitals monitora i dati CrUX reali per i temi Shopify. Risultati chiave:

• Dawn (il tema gratuito predefinito di Shopify) ottiene costantemente buoni risultati sui Core Web Vitals perché è stato costruito con le prestazioni come priorità.
• I temi con molte sezioni, animazioni e funzionalità integrate (mega menu, visualizzazione rapida dei prodotti, cassetti carrello AJAX) tendono ad avere più JavaScript e un INP peggiore.
• I temi Online Store 2.0 sono generalmente più veloci dei temi legacy perché utilizzano l'architettura moderna delle sezioni di Shopify e il caricamento ottimizzato degli asset.

Se stai scegliendo un nuovo tema, controlla i suoi dati CrUX su ThemeVitals prima dell'acquisto. L'ottimizzazione delle prestazioni più economica è iniziare con un tema veloce.

Cosa Shopify fa bene per impostazione predefinita

Vale la pena riconoscere ciò che Shopify gestisce automaticamente per te:

• Infrastruttura veloce: i server di Shopify e il CDN Cloudflare offrono un TTFB costantemente basso a livello globale.
• WebP automatico: il CDN di Shopify converte automaticamente le immagini in formato WebP quando il browser lo supporta.
• HTTP/2 e Brotli: abilitati per impostazione predefinita su tutti i negozi Shopify.
• CDN per immagini con ridimensionamento al volo: puoi richiedere qualsiasi immagine a qualsiasi larghezza tramite parametri URL.
• Hint di preconnect: Shopify aggiunge automaticamente hint di preconnect per i domini del proprio CDN.

Queste impostazioni predefinite sono il motivo per cui le prestazioni di base di Shopify sono buone. Il tuo compito è non vanificare questi vantaggi con app e script eccessivi.

Monitorare il tuo negozio Shopify

La dashboard di amministrazione di Shopify include uno "Speed Score" ma si tratta di un numero semplificato basato su Lighthouse che non rappresenta i tuoi Core Web Vitals reali. Per un monitoraggio effettivo delle prestazioni:

• Google Search Console: controlla il report Core Web Vitals per i dati sul campo dell'intero negozio
• CoreDash: installa lo snippet RUM leggero (una riga di codice in theme.liquid) per ottenere dati Core Web Vitals in tempo reale suddivisi per tipo di pagina, dispositivo e paese
• PageSpeed Insights: testa singoli URL di prodotti, collezioni e homepage per dati diagnostici

Monitora dopo ogni installazione di app, aggiornamento del tema e lancio di campagne stagionali. Le regressioni delle prestazioni su Shopify sono quasi sempre causate da qualcosa che è stato aggiunto di recente.

I dati di monitoraggio di CoreDash mostrano che la causa più comune di regressione dei CWV su Shopify è l'installazione di una nuova app che inietta JavaScript a livello globale. In media, una nuova app Shopify aggiunge da 50KB a 150KB di JavaScript a ogni caricamento di pagina. Per un negozio che è proprio alla soglia LCP (da 2,3 a 2,5 secondi), una singola installazione di app può farlo superare il limite. La seconda causa più comune sono i cambiamenti stagionali: banner per il Black Friday, popup natalizi e timer per il conto alla rovescia promozionali che vengono aggiunti per un evento di vendita e poi dimenticati.