Laburno

Gli ottimizzatori di CSS, alcuni dei quali fungono anche da parser, sono strumenti decisamente utili per mettere a dieta i fogli di stile.

Scrivere lo stile per un layout mediamente complesso può portare, tra formattazione, commenti e ripetizioni varie, ad un risultato probabilmente molto pesante in termini di dimensioni. Utilizzare uno dei tanti tools che la rete ci mette a disposizione per snellire in maniera più o meno intelligente, è cosa gradita. Specialmente se veniamo invogliati dagli slogan duepuntozero che ci promettono compressioni vertiginose.

In quella che sta diventando, non dico una giungla, ma almeno un zoo abbastanza frequentato, una mini guida orientativa potrebbe essere utile no? Bene, allora: che sia fatta la recensione.

La cavia

Per recensire i vari servizi abbiamo bisogno di una cavia.
Il candidato in questione deve essere un foglio di stile leggibile, commentato, scarsamente ottimizzato, di dimensione consistente, validato e privo di hacks.
Non avendone uno sotto mano, una letterina fuori stagione a Babbo Natale mi ha fatto trovare questo: 60612 bytes di foglio di stile di Multiplayer.it.
Perfetto.

Per ogni prova utilizzerò le opzioni di massima compressione, poi salverò il foglio di stile in un documento vuoto e ne misurerò la dimensione. La percentuale e il guadagno calcolati in loco dai vari tool non verranno presi in considerazione.

CSS Tidy

CSS Tidy è un optimizer open source critto in C++ molto completo. Oltre ad essere controllabile tramite PHP, è anche disponibile come eseguibile per Windows, Linux e Mac. La versione attuale è la 1.3. Ecco una lista di siti che lo utilizzano:

• CleanCSS (1.1)
• Code Beautifier (1.3)

Il tool permette cinque livelli di ottimizzazione, ognuno dei quali è un compromesso tra compressione e leggibilità.

Le opzioni disponibili sono una decina, e variano tra formattazione e l’ ottimizzazione.

Per la prova ho utilizzato Code Beutifier perchè aggiornato all’ultima versione, e questi sono i parametri:

• Livello di compressione: Highest
• Regroup selectors: Merge selectors with the same propreties
• Optimise shorthands: Safe
• Compress colors
• Compress font-weight
• Remove unnecessary backslashes
• Remove last ;
  

Risultato:

• Output: 40747 bytes
• Compressione: 32,775%
• Guadagno: 19865 bytes

Online CSS Optimizer

Questo tool molto semplice presenta un’unica opzione: Do not remove line breaks, che di default non è attiva (e quindi mette l’output su un unica riga).

Risultato:

• Output: 51480 bytes
• Compressione: 15,067%
• Guadagno: 9132 bytes

flumpCakes

FlumpCakes CSS Optimizer presenta una decina di opzioni in tutto, per la prova ho utilizzato solo quelle per la compressione (in pratica ho tralasciato solo Pretty Print che è relativa alal leggibilità):

• RGB to HEX
• Absolute to Relative
• Combine Backgrounds
• Combine Fonts
• Combine Lists
• Combine Borders
• Combine Styles 2 Groups

Risultato:

• Output: 43733 bytes
• Compressione: 28,848%
• Guadagno: 16879 bytes

Icey CSS Compressor

Icey CSS Compressor presenta solo opzioni di compressione, tutte attive di default. Interessante notare che c’è anche la possibilità di combinare più fogli di stile.

Risultato:

• Output: 41001 bytes
• Compressione: 32,355%
• Guadagno: 19611 bytes

CSS Drive Compressor

Il compressore di CSS Drive presenta svariate opzioni, a cui si accede per la maggior parte cliccando su Advanced Mode. I prametri relative a Spaces e Tabs e Other Options, attivi di default, non li ho toccati, per quanto riguarda le altre opzioni:

• Newline handling: remove all newlines
• Comment handling: strip all comments

Risultato:

• Output: 48222 bytes
• Compressione: 20,442%
• Guadagno: 12390 bytes

Conclusioni

CSS Tidy e Icey hanno ottenuto risultati pressappoco equivalenti, dimostrandosi anche grazie ai loro parchi opzioni degli ottimi tool.

Alcune riflessioni al riguardo, prima di chiudere. Per prima cosa voglio dire che il test effettuato non è attendibile, ma soltanto indicativo.

Il livello di compressione ottenibile varia da foglio di stile a foglio di stile, per avere un’indicazione più accurata sarebbe opportuno fare il test con diversi CSS alla mano e stilare una media: detto questo sappiate che non è detto che il tool migliore per il mio CSS sia migliore anche per il vostro, dipende sempre da come è scritto. Se cercate l’ottimizzazione maniacale proveteli tutti, altrimenti potete fidarvi dei miei risultati.

Ultima cosa: mi piacerebbe tenere questa guida aggiornata, quindi se magari conoscete tool che non ho trovato, o avete dei suggerimenti su come portare avanti il test, segnalatemelo!