Come minificare i CSS per migliorare le prestazioni di un sito web

Perché minificare il CSS?

La minificazione del CSS riduce le dimensioni dei file CSS (fogli di stile a cascata) in modo che si carichino più velocemente. La minificazione del CSS funziona eliminando tutti i caratteri e gli spazi non necessari dal markup CSS, senza influire sul modo in cui i browser lo interpretano.

I file CSS contengono istruzioni per la formattazione degli elementi HTML. Quando si caricano più velocemente, anche le pagine web si caricano nel complesso più rapidamente. Un po' come un corridore che indossa un abbigliamento leggero, che gli consente di correre più velocemente. Il caricamento rapido migliora l'esperienza utente e il valore SEO della pagina. Inoltre, miglioramenti alla velocità della pagina possono persino contribuire ad aumentare i tassi di conversione.

Ad esempio, questo semplice foglio di stile ha diverse righe di codice, unitamente a dei commenti per gli sviluppatori che lo leggono.

/* paragraph styling here */

p {
font-family: arial;
color: green;
background-color: white;
}

/* links */

a:link {
color: blue;
}

a:visited {
color: white;
}

Dopo la minificazione CSS, il foglio viene ridotto a una sola riga compressa, e i commenti sono stati rimossi.

p{font-family:arial;color:green;background-color:white;}a:link{color:blue;}a:visited{color:white;} 

Sebbene questo testo sia meno leggibile per gli esseri umani, un browser è in grado di leggere e interpretare la seconda versione tanto bene come la prima. Occupando meno spazio, la versione minificata ha il vantaggio di caricarsi più velocemente.

Come funziona il rendering della pagina

Prima che un browser possa visualizzare una data pagina web, è necessario che conosca gli elementi presenti in essa (come il testo, le immagini e altri contenuti multimediali) e la loro posizione. Proprio come un'impresa edile ha bisogno dei progetti di un edificio prima di poterne avviare la costruzione, così i browser necessitano dei "progetti" di una pagina web prima di poter iniziare a renderizzarla.

Quando i browser ricevono un file HTML per una pagina web, iniziano a costruire una cosa denominata albero modello oggetto documento (DOM), una sorta di bozza o schema di tutti gli elementi presenti nella pagina. I browser analizzano anche tutti i tag <style> e i file CSS collegati per creare un albero CSSOM, che definisce lo stile di tutti gli elementi della pagina.

Infine, i browser combinano il DOM e il CSSOM per creare un "albero di rendering". Una volta creato questo albero, il browser inizia a disegnare la pagina, e finché ciò non avviene, l'utente vede una schermata vuota.

In sintesi: finché il browser non finisce di scaricare e leggere il CSS, la pagina non può essere visualizzata.

In che modo un CSS possono impedire la visualizzazione di una pagina web?

Nello sviluppo web, qualsiasi elemento o funzionalità che deve essere caricata prima che la pagina possa essere visualizzata all'utente finale è definita "risorsa che blocca il rendering". Il CSS è una risorsa di questo tipo. Le risorse che bloccano il rendering, ove possibile, devono essere ottimizzate per consentire un caricamento veloce.

Le risorse blocca-rendering di grandi dimensioni richiedono più tempo per il caricamento, il che fa sì che il browser debba attendere, bloccando letteralmente la pagina e dando all'utente l'impressione che non stia accadendo nulla. Ritardi come questo spesso fanno sì che gli utenti lascino la pagina ("bounce", o "rimbalzo").

Esse impattano anche sui Core Web Vitals, le metriche che Google utilizza per misurare le prestazioni delle pagine, in particolare la Largest Contentful Paint (LCP), che misura il tempo necessario all'elemento più grande di una pagina per caricarsi. Punteggi di Core Web Vitals insufficienti possono indurre Google a classificare la pagina più in basso nei risultati di ricerca, pertanto la pagina potrebbe ricevere meno traffico.

Come minificare i CSS

Fortunatamente, sono disponibili molti strumenti di minificazione per CSS. L'approccio più conveniente è, forse, utilizzare gli strumenti di minificazione integrati con la rete di distribuzione dei contenuti (CDN) di un sito web, un servizio che memorizza nella cache i contenuti e li distribuisce. Le CDN dovrebbero essere in grado di fornire servizi di minificazione per migliorare ulteriormente le prestazioni.

Cloudflare Auto Minify è incluso nella CDN di Cloudflare. Gli owner dei siti possono selezionare i file CSS (insieme ai file JavaScript e HTML) da minimizzare dalla loro dashboard Cloudflare.

Qual è la differenza tra la minificazione e la compressione del CSS?

Sul piano tecnico, la minificazione del CSS è cosa diversa dalla sua compressione, anche se l'obiettivo di entrambi i processi è il medesimo: ridurre le dimensioni del file. La minificazione altera il codice rimuovendo commenti e caratteri, mentre la compressione riduce le dimensioni del file tramite un algoritmo di compressione (come gzip) e non ne altera sostanzialmente il contenuto.

Esistono dei lati negativi per la minificazione del CSS?

Poiché un CSS minificato spesso risulta meno leggibile, il processo di minificazione può rendere più difficile per gli sviluppatori identificare e correggere manualmente i bug nel markup del CSS.

Inoltre, la minificazione del CSS non è in sé e per sé sufficiente a migliorare le prestazioni di un sito web. Essa può far guadagnare a un sito web alcuni millisecondi, ma i gestori dei siti devono intraprendere ulteriori azioni per ottenere miglioramenti significativi delle prestazioni. Tra di esse figurano l'ottimizzazione delle immagini, il caching HTTP del browser e altro ancora.

Le minificazioni CSS e JavaScript a confronto

La minificazione di JavaScript è un concetto simile, ma viene applicata al codice JavaScript eseguibile. Commenti, spazi e altri caratteri aggiuntivi vengono rimossi, in modo che il file .js possa essere caricato ed eseguito più velocemente. La minificazione di JavaScript e CSS contribuisce a velocizzare il caricamento di un sito web, e può migliorare il coinvolgimento degli utenti e aumentare il traffico organico.

Gli operatori di siti web possono utilizzare la CDN di Cloudflare per minimizzare sia CSS che JavaScript. Scopri qui i piani Cloudflare disponibili.