Comprimere il codice CSS e migliorare la performance del sito

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:

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.

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

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.