Perché comprimere file CSS?
Lo scopo della compressione delle risorse è quello di migliorare le performance relative ai tempi di caricamento di una pagina web, riducendo i tempi di attesa ed elaborazione del network. La compressione può ridurre il peso di una risorsa fino al 50%, risultando più rapida nel download.
I file CSS sono spesso più grandi di quanto dovrebbero essere, vengono spesso caricati nella sezione head della pagina aumentando quindi i tempi di rendering e di blocco della pagina stessa.
Esepmio di codice CSS non compresso:
/* Il mio Documento CSS */
h1 {
font-size: 3em;
color: #000000;
}
h2 {
font-size: 2em;
color: #CCCCCC;
}
.primo-stile {
background-color: #000000;
}
.secondo-stile {
background-color: #000000;
}
Il codice CSS nell'esempio può essere compresso come segue:
h1{font-size:3em;color:#000}h2{font-size:2em;color:#CCC}.primo-stile,.secondo-stile{background-color:#000}
Dal punto di vista del browser e della rappresentazione visiva, questi 2 codici di esempio sono equivalenti, ma la versione compressa e/o minificata utilizza meno byte. Il tool Compressore CSS può inolte migliorare l'efficienza del codice stesso rimuovendo le ridondanze, gli spazi e le linee di commento.
Comprimendo il codice CSS puoi sensibilmente migliorare le performance del tuo sito, aumentando la velocità di caricamento e riducendo i tempi di download delle risorse fornendo un codice più snello e facile da interpretare per i browser.