Ottimizzazione JavaScript Shopify: come ridurre il tempo di esecuzione JS (2026)

Risolvete le prestazioni JS di Shopify in 60 secondi

Eseguite un test di velocità sul vostro negozio — se vedete "Riduci il tempo di esecuzione JavaScript" o "Riduci al minimo il lavoro sul thread principale" nella diagnostica, l'ottimizzazione JavaScript farà la differenza maggiore. Thunder Page Speed Optimizer risolve entrambi automaticamente:

• Rinvia il JavaScript non critico fino a dopo il rendering della pagina
• Riduce il Total Blocking Time (TBT) e migliora l'Interaction to Next Paint (INP)
• Gestisce l'ordine di caricamento degli script delle app per prestazioni ottimali
• Funziona con tutti i temi Shopify 2.0 — zero modifiche al codice del tema

Per gli sviluppatori che vogliono comprendere a fondo l'ottimizzazione JavaScript e applicare correzioni manuali, continuate a leggere.

Come il JavaScript compromette le prestazioni di un negozio Shopify

Il JavaScript influisce sulla velocità in modo diverso rispetto a CSS o immagini. Mentre il CSS blocca il rendering e le immagini influenzano il tempo di caricamento visivo, il JS blocca il thread principale — l'unico thread responsabile del layout, del paint e della risposta alle interazioni dell'utente. Quando il JavaScript è in esecuzione, non può succedere nient'altro. Toccare un pulsante, scorrere, digitare — tutto è bloccato finché l'esecuzione del JS non termina.

Tre metriche dei Core Web Vitals misurano direttamente l'impatto del JavaScript:

Su un dispositivo mobile di fascia media (quello che usa la maggior parte degli acquirenti), analizzare ed eseguire 500KB di JavaScript richiede 2-4 secondi. Durante quel tempo, il negozio sembra caricato ma non risponde alle interazioni — la peggior esperienza utente possibile. Per questo l'ottimizzazione JS ha spesso un impatto maggiore sulle conversioni rispetto all'ottimizzazione delle immagini. Scoprite di più nella nostra guida ai Core Web Vitals.

Da dove viene tutto questo JavaScript?

Capire da dove ha origine il JavaScript del vostro negozio è il primo passo per ridurlo. Ecco una ripartizione tipica:

Notate lo schema: le app e gli script di terze parti rappresentano il 50-70% del JavaScript totale nella maggior parte dei negozi Shopify. Un negozio con 12 app può avere da solo oltre 400KB di JavaScript delle app — caricato su ogni pagina, anche su quelle dove quelle app non servono.

La nostra guida agli script di terze parti analizza l'impatto completo degli script esterni e come gestirli.

Come fare l'audit del JavaScript sul vostro negozio Shopify

Prima di ottimizzare, dovete sapere esattamente quali script si caricano e quanto tempo del thread principale consumano.

Metodo 1: Coverage di Chrome DevTools

1. Aprite il vostro negozio in Chrome → DevTools (F12)
2. Premete Ctrl+Shift+P (Mac: Cmd+Shift+P) → digitate "Coverage" → selezionate "Show Coverage"
3. Fate clic sul pulsante di ricarica nel pannello Coverage
4. Filtrate per "JS" — ordinate per byte totali e byte inutilizzati
5. Risultato tipico: il 60-80% del JavaScript caricato risulta inutilizzato su una singola pagina

Metodo 2: Flame chart della scheda Performance

1. DevTools → scheda Performance → selezionate "Screenshots" e "Web Vitals"
2. Fate clic su registra → ricaricate la pagina → interrompete la registrazione
3. Guardate la sezione Main — i blocchi gialli sono esecuzione JavaScript
4. I blocchi gialli lunghi (>50ms) sono "long task" che bloccano il thread principale
5. Fate clic su un blocco qualsiasi per vedere quale script e funzione ne sono responsabili

Metodo 3: scheda Network

1. DevTools → scheda Network → filtrate per "JS"
2. Ricaricate la pagina e ordinate per dimensione (dal più grande)
3. Annotate il JS totale trasferito e il numero di richieste
4. Controllate la colonna "Initiator" per vedere quali script ne hanno caricati altri

Per un quadro più ampio delle prestazioni, fate passare il vostro negozio dal nostro test di velocità — evidenzia i problemi specifici del JavaScript insieme ad altri colli di bottiglia delle prestazioni.

Rinvio degli script: async, defer e caricamento dinamico

Per impostazione predefinita, i tag <script> bloccano l'analisi dell'HTML. Il browser interrompe la costruzione della pagina, scarica lo script, lo esegue e poi continua. Gli attributi di rinvio degli script cambiano questo comportamento:

<!-- Render-blocking (default) — worst for performance -->

<script src="app.js"></script>



<!-- defer — downloads in parallel, executes after HTML parsing, maintains order -->

<script src="app.js" defer></script>



<!-- async — downloads in parallel, executes immediately when ready, no order guarantee -->

<script src="analytics.js" async></script>



<!-- Dynamic loading — loads on demand, best for non-essential scripts -->

<script>

  // Load chat widget only when user scrolls past fold

  const observer = new IntersectionObserver((entries) => {

    if (entries[0].isIntersecting) {

      const script = document.createElement("script");

      script.src = "https://chat-widget.example.com/widget.js";

      document.body.appendChild(script);

      observer.disconnect();

    }

  });

  observer.observe(document.querySelector("#footer"));

</script>

Quando usare ciascuno:

• defer: JavaScript del tema, script delle app che dipendono dalla disponibilità del DOM
• async: script di analytics (GA4, Meta Pixel) — indipendenti, nessuna dipendenza dal DOM
• Caricamento dinamico: widget di chat, widget di recensioni, tutto ciò che è sotto la piega

Su Shopify, la sfida è che non controllate come le app iniettano i loro script. La maggior parte delle app aggiunge tag <script> senza async né defer. Questo è esattamente ciò che Thunder gestisce automaticamente — rinvia gli script non essenziali indipendentemente da come le app li hanno originariamente caricati.

Rimuovere il JavaScript inutilizzato da Shopify

Il JavaScript più veloce è quello che non caricate affatto. Ecco come ridurre il payload JS totale:

1. Fate l'audit e rimuovete le app non necessarie

Ogni app installata aggiunge JavaScript. Analizzate ogni app e chiedetevi: l'impatto di questa app sul fatturato giustifica il suo costo in termini di prestazioni? Candidate comuni alla rimozione:

• App di badge di fiducia (sostituitele con HTML/CSS statico — risparmiate 30-80KB)
• App per la barra degli annunci (usate quella integrata nel tema)
• App SEO che aggiungono solo meta tag (fatelo manualmente nel codice del tema)
• App installate per test e poi dimenticate

2. Ripulite il codice residuo delle app

Dopo aver disinstallato un'app, controllate i file del tema alla ricerca di riferimenti a script orfani:

• Cercate nei file theme.liquid e layout/ i domini di script esterni
• Controllate la cartella snippets/ per file .liquid specifici delle app
• Cercate in assets/ i file JS appartenenti ad app rimosse

3. Sostituite le librerie pesanti

Alcuni temi e app caricano ancora jQuery (90KB) o altre librerie pesanti. Alternative moderne:

• jQuery → document.querySelector e fetch nativi (0KB — integrati nei browser)
• Slick slider (43KB) → CSS scroll-snap nativo o Swiper leggero (build minimale)
• Moment.js (70KB) → Intl.DateTimeFormat nativo o day.js (2KB)

Il tema Dawn di Shopify è stato costruito appositamente per evitare dipendenze pesanti — usa JavaScript vanilla senza jQuery. Se il vostro tema dipende ancora da jQuery, è un forte segnale per considerare un aggiornamento del tema. Consultate anche la nostra guida sulle risorse che bloccano il rendering.

Caricamento basato sull'interazione: caricate il JS solo quando serve

Molti script Shopify non devono essere eseguiti al caricamento della pagina. Widget di chat, caroselli di recensioni e raccomandazioni di prodotto contano solo quando l'utente ci scorre sopra o interagisce con la pagina. Caricarli in anticipo spreca banda e blocca il thread principale senza motivo.

IntersectionObserver per il caricamento basato sullo scroll

Caricate gli script quando il loro elemento target entra nel viewport:

// Load review widget JS only when reviews section is visible

const reviewSection = document.querySelector("#product-reviews");

if (reviewSection) {

  const observer = new IntersectionObserver((entries) => {

    if (entries[0].isIntersecting) {

      // Load the review app script

      const script = document.createElement("script");

      script.src = "https://reviews-app.example.com/widget.js";

      document.body.appendChild(script);

      observer.disconnect();

    }

  }, { rootMargin: "200px" }); // Start loading 200px before visible

  observer.observe(reviewSection);

}

Trigger di interazione dell'utente

Alcuni script dovrebbero caricarsi solo quando l'utente interagisce attivamente:

// Load chat widget only on first user interaction

let chatLoaded = false;

function loadChat() {

  if (chatLoaded) return;

  chatLoaded = true;

  const script = document.createElement("script");

  script.src = "https://chat.example.com/widget.js";

  document.body.appendChild(script);

}



// Trigger on any user interaction

["mouseover", "touchstart", "scroll", "keydown"].forEach(event => {

  document.addEventListener(event, loadChat, { once: true });

});

Questo schema funziona bene per widget di chat, script di pop-up e widget di programmi fedeltà. L'utente ottiene un caricamento iniziale rapido e il widget appare entro 100-200ms dalla prima interazione — un ritardo impercettibile. Per il quadro completo sull'ottimizzazione dell'interattività, consultate la nostra guida all'ottimizzazione INP.

Code splitting e tree shaking per Shopify

Se state creando JavaScript personalizzato per il vostro tema Shopify (o lavorate con uno sviluppatore), le moderne tecniche di bundling possono ridurre significativamente ciò che viene inviato al browser:

Code splitting

Invece di raggruppare tutto il JavaScript in un unico file grande, suddividetelo in chunk più piccoli che si caricano su richiesta:

• Suddivisione per route: il JS della pagina prodotto si carica solo sulle pagine prodotto, quello delle collezioni solo sulle pagine collezione
• Suddivisione per componente: il JS della modale di anteprima rapida si carica solo quando l'utente clicca su "Quick View"
• Suddivisione dei vendor: separate le librerie di terze parti in un proprio bundle memorizzabile nella cache

Tree shaking

Il tree shaking rimuove gli export inutilizzati dai moduli JavaScript. Se il vostro tema importa una libreria di utility ma usa solo 3 delle 50 funzioni, il tree shaking elimina le altre 47. Questo richiede la sintassi dei moduli ES (import/export) e un bundler come Vite, Webpack o esbuild.

Esempio di impatto: importare tutto lodash aggiunge 72KB. Importare solo lodash/debounce aggiunge 1KB. Si tratta di una riduzione del 98.6% da un singolo cambio di import.

La maggior parte dei merchant non implementerà direttamente code splitting o tree shaking — sono ottimizzazioni di livello sviluppatore. Ma se lavorate con uno sviluppatore su un tema personalizzato, insistete su queste pratiche. Possono ridurre il JavaScript del tema del 40-60%. Per un approfondimento su come il tema Dawn gestisce questo aspetto, consultate la nostra guida sulla velocità dei temi.

Web Worker: delegare i calcoli JavaScript pesanti

I Web Worker eseguono JavaScript in un thread separato in background, lasciando libero il thread principale per le interazioni dell'utente. Sono utili quando il vostro negozio esegue calcoli pesanti che altrimenti causerebbero scatti (jank):

• Filtraggio complesso dei prodotti con centinaia di varianti
• Calcoli dei prezzi su più valute o sconti per quantità
• Elaborazione di grandi set di dati di prodotto per la funzionalità di ricerca
• Elaborazione delle immagini per strumenti di personalizzazione (anteprime di incisione, ecc.)

Limite: i Web Worker non possono accedere al DOM. Possono solo inviare dati al thread principale tramite postMessage. Per la maggior parte dei negozi Shopify, i vantaggi maggiori derivano dal ridurre e rinviare il JavaScript piuttosto che spostarlo nei Worker. I Worker sono uno strumento di precisione per colli di bottiglia computazionali specifici.

Checklist di ottimizzazione JavaScript per Shopify

Ordinata per impatto — partite dall'alto:

Domande frequenti sull'ottimizzazione JavaScript di Shopify

Fate lavorare meglio il JavaScript del vostro negozio Shopify

Il JavaScript è il singolo maggiore collo di bottiglia delle prestazioni nella maggior parte dei negozi Shopify. Blocca l'interattività, gonfia i punteggi dei Core Web Vitals e influisce direttamente sul posizionamento SEO e sui tassi di conversione. La buona notizia: non serve riscrivere il codice del vostro negozio.

Iniziate con Thunder Page Speed Optimizer per il rinvio automatico degli script e la gestione del JS delle app. Poi fate manualmente l'audit delle app installate — rimuovere 3-4 app non necessarie può eliminare oltre 200KB di JavaScript da un giorno all'altro. Per il quadro completo dell'ottimizzazione, combinate l'ottimizzazione JS con l'ottimizzazione CSS, i miglioramenti TTFB e l'ottimizzazione dei template Liquid.

Testate ora il vostro negozio per vedere quanto il JavaScript sta influenzando le vostre prestazioni. Per una roadmap di ottimizzazione completa, consultate la nostra guida completa all'ottimizzazione della velocità di Shopify.