Shopify Minify CSS: correggi l'avviso PageSpeed

Cosa significa l'avviso Shopify Minify CSS

Lighthouse and PageSpeed Insights flag unminified CSS when a stylesheet contains unnecessary bytes such as comments, line breaks, indentation, or formatting that the browser does not need. The report lists the file and estimates the potential KiB savings. On a Shopify store, the file can come from your theme, a legacy asset, a page-builder section, a custom landing page, or an app.

Questo avviso è diverso da Ottimizzazione CSS di Shopify nel suo insieme. La minimizzazione dei CSS rende un file più piccolo. La rimozione dei CSS inutilizzati riduce la quantità di CSS spediti. I CSS critici migliorano ciò che blocca la prima verniciatura. Controlli di lavoro che bloccano il rendering quando viene caricato CSS. Un negozio può superare la minimizzazione ed essere comunque lento se fornisce un foglio di stile enorme, carica i CSS dell'app su ogni modello o consente ai CSS di bloccare l'immagine hero.

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, tema.css, componente-*.csse precedenti .scss.liquid File . I temi moderni spesso dividono i CSS per componente, ma il lavoro personalizzato può aggiungere file di grandi dimensioni che non sono mai stati elaborati da una fase di creazione.

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

Review widgets, popups, subscriptions, search, loyalty tools, and page builders often inject their own CSS. You usually cannot minify those files from Shopify admin. If PageSpeed identifies a third-party URL, ask the vendor for a minified file or remove the app if the feature is not worth the cost. Use the 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

Open PageSpeed Insights and expand the minify CSS diagnostic. If the URL is from your Shopify CDN and maps to a theme asset, you can usually fix it. If it is from an app domain, do not copy the file into your theme. That creates stale code and can break updates.

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 più vecchi utilizzano .css.liquid o Risorse .scss.liquid File con impostazioni all'interno di CSS. Fai attenzione con file come questo:

.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 Correzioni CSS che bloccano il rendering, pulizia CSS non utilizzatae il guida completa all'ottimizzazione della velocità di 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, quindi minimizzare ciò che rimane. Se desideri prima il percorso automatizzato, rivedi Prezzi tempestosi e confrontalo con un passaggio manuale per sviluppatori sul tuo tema.

FAQ