Come comprimere il CSS di un sito web

Capita spesso di dover validare un sito web e avere errore di CSS, o consiglio di minificare cioè diminuire il peso del css ossia come comprimere il css.

Spesso capita di dover seguire questi accorgimenti dettati da tool seo online come gtmetrix, pingdom etc…

Iniziamo col dire che questi strumenti non sono la bibbia ma che spesso ci danno un consiglio utile da seguire. Alcuni consigli contengono direttive sulla diminuzione del peso dei file css.

Stiamo parlando di pochi kb, spesso anche byte, ma la diminuzione fa si che il sito carichi più velocemente ed effettui meno richieste lato grafica.

Comprimere un file CSS e migliorare la velocità del sito

Il css definisce gli stili ossia la formattazione delle presentazioni di un documento HTML. Quando apriamo un sito, il server invia sia i vari file ed elementi tipo immagini e video all’utente. Ovviamente per mostrarli al meglio dovrà elaborare anche la grafica del sito in modo da dare il giusto ordine visivo.

Tutto questo si traduce in tempo di caricamento del sito, che deve essere il più basso possibile e con un peso di tutti i file inferiori, a mio avviso, a 1mb quando possibile.

Se ne deduce, senza difficoltà, che più è leggero il file CSS e meno l’utente deve attendere per visualizzare tutta la pagina web richiesta.

Come ottimizzare il codice CSS

Come abbiamo detto, visto anche l’avvento maggiore dei dispositivi mobile, un sito deve essere leggero per venire incontro ai fabbisogni della mobilità e delle connessioni dati. Ecco dunque alcuni consigli per diminuire il peso dei file css:

• Evitare come la peste il css inline, ossia il css in linea per ogni elemento nel file html.
• Richiamate tutti i css in un unico file php, così il server ha una sola richiesta e non N richieste per N file css.
• Utili le abbreviazioni tipo div { padding: 20px 10px 5px 10px } invece: div {
  padding -top: 20px;
  padding -right: 10px;
  padding -bottom: 5px;
  padding -left: 10px }
• Evitare di duplicare i tag già dichiarati.
• Utilizzare i colori in esadecimale (HEX) e non RGB.
• Non abusate (meglio non usarlo!) il selettore * detto selettore universale. Questo selettore permette di applicare la regola a ogni elemento e quindi il browser deve lavorare di più.
• Eliminare gli spazi non necessari, righe vuote e commenti. Certo ne va della lettura da parte nostra ma è molto più veloce l’accesso al file e all’interpretazione. Anche il ; finale non serve a conclusione di una lista di regole.

Plugin e tool per comprimere un file CSS

Chi vuole può usare alcuni dei tanti servizi online o plugin dedicati alla minificazione del file css. Per esempio:

• CSS Minifier: http://www.cssminifier.com/
• CSS Compressor: http://csscompressor.com/
• Free CSS Toolbox: http://www.blumentals.net/csstool/

Tempi di caricamento ridotti con css ottimizzato

Ricordatevi che un css ottimizzato permette ad un sito di essere caricato, scaricato, ed elaborato più velocemente e in ottica Seo a Google piace molto!