Ottimizzazione CSS di Shopify: riduzione del CSS con blocco del rendering del 60% (2026)

Correggi le prestazioni CSS di Shopify in 60 secondi

Esegui uno speed test sul tuo negozio : se vedi "Elimina risorse che bloccano la visualizzazione" o "Riduci CSS inutilizzati" nella diagnostica, l'ottimizzazione CSS migliorerà i tuoi punteggi. Thunder Page Speed Optimizer indirizza entrambi automaticamente:

Estrae e incorpora CSS critici per il rendering sopra la piega
Rimanda i CSS non critici in modo che venga caricato dopo il rendering della pagina
Ottimizza il caricamento dei CSS dell'app insieme a JavaScript
Funziona con tutti i temi Shopify 2.0: nessuna modifica al codice del tema

Per gli sviluppatori che desiderano comprendere a fondo l'ottimizzazione CSS e applicare correzioni manuali, continua a leggere.

In che modo i CSS bloccano il rendering del tuo negozio Shopify

CSS è un risorsa di blocco del rendering per impostazione predefinita. Quando un browser incontra a nel file <head>, interrompe il rendering della pagina finché il file CSS non viene completamente scaricato e analizzato. Questo è previsto dalla progettazione: il browser necessita di informazioni sullo stile per sapere come visualizzare il contenuto.

Il problema sui negozi Shopify è quantità. Un tipico negozio carica:

Sorgente CSS	Dimensioni tipiche	Blocco del rendering?
Foglio di stile del tema (base.css / componente.css)	40-200KB	Sì — in <head>
Sezione tematica CSS (specifica della sezione)	20-80KB	Sì — in <head>
File CSS dell'app (per app installata)	10-100KB ciascuno	Sì: iniettato in <head>
CSS di Google Fonts	5-15KB	Sì, oltre al download di file di font
Stili in linea (editor CSS personalizzato)	1-20KB	Sì, ma già in linea

Totale: 150-500KB+ di CSS che bloccano il rendering che deve terminare il caricamento prima che il browser dipinga un singolo pixel. Su una connessione 3G (ancora comune sui dispositivi mobili), il download di 300 KB di CSS richiede 1-2 secondi, durante i quali il visitatore vede uno schermo bianco vuoto.

Ciò ha un impatto diretto sul tuo Punteggio LCP perché l'elemento di contenuto più grande non può essere visualizzato finché non vengono elaborati tutti i CSS di blocco. È anche il motivo per cui "Elimina le risorse che bloccano la visualizzazione" appare praticamente in ogni Shopify Rapporto PageSpeed Insights. Per uno sguardo più ampio su come gli script contribuiscono a rallentare il caricamento, consulta il nostro Guida all'ottimizzazione JavaScript.

CSS critico: l'ottimizzazione di maggior impatto

Critical CSS è la tecnica che consente di estrarre solo le regole CSS necessarie per visualizzare i contenuti Above The Fold e di incorporarle direttamente nell'HTML <head>. Il restante CSS viene caricato in modo asincrono: il browser esegue immediatamente il rendering della pagina visibile mentre gli stili non critici vengono scaricati in background.

Come funziona il CSS critico

Estratto: Identificare le regole CSS utilizzate dagli elementi sopra la piega (navigazione, eroe, immagine del prodotto, ecc.)
In linea: Inserisci queste regole in a <style> nel file <head>
Differimento: Carica l'intero foglio di stile in modo asincrono utilizzando media="stampa" con un in carico Gestore
Risultato: The page renders immediately from inlined styles while full CSS loads in parallel

Implementazione manuale CSS critica

Ecco come implementare manualmente i CSS critici su Shopify. Ciò richiede la modifica del tema File tema.liquid :

{% comment %} In theme.liquid <head> — Replace standard CSS link {% endcomment %}

{'
'}
{'{% comment %} Step 1: Inline critical CSS {% endcomment %}'}{'
'}
{''}{'
'}
{'
'}
{'{% comment %} Step 2: Load full CSS asynchronously {% endcomment %}'}{'
'}
{''}{'
'}
{''}}

La sfida: Estrarre manualmente il CSS critico corretto è complesso. È necessario identificare esattamente quali regole si applicano agli elementi Above The Fold nei diversi tipi di pagina (home page, pagina del prodotto, pagina della collezione). Se non si rispetta una regola, i visitatori visualizzeranno il contenuto senza stile flash (FOUC). Includi troppe regole e perderai il vantaggio in termini di prestazioni.

Strumenti come criticalCSS e Strumento critico di Google può aiutare a estrarre automaticamente i CSS critici, ma devono essere eseguiti separatamente per ciascun modello di pagina (home, prodotto, collezione, carrello).

Removing Unused CSS from Shopify Themes

La maggior parte dei temi Shopify fornisce un unico grande foglio di stile che contiene stili per ogni tipo di pagina, sezione e componente. Su ogni pagina, il 60-80% di questi stili rimane inutilizzato. Ecco come trovare e ridurre i CSS inutilizzati:

Passaggio 1: misura i CSS non utilizzati

Apri il tuo negozio in Chrome → DevTools (F12)
Premere Ctrl+Maiusc+P (Mac: Comando+Maiusc+P) → digita "Copertura" → seleziona "Mostra copertura"
Fai clic sul pulsante Ricarica nel pannello Copertura
Guarda i file CSS: le barre rosse mostrano i byte non utilizzati, il verde mostra i byte utilizzati
Controlla più tipi di pagina (home, prodotto, collezione) per vedere quali stili vengono utilizzati e dove

Passaggio 2: identificare cosa può essere rimosso

Sicuro da rimuovere:

CSS from uninstalled apps that left styles behind
Stili per le sezioni che non usi (CSS slideshow quando usi solo banner immagine)
CSS per le funzionalità che hai disabilitato (ricerca predittiva, modalità di visualizzazione rapida)
Prefissi del fornitore per browser molto vecchi (-ms-, -o- prefissi)

NON rimuovere senza controllare tutti i tipi di pagina:

Stili dei cassetti del carrello (non utilizzati nella pagina del prodotto ma fondamentali nel carrello)
Stili solo per dispositivi mobili (inutilizzati sulla visualizzazione desktop ma essenziali su dispositivi mobili)
Stati al passaggio del mouse/messa a fuoco/attivi (inutilizzato fino all'interazione)
Stili di stampa (non utilizzati nella navigazione normale)

Passaggio 3: dividere i CSS per tipo di pagina

L'approccio più efficace per Shopify è dividere il tuo CSS in file specifici della pagina. Invece di caricare ovunque un foglio di stile da 200 KB, carichi:

{% comment %} In theme.liquid {% endcomment %}

{'{{ 'base.css' | asset_url | stylesheet_tag }}'}{'
'}
{'
'}
{'{% if template == "index" %}'}{'
'}
{'  {{ 'home.css' | asset_url | stylesheet_tag }}'}{'
'}
{'{% elsif template contains "product" %}'}{'
'}
{'  {{ 'product.css' | asset_url | stylesheet_tag }}'}{'
'}
{'{% elsif template contains "collection" %}'}{'
'}
{'  {{ 'collection.css' | asset_url | stylesheet_tag }}'}{'
'}
{'{% endif %}'}}

Ciò richiede il refactoring del CSS del tema: uno sforzo significativo, ma può ridurre i CSS che bloccano la visualizzazione del 40-60% su ogni pagina. Per la maggior parte dei commercianti, utilizzando Ottimizzazione CSS automatica di Thunder è più pratico.

Minificazione CSS di Shopify: come ridurre le dimensioni del file

Minification removes whitespace, comments, and unnecessary characters from CSS without changing functionality. It typically reduces CSS file size by 15-30%. While Shopify applies basic minification to theme CSS, it's not exhaustive.

Cosa fa la minimizzazione

Rimuove tutti i commenti (/* ... */)
Elimina gli spazi bianchi e le interruzioni di riga non necessari
Riduce i valori del colore (#ffffff → #fff)
Unisce i selettori duplicati
Converte la scrittura lunga in abbreviata (margine superiore: 10px; margine destro: 10px; → margine: 10px;)

Come minimizzare i CSS di Shopify

Prima di caricare su Shopify: Usa strumenti come cssnano o CSSO per minimizzare i tuoi file CSS prima di caricarli come risorse del tema. Questo ti dà il massimo controllo e la migliore compressione.

Per CSS basati su liquidi: Shopify genera alcuni CSS in modo dinamico utilizzando le variabili del modello Liquid (ad es. {{ settings.color_primary }}). Questo CSS non può essere preminificato poiché Shopify lo elabora al momento dell'elaborazione. Mantieni i blocchi Liquid CSS il più snelli possibile: definisci solo le proprietà personalizzate CSS (variabili) necessarie, quindi fai riferimento ad esse nel tuo CSS statico pre-minificato.

Sebbene la minimizzazione aiuti, è una vittoria minore rispetto alla rimozione di CSS critici e CSS inutilizzati. Un foglio di stile da 200 KB ridotto a 160 KB blocca comunque il rendering per la stessa durata su connessioni lente. Concentrati prima sui CSS critici, poi sulla minimizzazione. Il nostro Guida alle risorse per il blocco del rendering copre il quadro completo.

Gestione dei CSS dell'app Shopify per prestazioni migliori

Ogni app Shopify può inserire il proprio foglio di stile CSS — e la maggior parte lo fa. Questi fogli di stile bloccano il rendering e aumentano il peso CSS totale che il browser deve elaborare prima del rendering. Ecco come gestire i CSS dell'app:

App di controllo CSS

Open Chrome DevTools → Network → filter by "CSS". You'll see stylesheets from your theme and from each installed app. Sort by size and note:

Quali app caricano i file CSS più grandi
Se il CSS dell'app viene caricato su ogni pagina o solo dove necessario
Se le app disinstallate hanno lasciato riferimenti CSS

App comune CSS Bloat

App per la creazione di pagine (PageFly, GemPages, Shogun): 50-200KB di CSS caricati su ogni pagina, anche le pagine non create con il page builder. Consulta la nostra guida su Impatto sulla velocità del page builder.
App di revisione: 20-80KB di widget per lo styling CSS su ogni pagina
App della barra degli annunci: Carica spesso 20-50KB di CSS per un semplice banner che potrebbe essere creato con 500 byte di CSS personalizzato
App per badge di fiducia: CSS per layout badge che potrebbe essere sostituito con HTML statico

Pulisci i CSS rimanenti dell'app

Quando disinstalli un'app Shopify, i suoi riferimenti CSS a volte rimangono nel tema. Cerca i file del tema per:

{% comment %} Search theme.liquid and layout files for orphaned CSS {% endcomment %}

{'{% comment %} Look for  tags referencing app domains: {% endcomment %}'}{'
'}
{'{% comment %}'}{'
'}
{'  '}{'
'}
{'  '}{'
'}
{'  '}{'
'}
{'{% endcomment %}'}{'
'}
{'
'}
{'{% comment %} Also check snippets/ folder for app-specific .liquid files {% endcomment %}'}{'
'}
{'{% comment %} that might include CSS. Delete those from uninstalled apps. {% endcomment %}'}}

La rimozione dei CSS delle app orfane è a basso rischio e ad alto impatto. È puro peso morto: CSS per funzionalità che non esiste più. Controlla il nostro Guida agli script di terze parti per un processo di pulizia sistematico.

Shopify Font CSS: il blocco rendering nascosto

Se il tuo tema Shopify utilizza Google Fonts (molti lo fanno), esiste una catena di prestazioni relativa ai CSS che la maggior parte dei commercianti trascura:

Il browser rileva un Google Fonts Etichetta Tag → Richiesta CSS di blocco del rendering
Il file CSS di Google risponde con @font-face regole che puntano ai file di caratteri
Il browser scarica i file dei caratteri effettivi (formato WOFF2, 20-50 KB ciascuno)
Totale: 2-3 viaggi di andata e ritorno prima che il testo venga visualizzato nel carattere corretto

La soluzione: Ospita autonomamente i tuoi caratteri. Scarica i file WOFF2 e includili nella cartella delle risorse del tuo tema. Ciò elimina la richiesta CSS esterna e il sovraccarico della connessione di terze parti. Il nostro guida all'ottimizzazione dei caratteri illustra il processo completo.

Se devi utilizzare Google Fonts, aggiungi a suggerimento di preconnessione per ridurre il tempo di configurazione della connessione: <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Ottimizzazione CSS: Manuale vs Thunder

Ottimizzazione	Avvicinamento manuale	Con tuoni
Estrazione CSS critica	Esegui lo strumento CSS critico per modello, in linea manualmente	Estrazione e inlineamento automatico
Rinvio CSS con blocco del rendering	Converti in modello di stampa/caricamento	Rinvio automatico di CSS non critici
Gestione CSS dell'app	Modifica il codice del tema per il CSS di ciascuna app	Tutti i CSS delle app sono ottimizzati automaticamente
Manutenzione continua	Riestrai i CSS critici quando il tema/le app cambiano	Si adatta automaticamente ai cambiamenti del tema
Rischio di problemi visivi	Alto: la mancanza di CSS critici causa FOUC	Basso: testato con tutti i temi principali

Per ottenere risultati ottimali, combina la pulizia manuale (rimozione dei CSS delle app orfane, dei caratteri self-hosting) con Ottimizzazione CSS automatica di Thunder. Vedi piani attuali.

Elenco di controllo per l'ottimizzazione CSS di Shopify

Ordered by impact — start from the top:

Installa Thunder Page Speed Optimizer : gestisce automaticamente i CSS critici, il differimento del blocco del rendering e l'ottimizzazione dei CSS delle app. Installa ora
Rimuovi il CSS dell'app orfana — Search theme files for CSS links from uninstalled apps. Delete them.
Caratteri self-host : sostituisci i CSS di Google Fonts con file WOFF2 self-hosted e in linea @font-face regole.
Misura CSS non utilizzato : esegui lo strumento Copertura Chrome sui tipi di pagina principali. Annotare la percentuale inutilizzata.
Rimuovi i CSS delle sezioni tematiche inutilizzate — Se non utilizzi presentazioni o sezioni video, rimuovi i relativi CSS.
Minimizza CSS personalizzato : esegui qualsiasi CSS personalizzato tramite cssnano prima di aggiungerlo al tuo tema.
Considera CSS specifici della pagina — Per utenti esperti: dividere i CSS per tipo di modello.
Test dopo le modifiche — Corri il nostro test di velocità e controlla le regressioni visive su tutti i tipi di pagina.

Domande frequenti sull'ottimizzazione CSS di Shopify

Shopify minimizza automaticamente i CSS?

Shopify applica una minimizzazione di base ai file CSS dei temi serviti tramite la sua CDN, ma non è completa. Shopify rimuove alcuni spazi bianchi ma non rimuove le regole CSS inutilizzate, non unisce selettori duplicati né ottimizza le proprietà abbreviate. I file CSS delle app di terze parti vengono pubblicati così come sono, senza alcuna minimizzazione da parte di Shopify. Per l'ottimizzazione CSS completa, devi minimizzare manualmente prima del caricamento o utilizzare uno strumento di ottimizzazione come Thunder.

Cos'è il CSS fondamentale e perché è importante per Shopify?

Critical CSS è l'insieme minimo di stili CSS necessari per il rendering del contenuto Above The Fold, ovvero la parte della pagina che i visitatori vedono prima di scorrere. Integrando i CSS critici direttamente nell'HTML <head>, il browser può eseguire immediatamente il rendering della pagina visibile senza attendere il download dell'intero foglio di stile. Per i negozi Shopify, questo può migliorare l'LCP di 500 ms-1,5 s perché l'immagine del prodotto, il titolo e la navigazione vengono visualizzati più velocemente mentre il resto del CSS viene caricato in modo asincrono.

Quanti CSS carica un tipico tema Shopify?

Un tema Shopify 2.0 di serie come Dawn carica 40-80 KB di CSS. Dopo le personalizzazioni e le installazioni delle app, tale cifra aumenta in genere fino a 150-400 KB. I temi premium iniziano con un peso iniziale di 80-200 KB e possono raggiungere 300-600 KB con le app. Ogni app può aggiungere 10-100 KB del proprio CSS. Gran parte di questo CSS non viene utilizzato su una determinata pagina: una home page potrebbe utilizzare solo il 30% degli stili caricati, mentre il resto sono regole per le pagine dei prodotti, il carrello e il checkout.

Come trovo i CSS non utilizzati nel mio negozio Shopify?

Apri Chrome DevTools, premi Ctrl+Maiusc+P (Cmd+Maiusc+P su Mac), digita "Copertura" e fai clic su "Mostra copertura". Fare clic sul pulsante Ricarica nel pannello Copertura. Vedrai un elenco di file CSS con barre rosse/verdi che mostrano i byte utilizzati e non utilizzati. I tipici negozi Shopify mostrano il 60-80% di CSS inutilizzati su ogni singola pagina. Nota: i CSS che appaiono "non utilizzati" su una pagina potrebbero essere necessari su altre pagine (carrello, prodotto, collezione), quindi non puoi semplicemente eliminare tutte le regole inutilizzate senza un'attenta analisi.

Dovrei utilizzare un'app di ottimizzazione CSS per Shopify?

Per la maggior parte dei commercianti, un'app di ottimizzazione della velocità come Thunder che gestisce l'ottimizzazione CSS come parte di una strategia di performance più ampia è più efficace di uno strumento basato solo su CSS. Thunder rinvia i CSS che bloccano il rendering insieme a JavaScript, ottimizza l'ordine di caricamento delle risorse e gestisce automaticamente l'estrazione CSS critica. L'ottimizzazione manuale dei CSS (rimozione di regole inutilizzate, incorporamento di CSS critici) ti offre un controllo granulare ma richiede competenze da sviluppatore e manutenzione continua quando aggiungi o rimuovi app.

Le app Shopify aggiungono CSS che bloccano la visualizzazione?

Yes — most Shopify apps inject their own CSS stylesheets into your theme's <head> tag, and these are render-blocking by default. A store with 10 apps might have 10 additional CSS files (100-500KB total) that the browser must download and parse before rendering the page. This is separate from the apps' JavaScript impact. Thunder helps by deferring non-critical app CSS alongside JavaScript, so only the styles needed for above-the-fold content block rendering.

Stop CSS from Slowing Down Your Shopify Store

L'ottimizzazione CSS è uno degli aspetti più trascurati della velocità di Shopify. Mentre la maggior parte dei commercianti si concentra su JavaScript e immagini, i CSS che bloccano la visualizzazione aggiungono silenziosamente 500 ms-2 a ogni caricamento di pagina. I problemi principali: troppi CSS nel file <head>, unused styles from apps and theme features, and external font dependencies — are all fixable.

La strategia di ottimizzazione CSS di Shopify più efficace combina: pulizia dei CSS delle app orfane (gratuito, impatto immediato), caratteri self-hosting per eliminare le dipendenze CSS esterne e utilizzo Thunder Page Speed Optimizer per l'estrazione automatica dei CSS critici e il differimento del blocco del rendering.

Metti alla prova il tuo negozio adesso e controlla se nella diagnostica viene visualizzato "Elimina risorse che bloccano la visualizzazione". In tal caso, l’ottimizzazione CSS dovrebbe essere la tua prossima mossa. Per un quadro più ampio della velocità, vedere il nostro guida completa all'ottimizzazione della velocità di Shopify.

⚡

Expert Speed Optimization for Your Store

Our team handles everything — theme optimization, app cleanup, Core Web Vitals guarantee. Most stores optimized in 2 weeks.

Get Your Free Speed Audit →

✅ Core Web Vitals Guarantee · ⚡ 2-Week Delivery · 🎁 6 Months Free Thunder

Starting from €1,500 · Learn more

Ottimizzazione CSS di Shopify: CSS critici, minimizzazione e Stili non utilizzati (2026)