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