Comprimere il codice CSS e migliorare la performance del sito

I Cascading Style Sheets (in italiano fogli di stile), conosciuti soprattutto con l’abbreviazione CSS, è un linguaggio con il quale si definiscono separatamente la formattazione dei contenuti del sito, cioè la loro presentazione, come ad es. i colori o il layout. I documenti HTML e XML contengono solo le indicazioni sui contenuti e sulla loro struttura all’interno del sito, mentre gli altri elementi relativi alla forma sono stabiliti a parte nei cosiddetti file CSS. Quando si utilizzano i fogli di stile, il server web deve inoltrarli al browser insieme ai documenti HTML e ai contenuti multimediali integrati (foto, video, ecc.) al momento dell’apertura di una pagina. Questo processo incide sui tempi di caricamento del sito. Più i file CSS sono grandi e complessi, più il visitatore deve attendere per visualizzare la pagina per intero. Comprimendo il codice CSS in uso, potete ridurre notevolmente le dimensioni dei file CSS e migliorare la performance del vostro sito.

Possibilità di ottimizzazione del codice CSS

Il tempo di caricamento di una pagina web acquista con il tempo sempre più importanza, soprattutto per via del crescente utilizzo dei dispositivi mobili e delle connessioni dati. Allo stesso tempo è aumentato il campo di impiego del codice CSS: infatti, questo linguaggio ricopre sempre più le funzioni di JavaScript. Specialmente i template dei CMS come WordPress hanno spesso dei file CSS carichi che rallentano inutilmente il sito. Per questo motivo, vi presentiamo alcuni consigli e trucchi per comprimere il codice CSS e ridurre i tempi di caricamento del vostro sito:

  1. Evitate di utilizzare eccessivamente CSS in linea, cioè l’inserimento del codice direttamente sul file HTML, a meno che non si tratti dell’intestazione della pagina. Lo stesso vale per i tag style, cioè proprietà CSS personalizzate che differiscono dallo standard del foglio di stile in uso.

  2. In un unico script PHP combinate più file CSS cosicché il client richiami solo il file PHP, eviti di inviare una richiesta http per ogni singolo foglio di stile e di doverne aspettare la risposta.

  3. Utilizzate, quando possibile, abbreviazioni come: body { margin: 20px 10px 5px 10px } invece che forme estese come: body { margin-top: 20px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px }

  4. Evitate troppe specificazioni. Se tag specifici sono già inclusi in un elemento (per es. in una lista), non c’è bisogno di ripeterli.

  5. Utilizzate i colori con la notazione esadecimale (HEX) al posto di quella RGB.

  6. Il selettore universale “*” va utilizzato solo se veramente indispensabile. Una rappresentazione con questo selettore è valida per ogni elemento e quindi il browser deve recuperare tutti gli elementi che ne fanno uso.

  7. Minimizzate il codice CSS, eliminando spazi non necessari, righe vuote e commenti. Per es. non serve lasciare uno spazio dopo i due punti o il punto e virgola. Potete cancellare anche il punto e virgola finale a conclusione di una lista. Tramite questo processo, il file CSS perde la sua struttura ordinata e la sua chiarezza, però verrà interpretato più velocemente dal browser. 

Dato che la compressione di un file CSS è complicata, ricordatevi di creare una copia di sicurezza del file originale non minimizzato. Così facendo, potrete anche in seguito apportare delle piccole modifiche o risolvere gli errori. 

Comprimere il codice CSS: tool online e offline

Per chi volesse alleggerirsi il compito di ottimizzare il codice CSS manualmente, ci sono diverse applicazioni online e programmi offline con cui è possibile minimizzare i file CSS. Questi strumenti vi risparmiano il lavoro faticoso ed eliminano efficacemente almeno gli spazi, i tabulatori, i commenti e il ritorno a capo. Anche la conversione del codice dei colori è realizzabile con la maggior parte dei programmi. Il risultato può essere direttamente scaricato come file CSS o copiato e incollato sul vostro file. Vi presentiamo in sintesi tre applicazioni che svolgono queste funzioni:

CSS Minifier

L’applicazione online CSS Minifier è raggiungibile alla pagina http://www.cssminifier.com/. Basta copiare il codice CSS nel campo “input CSS” e iniziare il processo cliccando su “minify”. Nel campo “minified output” viene mostrato il risultato dell’operazione e potete copiare il codice manualmente o scaricarlo tramite “download as file”. CSS Minifier elimina dal codice i ritorni a capo, gli spazi e il punto e virgola finale dalle liste. Inoltre, il tool converte senza problemi i codici RGB nella variante HEX compressa.

CSS Compressor

L’applicazione web CSS Compressor si differenzia da CSS Minifier per la presenza di altre opzioni tra cui scegliere per la compressione del codice. Richiamate il sito http://csscompressor.com/ e copiate il vostro codice CSS nel campo “CSS Source Code Input“. Ora potete stabilire il grado di compressione. Cliccando su “Show advanced options” spuntate la casella con le dimensioni di ottimizzazione desiderate come ad esempio i colori (“Compress colors”) o gli spazi (“Remove unnecessary backlashes”). La compressione ha inizio cliccando su “Compress”. In più, nel campo “Compressed JavaScript”, il tool fornisce informazioni sulle dimensioni di input e output del vostro file CSS così come la minimizzazione raggiunta in percentuale.

Free CSS Toolbox

Free CSS Toolbox è un software gratuito per sviluppatori web, scaricabile dalla pagina degli sviluppatori della Blumentals Software. Come già svela il nome, si tratta di una raccolta di tool con i quali è possibile anche la formattazione e la verifica dei codici CSS. Nel menu “CSS Fomatting Options” scegliete i parametri CSS che volete ottimizzare e iniziate la compressione cliccando su “Re-Format Now”. Il programma elimina così senza problemi gli spazi e l’ultimo punto e virgola, e anche la dimensione dei colori viene minimizzata. Free CSS Toolbox funziona su tutti i sistemi operativi Windows, a partire da XP.

Tempi di caricamento più veloci grazie all’ottimizzazione del codice CSS

Più il vostro sito web o shop online ha una struttura complessa, più si avrà bisogno di ricorrere ai fogli di stile, il più delle volte file CSS. Perciò non stupisce che il carico del vostro web server aumenti all’aumentare del numero e delle dimensioni dei file CSS. Quando si apre una pagina con un client (browser), devono sempre essere richiamati e inoltrati tutti i file CSS. Per questo motivo si consiglia di ottimizzare i fogli di stile. Tool online e offline, come quelli qui illustrati, permettono anche ai principianti della programmazione di eliminare informazioni non necessarie dai file CSS. Purtroppo, però, con questi programmi non è possibile ottimizzare al massimo il codice; per quello dovete pensarci voi o rivolgervi agli esperti. 

Hai trovato questo articolo utile?
Per offrirti una migliore esperienza di navigazione online questo sito web usa dei cookie, propri e di terze parti. Continuando a navigare sul sito acconsenti all’utilizzo dei cookie. Scopri di più sull’uso dei cookie e sulla possibilità di modificarne le impostazioni o negare il consenso.