Minimizza CSS

Nella sezione Opportunità del report Lighthouse sono elencati tutti i file CSS non minimizzati, insieme ai potenziali risparmi in kibibyte (KiB) quando questi file vengono minimizzati:

Uno screenshot del controllo CSS Minify di Lighthouse

In che modo minimizzare i file CSS può migliorare il rendimento

Minimizza i file CSS per migliorare le prestazioni di caricamento delle pagine. I file CSS sono spesso più grandi del dovuto. Ad esempio:

/* Header background should match brand colors. */
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

Può essere ridotto a:

h1,
h2 {
  background-color: #000000;
}

Dal punto di vista del browser, questi due esempi di codice sono funzionalmente equivalenti, ma il secondo utilizza meno byte. I minificatori possono migliorare ulteriormente l'efficienza dei byte rimuovendo gli spazi vuoti:

h1,
h2 {
  background-color: #000000;
}

Alcuni minificatori impiegano trucchi intelligenti per ridurre al minimo i byte. Ad esempio, il valore del colore #000000 può essere ulteriormente ridotto a #000, che è l'equivalente in forma abbreviata.

Lighthouse fornisce una stima dei potenziali risparmi in base ai commenti e agli spazi vuoti che trova nel CSS. Questa è una stima prudente. Come accennato in precedenza, i minificatori possono eseguire ottimizzazioni intelligenti (come la riduzione di #000000 a #000) per ridurre ulteriormente le dimensioni dei file. Quindi, se usi un minificatore, potresti ottenere più risparmi rispetto a quanto segnalato da Lighthouse.

Utilizza un minificatore CSS per minimizzare il codice CSS

Per i siti di piccole dimensioni che non aggiorni spesso, probabilmente puoi usare un servizio online per minimizzare manualmente i file. Incolli il CSS nell'interfaccia utente del servizio: il codice restituisce una versione minimizzata del codice.

Per gli sviluppatori professionisti, è consigliabile configurare un flusso di lavoro automatizzato che minimizzi automaticamente il codice CSS prima di eseguire il deployment del codice aggiornato. In genere questa operazione viene eseguita con uno strumento di creazione come Gulp o Webpack.

Scopri come minimizzare il codice CSS in Minimizza CSS.

Indicazioni specifiche per lo stack

Drupal

Abilita Aggregate CSS files (Amministrazione file CSS) in Amministrazione > Configurazione > Sviluppo. Puoi anche configurare opzioni di aggregazione più avanzate tramite moduli aggiuntivi per velocizzare il tuo sito concatenando, minimizzando e comprimendo i tuoi stili CSS.

Joomla

Una serie di estensioni di Joomla può velocizzare il tuo sito concatenando, minimizzando e comprimendo i tuoi stili CSS. Esistono anche modelli che forniscono questa funzionalità.

Magento

Attiva l'opzione Minimizza i file CSS nelle impostazioni sviluppatore del tuo negozio.

React

Se il tuo sistema di compilazione minimizza automaticamente i file CSS, assicurati di eseguire il deployment della build di produzione della tua applicazione. Puoi verificarlo con l'estensione Strumenti per sviluppatori di reazione.

WordPress

Esistono diversi plug-in di WordPress in grado di velocizzare il tuo sito concatenando, minimizzando e comprimendo i tuoi stili. Se possibile, puoi anche utilizzare un processo di compilazione per eseguire la minimizzazione in anticipo.

Risorse