Shopify Minify CSS: correggi l'avviso PageSpeed

Cosa significa l'avviso Shopify Minify CSS

Lighthouse e PageSpeed Insights segnalano CSS non minificato quando un foglio di stile contiene byte non necessari come commenti, interruzioni di riga, rientri o formattazione di cui il browser non ha bisogno. Il rapporto elenca il file e stima il potenziale risparmio in KiB. Su un negozio Shopify, il file può provenire dal vostro tema, da una risorsa legacy, da una sezione di un page-builder, da una landing page personalizzata o da un'app.

Questo avviso è diverso dall’ottimizzazione CSS di Shopify nel suo insieme. La minificazione dei CSS riduce le dimensioni di un file. La rimozione dei CSS inutilizzati riduce la quantità di CSS distribuita. Il CSS critico migliora ciò che blocca il First Paint. Le ottimizzazioni delle risorse che bloccano il rendering controllano quando viene caricato il CSS. Un negozio può superare la minificazione ed essere comunque lento se distribuisce un foglio di stile enorme, carica il CSS dell’app su ogni modello o consente al CSS di bloccare l’immagine principale.

La buona notizia: la minimizzazione è una delle soluzioni più sicure quando la limiti ai file locali che controlli. La parte rischiosa è applicare modifiche automatizzate a ogni risorsa del tema senza capire quali file includono variabili Liquid, commenti sulla fonte, avvisi dei fornitori o codice generato dall'app.

Da dove provengono i CSS non minimizzati su Shopify

Risorse tematiche

Controlla base.css, theme.css, component-*.css e i vecchi file .scss.liquid. I temi moderni spesso dividono il CSS per componente, ma le personalizzazioni possono aggiungere file di grandi dimensioni mai elaborati da un processo di build.

Sezioni personalizzate e pagine di destinazione

Molti negozi incollano stili specifici della sezione direttamente nei file Liquid. Ciò può andare bene per i blocchi di piccole dimensioni, ma i blocchi di stile in linea ripetuti creano lavoro di analisi aggiuntivo e rendono più difficile riutilizzare i CSS ottimizzati.

CSS dell'app

Widget di recensioni, popup, abbonamenti, ricerca, strumenti di fidelizzazione e page builder spesso iniettano il proprio CSS. Di solito non è possibile minificare questi file dall'amministrazione di Shopify. Se PageSpeed identifica un URL di terze parti, chiedete al fornitore un file minificato o rimuovete l'app se la funzionalità non vale il costo. Utilizzate la Guida all'ottimizzazione della velocità dell'app Shopify per quella decisione.

Manuale passo dopo passo: minimizza i CSS su Shopify in modo sicuro

1. Duplica prima il tema

Nel pannello di controllo Shopify, duplica il tema live prima di modificare le risorse. La minimizzazione dei CSS dovrebbe preservare il comportamento, ma un backup non è ancora negoziabile perché gli store spesso contengono snippet di app, regole generate da Liquid e vecchio codice del tema.

2. Confermare che il file contrassegnato è locale

Aprite PageSpeed Insights ed espandete la diagnostica di minificazione CSS. Se l'URL proviene dalla vostra CDN di Shopify e si mappa a una risorsa del tema, di solito potete risolverlo. Se proviene da un dominio di un'app, non copiate il file nel vostro tema. Ciò crea codice obsoleto e può compromettere gli aggiornamenti.

3. Minimizza una risorsa CSS del tema

Se utilizzi un flusso di lavoro locale, esegui un vero e proprio minificatore su un file copiato e carica il risultato come nuova risorsa. Per semplici CSS personalizzati, questo tipo di trasformazione è sicuro:

/* Before */
.product-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.product-card__title {
  font-size: 16px;
  line-height: 1.3;
}

/* After */
.product-card{display:grid;gap:12px;padding:16px}.product-card__title{font-size:16px;line-height:1.3}

4. Fai riferimento al file minimizzato in Liquid

Mantieni il file leggibile originale nel tuo repository se lavori localmente, ma offri il file minimizzato in Shopify. In un layout di tema, ciò di solito significa cambiare il riferimento al foglio di stile:

<!-- theme.liquid -->
{{ 'theme.min.css' | asset_url | stylesheet_tag }}

Negli esempi di codice Astro, i tag Liquid devono essere sottoposti a escape, ma nel tuo tema Shopify questa è la sintassi normale. Testa il tema duplicato prima di pubblicarlo.

5. Non minimizzare ciecamente i CSS generati da Liquid

Alcuni temi meno recenti usano file .css.liquid o .scss.liquid in cui le impostazioni generano CSS. Fai attenzione con questo tipo di file:

.announcement-bar {
  background: {{ settings.announcement_background }};
  color: {{ settings.announcement_text }};
}

Se il tuo minificatore non comprende Liquid, potrebbe trattare le parentesi graffe come CSS non validi. Per questi file, minimizza manualmente solo le parti statiche o sposta i valori generati nelle proprietà personalizzate CSS in Liquid.

6. Testare nuovamente lo stesso URL

Esegui la stessa pagina in PageSpeed e confronta la diagnostica. Controlla anche visivamente la vetrina su dispositivi mobili e desktop. La minimizzazione dovrebbe ridurre i byte, ma se il vero problema è il blocco del rendering, continua con le correzioni dei CSS che bloccano il rendering, la pulizia dei CSS inutilizzati e la guida completa all’ottimizzazione della velocità per Shopify.

Correzione manuale vs. Correzione Thunder

Cosa risolvere dopo la minimizzazione dei CSS

La minimizzazione raramente è l'intera storia. Se PageSpeed sembra ancora debole, prova la pagina con il file Test di velocità Shopify gratuito e osserva LCP, INP, CLS, Tempo di blocco totale e carico utile della rete. Un salvataggio CSS di 20 KiB non compenserà un'immagine hero da 900 KiB, un widget di revisione che blocca o uno spostamento del layout causato dalla mancanza di dimensioni dell'immagine.

Per la maggior parte dei negozi Shopify, l’ordine pratico è: ottimizzare le immagini, controllare gli script delle app, pulire i CSS inutilizzati, ridurre i file che bloccano la visualizzazione e infine minimizzare ciò che rimane. Se vuoi provare prima il percorso automatizzato, consulta i prezzi di Thunder e confrontali con una revisione manuale del tema da parte di uno sviluppatore.

FAQ