Core Web Vitals per Shopify: Guida Completa (2026)

Shopify e Core Web Vitals: Non Controlli il Server

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% a fine 2025). Questo perché l'infrastruttura di Shopify è eccellente per impostazione predefinita: server veloci, un CDN globale tramite Cloudflare, conversione automatica del formato immagine e temi di base pre-ottimizzati. La piattaforma gestisce bene il lato server.

I problemi derivano da ciò che i commercianti aggiungono: app, script di terze parti, modifiche personalizzate del tema, immagini sovradimensionate e caricamento eccessivo di font. È lì che i negozi Shopify falliscono i 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 classifica al secondo posto complessivo nel CrUX Technology Report per i tassi di superamento dei Core Web Vitals, dietro solo a Duda (una piattaforma meno diffusa). I numeri da CrUX e dai dati 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 di CrUX.

Il benchmark 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 è inferiore a quanto il CrUX Technology Report mostra per Shopify in generale, il che suggerisce che i negozi che appaiono in CrUX (che richiedono traffico Chrome sufficiente) sono sbilanciati verso negozi più grandi e meglio ottimizzati. Il LCP mobile mediano di 2,26 secondi si trova 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 da superamento a fallimento.

CLS e INP non sono il problema. Il CLS mediano di Shopify di 0,01 è eccellente, e l'INP mediano di 153ms è comodamente nella fascia buona. LCP è dove i negozi Shopify falliscono i Core Web Vitals.

I dati real user di CoreDash dai negozi Shopify confermano questo schema. I negozi che falliscono i CWV quasi sempre falliscono 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 LCP è il predittore più forte del fallimento CWV su Shopify che vediamo 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 gira sulla propria infrastruttura. Non puoi passare a un host più veloce, configurare il caching a livello server o regolare 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 inserisce 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, e rimandarne il caricamento rischia di compromettere il checkout e le funzionalità delle app.
• Controllare il CDN. Shopify usa 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 template Liquid di Shopify gira lato server, ma non puoi ottimizzare le query al database o il rendering lato server oltre a ciò che Liquid fornisce.

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

Il Problema #1 dei CWV su Shopify: l'Eccesso di App

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

Come le App Inseriscono il Codice

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

• App Embed (editor del tema): possono essere disattivati nell'editor del tema sotto "App Embeds." Questo è il metodo più pulito e 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. Devi controllare manualmente snippets/ e sections/ per i file residui.
• ScriptTag API: le app possono inserire script programmaticamente senza toccare i file del tema. Questi si caricano 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 ulteriori ricerche DNS e richieste di rete.

Il Processo di Audit delle App

Ecco come effettuo l'audit delle app Shopify per l'impatto sulle prestazioni:

1. Esegui la homepage, una pagina prodotto, una pagina collezione e la pagina carrello tramite 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 appesantiti, dal 60% all'80% del JavaScript caricato resta inutilizzato in qualsiasi pagina.
3. Controlla la scheda Network filtrata per JavaScript. Ordina per dimensione. Identifica quali script provengono dalle app e quali dal tema. La colonna "Initiator" ti dice cosa ha caricato ogni script.
4. Disattiva le app una alla volta (o disattiva i loro App Embed) e ritesta. Misura l'impatto su INP e LCP di ogni app singolarmente.
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 l'INP mediano di 45ms su un negozio. La rimozione di tre app inutilizzate (uno strumento popup precedentemente disattivato, un programma fedeltà e un widget di chat dismesso) ha ridotto il JavaScript totale della pagina di 380KB e migliorato l'LCP mobile di 1,1 secondi. Ogni app che non utilizzi più attivamente rallenta il tuo negozio per niente. Rimuovila.

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 sulle pagine prodotto o il banner della collezione sulle 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.

Precarica l'Immagine Hero

Il filtro Liquid image_tag di Shopify ha un parametro preload integrato. Quando impostato su true, Shopify invia un header HTTP Link con rel=preload dal server. Il browser lo riceve prima ancora di iniziare ad analizzare l'HTML, rendendolo il segnale di preload più precoce possibile. Include anche automaticamente imagesrcset e imagesizes dal tag, quindi il preload responsivo funziona correttamente senza rischio di mismatch dell'URL.

Combina questo con fetchpriority: 'high' sull'<img> e loading: 'eager' per sovrascrivere il lazy loading predefinito di Shopify per le sezioni sotto la piega. Per l'immagine hero, si presenta così:

{{ section.settings.hero_image | image_url: width: 1200 | image_tag:
    preload: true,
    fetchpriority: 'high',
    loading: 'eager',
    sizes: '100vw'
}}

Quella singola riga ti dà: preload tramite header HTTP (il più precoce possibile), fetchpriority="high" sull'<img>, caricamento eager invece di lazy, attributi automatici width e height (che prevengono CLS), e generazione automatica di srcset. Imposta sempre fetchpriority="high" sull'immagine hero, anche se non usi il preload.

Se il Tuo Tema Usa un'Immagine CSS di Sfondo per l'Hero

Alcuni temi Shopify renderizzano il banner hero come background-image CSS invece di un tag <img>. Questo è un antipattern per LCP. Perdi fetchpriority, perdi il srcset automatico, perdi il preload tramite header HTTP di Shopify, e il browser non può nemmeno iniziare a scaricare l'immagine finché non ha scaricato e analizzato il file CSS.

La soluzione corretta è convertire lo sfondo CSS in un tag <img> così puoi usare image_tag correttamente. Questa è una modifica al codice del tema ma è quella giusta.

Se non puoi assolutamente cambiare il template, puoi aggiungere un suggerimento di preload manuale in theme.liquid:

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

Attenzione: l'URL nel preload deve corrispondere esattamente all'URL nel tuo CSS, incluso il timbro di versione ?v= di Shopify e il parametro &width=. Se differiscono anche di un solo parametro, il browser scarica l'immagine due volte, peggiorando le prestazioni invece di migliorarle.

Per la strategia completa di preload delle immagini LCP, consulta come precaricare l'immagine LCP.

Non Applicare il Lazy Load Sopra la Piega

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

Ottimizza le Dimensioni delle Immagini

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

Risolvere INP su Shopify

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

Ritarda gli Script di Terze Parti Non Critici

Widget di chat (Tidio, Zendesk, Intercom), app di recensioni (Judge.me, Yotpo, Loox), strumenti di personalizzazione (popup Klaviyo, Privy), e analytics (Google Analytics, Facebook Pixel, Hotjar) non dovrebbero caricarsi durante il rendering iniziale della pagina. L'approccio corretto è requestIdleCallback: il browser carica questi script solo quando il thread principale è inattivo, tipicamente pochi secondi dopo che la pagina è stata renderizzata.

Non usare il differimento basato sull'interazione (caricare script al primo scroll, click o tap). Quando un utente tocca un pulsante e il tuo sito risponde caricando 500KB di JavaScript di terze parti sullo stesso evento, il thread principale è bloccato e quell'interazione ottiene un pessimo punteggio INP. Lo scopo del differimento è mantenere il thread principale libero per le interazioni dell'utente, non competere con esse.

Sostituisci l'attributo src con data-src sugli script non critici, poi riportali quando il browser è inattivo:

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

Il fallback setTimeout copre Safari, che non supporta requestIdleCallback. A differenza di requestIdleCallback, non attende una vera finestra di inattività. Ma interrompe comunque il thread principale e gli script iniettati dinamicamente bypassano il preload scanner in ogni caso, rendendolo un fallback sufficientemente buono in pratica.

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

Riduci il JavaScript del Tema

I temi Online Store 2.0 di Shopify (come Dawn) sono costruiti per essere leggeri, ma molti temi di terze parti aggiungono JavaScript pesante per mega menu, slider di prodotti, modali di visualizzazione rapida e animazioni. Analizza 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 disattivare 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 di font e contenuti iniettati dinamicamente dalle app.

Imposta le Dimensioni delle Immagini nei Template Liquid

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

{{ product.featured_image |
   image_tag: widths: '200,400,800', sizes: '(max-width: 768px) 100vw, 50vw' }}

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

Riserva Spazio per i Contenuti Dinamici

Gli app embed che inseriscono 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 così il contenuto circostante non si sposta quando l'elemento appare. Questo è particolarmente importante per gli elementi inseriti sopra il contenuto esistente.

Ottimizza il Caricamento dei Font

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

Selezione del Tema Shopify e Prestazioni

La scelta del tema definisce la baseline delle prestazioni del tuo negozio. Il progetto ThemeVitals traccia 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 prodotto, carrello laterale 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 e il caricamento delle risorse di Shopify.

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

Cosa Shopify Fa Bene per Impostazione Predefinita

Shopify fa molte cose giuste fin da subito:

• Infrastruttura veloce: i server di Shopify e il CDN Cloudflare forniscono 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 immagini con ridimensionamento al volo: puoi richiedere qualsiasi immagine a qualsiasi larghezza tramite parametri URL.
• Suggerimenti preconnect: Shopify aggiunge automaticamente suggerimenti preconnect per i propri domini 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 amministrativa di Shopify include un "Speed Score" ma si tratta di un numero semplificato basato su Lighthouse che non rappresenta i tuoi reali Core Web Vitals. Per un monitoraggio effettivo delle prestazioni:

• Google Search Console: controlla il report Core Web Vitals per i dati di 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 prodotto, collezione 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 CoreDash mostrano che la causa più comune di regressione dei CWV su Shopify è una nuova installazione di app che inserisce 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 si trova proprio sulla 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 di campagne Black Friday, popup natalizi e timer promozionali per il conto alla rovescia che vengono aggiunti per un evento di vendita e poi dimenticati.