Come rimuovere CSS e JavaScript inutilizzati su Shopify (2026)

Risolvete gli avvisi su CSS e JS inutilizzati in 60 secondi

Eseguite un test di velocità gratuito sul vostro negozio — cercate "Riduci il CSS inutilizzato" e "Riduci il JavaScript inutilizzato" nella sezione Opportunità. Questi avvisi mostrano esattamente quanti kilobyte di codice morto bloccano il rendering della pagina. Thunder Page Speed Optimizer li affronta entrambi automaticamente:

• Rinvia il CSS non critico così che si carichi dopo il rendering della pagina
• Rinvia il JavaScript non critico (app, analytics, widget)
• Incorpora il CSS critico per i contenuti above the fold
• Ottimizza l'ordine di esecuzione degli script per ridurre il blocco del thread principale

Installazione con un clic. Gli avvisi potrebbero non sparire del tutto (gli script core di Shopify non possono essere rinviati), ma Thunder riduce l'impatto del 60-80% per la maggior parte dei negozi.

Perché i negozi Shopify hanno così tanto codice inutilizzato

Ogni negozio Shopify carica CSS e JavaScript inutilizzati. Non è un bug — è il modo in cui funziona l'architettura di Shopify. Capire il perché aiuta a distinguere cosa potete sistemare e cosa no.

1. CSS globale del tema

I temi Shopify compilano tutto il CSS in uno o due file (come base.css o theme.css) che si caricano su ogni pagina. Questo file contiene gli stili di homepage, pagine prodotto, pagine collezione, carrello, blog, pagine account — tutto. Quando qualcuno visita la pagina prodotto, scarica gli stili del cart drawer, della griglia collezioni, dei post del blog e delle pagine account che su quella pagina non userà mai.

Un tema Dawn di serie carica ~60KB di CSS. Dopo le personalizzazioni e il CSS aggiuntivo, si arriva a 100-200KB. I temi premium possono toccare 200-400KB. Su una singola pagina, in genere solo il 30-50% di questo CSS viene davvero usato.

2. Codice iniettato dalle app

Ogni app Shopify installata può iniettare JavaScript e CSS nel tema. La maggior parte delle app inietta il proprio codice globalmente — su ogni pagina — anche se l'app fa qualcosa solo sulle pagine prodotto o sul carrello. Un'app di recensioni carica il suo CSS sulla pagina Chi siamo. Un'app di upsell del carrello carica il suo JS sui post del blog. Ogni app aggiunge in genere 50-300KB di CSS/JS.

Con 10 app installate, potreste caricare 500KB-3MB di codice delle app su ogni pagina, con ogni pagina che ne usa solo una frazione. Consultate la nostra analisi delle app che rallentano il negozio per esempi concreti.

3. Codice orfano delle app disinstallate

Quando disinstallate un'app Shopify, viene rimossa la funzionalità backend ma spesso resta del codice nel tema. Tag script in theme.liquid, snippet Liquid nella cartella snippets/ e CSS inline persistono dopo la rimozione dell'app. È codice morto che si carica su ogni pagina senza alcun beneficio.

4. Gli script di Shopify stesso

Shopify inietta il proprio JavaScript su ogni pagina dello storefront — per analytics, funzionalità del carrello, account cliente e checkout. Questi script totalizzano 100-200KB e non possono essere rimossi o rinviati senza rompere funzionalità fondamentali.

Come trovare CSS e JavaScript inutilizzati sul vostro negozio Shopify

Prima di rimuovere qualsiasi cosa, dovete identificare cosa è inutilizzato e da dove proviene. Lo strumento Coverage di Chrome è la migliore opzione gratuita.

Passaggio 1: aprite Coverage in Chrome DevTools

1. Aprite il vostro negozio in Chrome
2. Premete F12 (o Cmd+Option+I su Mac) per aprire DevTools
3. Premete Ctrl+Shift+P (Cmd+Shift+P su Mac) per aprire la palette dei comandi
4. Digitate "Coverage" e selezionate "Show Coverage"
5. Cliccate il pulsante di ricaricamento (⟳) nel pannello Coverage
6. Attendete il caricamento completo della pagina

Passaggio 2: leggete i risultati

Il pannello Coverage mostra ogni file CSS e JS con una barra rossa/verde:

• Verde = codice eseguito/applicato su questa pagina
• Rosso = codice caricato ma mai usato su questa pagina
• Total Bytes = dimensione completa del file
• Unused Bytes = banda sprecata che blocca il rendering

Cliccate su un file per vedere l'utilizzo riga per riga. Le righe rosse sono regole CSS o funzioni JavaScript inutilizzate. Per un negozio Shopify tipico vedrete:

• base.css o theme.css — 50-70% inutilizzato (stili globali del tema)
• vendor.js o theme.js — 40-60% inutilizzato (JavaScript del tema)
• File specifici delle app — 70-90% inutilizzato per pagina (la maggior parte del codice delle app non serve)
• Script di Shopify stesso — 30-50% inutilizzato (codice core della piattaforma)

Passaggio 3: identificate i colpevoli maggiori

Ordinate per "Unused Bytes" (cliccate sull'intestazione della colonna). I file con più byte inutilizzati sono i vostri bersagli a maggiore impatto. Tipicamente: il CSS del tema, 1-2 grossi bundle di app e gli script di analytics di Shopify. Per la parte JavaScript nello specifico, la nostra guida all'ottimizzazione JavaScript copre analisi più approfondite.

Quale codice inutilizzato potete davvero rimuovere su Shopify

Siamo realisti: non potete eliminare tutto il CSS/JS inutilizzato su Shopify. Ma potete ottenere riduzioni significative. Ecco cosa è fattibile:

{% comment %} Only load review CSS on product pages {% endcomment %}
{% if template contains 'product' %}
  {{ 'review-styles.css' | asset_url | stylesheet_tag }}
{% endif %}

{% comment %} Only load collection JS on collection pages {% endcomment %}
{% if template contains 'collection' %}
  <script src="{{ 'collection-filters.js' | asset_url }}" defer></script>
{% endif %}

Perché per il codice inutilizzato su Shopify rinviare batte rimuovere

Su un sito statico, rimuovere il CSS inutilizzato è semplice — ogni pagina ha contenuti noti e fissi. Su Shopify è pericoloso perché:

• Contenuti dinamici — i template Liquid aggiungono classi CSS in modo condizionale. Un prodotto con 5 varianti carica CSS diverso da uno con 2. PurgeCSS non può rilevare le classi generate da Liquid.
• Elementi aggiunti da JavaScript — cart drawer, modali quick view e add-to-cart AJAX creano elementi DOM dinamicamente. Il loro CSS sembra "inutilizzato" finché un'interazione dell'utente non li attiva.
• Dipendenze tra pagine — il CSS inutilizzato sulla homepage è critico sulla pagina prodotto. Rimuoverlo dal foglio di stile globale rompe le altre pagine.
• Aggiornamenti delle app — le app possono cambiare i nomi delle loro classi CSS negli aggiornamenti. Se avete fatto il purge del loro CSS "inutilizzato", l'aggiornamento rompe lo stile.

Rinviare è l'alternativa sicura. Il CSS/JS rinviato si carica e funziona comunque — solo che si carica dopo il rendering della pagina invece di bloccarlo. Il visitatore vede la pagina prima, tutte le funzionalità continuano a funzionare e nulla si rompe con gli aggiornamenti.

È esattamente ciò che fa Thunder con le risorse che bloccano il rendering. Identifica quali CSS e JavaScript non servono per il paint iniziale e li rinvia, incorporando al contempo il CSS critico necessario per i contenuti above the fold.

Passo passo: ripulire il codice orfano delle app

Questa è l'unica pulizia da fare manualmente — è gratuita, sicura e dà risultati immediati. Ecco come trovare e rimuovere il codice delle app che avete disinstallato:

1. Fate un backup del tema — Andate su Negozio online → Temi → Azioni → Duplica. Abbiate sempre una via di ritorno.
2. Elencate le app attuali — Andate su Impostazioni → App e canali di vendita. Annotate ogni app installata.
3. Aprite l'editor del tema — Andate su Negozio online → Temi → Modifica codice.
4. Controllate theme.liquid — Aprite layout/theme.liquid e cercate tag <script> e tag <link> che fanno riferimento a domini esterni. Se vedete un dominio che non corrisponde a nessuna app installata, è probabilmente codice orfano.
5. Controllate snippets/ — Sfogliate la cartella snippets. I file con nomi di app (ad es. bold-options.liquid, loox-reviews.liquid) che non corrispondono ad app installate sono orfani. Eliminateli e rimuovete le chiamate {% render %} o {% include %} corrispondenti.
6. Cercate pattern noti — Usate la ricerca dell'editor di codice (Ctrl+F) su tutti i file per:
   • Nomi di app che avete usato in passato
   • Riferimenti a ScriptTag
   • Domini esterni negli attributi src degli script
7. Testate a fondo — Visualizzate l'anteprima del tema, testate l'aggiunta al carrello, il flusso di checkout e tutti i tipi di pagina prima di pubblicare.

Vittorie di pulizia comuni: snippet di app di recensioni rimossi (50-100KB), vecchi script di analytics (20-50KB) e codice abbandonato di popup/banner (30-80KB). Non enormi singolarmente, ma significativi nel complesso. Per un audit completo del tema, consultate la nostra guida allo speed audit di Shopify.

Aspettative realistiche: quanto potete ridurre?

L'avviso "Riduci CSS/JS inutilizzati" in PageSpeed Insights non sparirà mai del tutto su un negozio Shopify. Ecco cosa è realistico:

La mossa a maggiore impatto è quasi sempre rimuovere le app di cui non avete davvero bisogno. Ogni rimozione elimina sia il codice dell'app sia le sue richieste HTTP. Per un approfondimento sull'ottimizzazione del JavaScript rimanente, consultate la nostra guida all'ottimizzazione JavaScript. Per il CSS nello specifico, la nostra guida all'ottimizzazione CSS copre CSS critico, minificazione e tecniche avanzate.

Domande frequenti

Impedite al codice inutilizzato di rallentare il vostro negozio Shopify

Non potete eliminare del tutto CSS e JavaScript inutilizzati su Shopify — l'architettura della piattaforma carica stili e script globali per design. Ma potete fare una differenza concreta con tre passi: ripulire il codice orfano delle app (gratuito, immediato), ridurre le app installate al minimo indispensabile (gratuito, alto impatto) e rinviare tutto il resto con Thunder Page Speed Optimizer (60 secondi, impatto massimo).

Gli avvisi "Riduci CSS/JS inutilizzati" in PageSpeed Insights potrebbero non sparire mai del tutto. È normale per Shopify. Concentratevi sulle metriche reali: LCP sotto i 2.5 secondi, CLS sotto 0.1 e una velocità percepita elevata.

Testate ora il vostro negozio e verificate quanto codice inutilizzato sta bloccando il rendering. Per la strategia completa di ottimizzazione della velocità, consultate la nostra guida completa all'ottimizzazione della velocità di Shopify.