Ottimizzazione CSS di Shopify: CSS critici, minimizzazione e Stili non utilizzati (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 <link rel="stylesheet"> 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:

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

1. Estratto: Identificare le regole CSS utilizzate dagli elementi sopra la piega (navigazione, eroe, immagine del prodotto, ecc.)
2. In linea: Inserisci queste regole in a <style> nel file <head>
3. Differimento: Carica l'intero foglio di stile in modo asincrono utilizzando media="print" con un onload
4. Risultato: La pagina viene renderizzata immediatamente da stili in linea mentre il CSS completo si carica in parallelo

Implementazione manuale CSS critica

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

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



{% comment %} Step 1: Inline critical CSS {% endcomment %}

<style>

  /* Critical CSS — only above-the-fold styles */

  header, .header-wrapper { /* your header styles */ }

  .announcement-bar { /* announcement bar styles */ }

  nav, .nav-links { /* navigation styles */ }

  .hero-section { /* hero/banner styles */ }

  /* Add product image, title, price styles for product pages */

  /* Keep this under 15KB for best results */

</style>



{% comment %} Step 2: Load full CSS asynchronously {% endcomment %}

<link

  rel="stylesheet"

  href="{{ 'base.css' | asset_url }}"

  media="print"

  onload="this.media='all'"

/>

<noscript>

  <link rel="stylesheet" href="{{ 'base.css' | asset_url }}" />

</noscript>

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).

Rimozione del CSS inutilizzato dai temi Shopify

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

1. Apri il tuo negozio in Chrome → DevTools (F12)
2. Premere Ctrl+Maiusc+P (Mac: Comando+Maiusc+P) → digita "Copertura" → seleziona "Mostra copertura"
3. Fai clic sul pulsante Ricarica nel pannello Copertura
4. Guarda i file CSS: le barre rosse mostrano i byte non utilizzati, il verde mostra i byte utilizzati
5. 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 da app disinstallate che hanno lasciato stili
• 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

La minificazione rimuove spazi bianchi, commenti e caratteri non necessari dal CSS senza alterare la funzionalità. Tipicamente, riduce la dimensione del file CSS del 15-30%. Anche se Shopify applica una minificazione di base al CSS del tema, non è esaustiva.

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 (margin-top: 10px; margin-right: 10px; → margin: 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

Aprite Chrome DevTools → Network → filtrate per "CSS". Vedrete fogli di stile dal vostro tema e da ogni app installata. Ordinate per dimensione e notate:

• 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 <link> tags referencing app domains: {% endcomment %}

{% comment %}

  <link href="https://cdn.judge.me/..." rel="stylesheet" />

  <link href="https://cdn.loox.io/..." rel="stylesheet" />

  <link href="https://assets.pagefly.io/..." rel="stylesheet" />

{% 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:

1. Il browser rileva un Google Fonts Etichetta <link> → Richiesta CSS di blocco del rendering
2. Il file CSS di Google risponde con @font-face regole che puntano ai file di caratteri
3. Il browser scarica i file dei caratteri effettivi (formato WOFF2, 20-50 KB ciascuno)
4. 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 />

Elenco di controllo per l'ottimizzazione CSS di Shopify

Ordinato per impatto — iniziate dall'alto:

Domande frequenti sull'ottimizzazione CSS di Shopify

Impedite al CSS di rallentare il vostro negozio Shopify

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>, stili inutilizzati da app e funzionalità del tema, e dipendenze da font esterni — sono tutti risolvibili.

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.