Questa è la traduzione dell'articolo Minification: A Christmas Diet di Gareth Rushgrove pubblicato originariamente su 24 Ways il 6 dicembre 2007.
Durante le vacanze si tende a ingrassare piuttosto che a rimanere magri e snelli, ma cercheremo in questo caso di cambiare tutto ciò con una rapida introduzione alla minimizzazione.
Nel corso dello scorso anno quello delle performance è stato un tema molto caldo. Stiamo realizzando siti e applicazioni sempre più complessi ma allo stesso tempo stiamo provando a far sì che tutto venga caricato più velocemente e sia subito pronto per l'interazione con l'utente. Cosa dovrebbe fare uno sviluppatore coscienzioso e consapevole di questi fattori?
La minimizzazione è il procedimento con cui si rende qualcosa più piccolo. Nel caso delle performance di un sito web parliamo di ridurre le dimensioni dei file che vengono inviati al browser. Gli elementi primari di un sito a livello front-end sono HTML, CSS e Javascript, oltre alle immagini. Vediamo qualche strumento che può aiutarci a ridurli di peso quando necessario e a velocizzare i nostri siti.
HTMLTidy
HTMLTidy ottimizza ed elimina gli spazi bianchi presenti in documento HTML. È anche un ottimo strumento per correggere il markup non valido. Ecco il più semplice dei modi d'uso:
tidy -m page.html
CSSTidy
CSSTidy prende i vostri file CSS, ottimizza le singole regole (per esempio trasformando padding-top: 10px; padding-bottom: 10px; in padding: 10px 0;) ed elimina gli spazi bianchi non necessari. Anche in questo caso forniamo l'istruzione di base:
csstidy style.css style-min.css
JSMin
JSMin è in grado di rendere più compatto un file Javascript. Dal momento che sempre più siti usano Javascript per aggiungere miglioramenti nelle funzionalità e nell'interazione, questo fatto può rappresentare un problema a livello di consumo di banda. Se si usano framework e librerie, andiamo sempre a verificare che esista una versione minimizzata e compressa:
jsmin <script.js >script-min.js
Prima di usare JSMin è buona norma usare JSLint per evidenziare eventuali problemi.
OptiPNG
Le immagini possono rappresentare un altro serio problema per il consumo di banda. Renderle meno pesanti con OptiPNG dovrebbe velocizzare il nostro sito. L'uso di base è molto semplice:
optipng image.png
Tutti questi strumenti presentano un gran numero di opzioni e generalmente comprendono una buona documentazione a corredo per facilitarne l'uso. Per il resto sarà sufficiente sperimentare un po'.
Per progetti più consistenti probabilemente non vorrete minimizzare manualmente tutti i vostri file. Il miglior approccio in questo caso consiste nell'integrare questi strumenti nella fase di progettazione e implementazione in modo che il sito risulti più snello in uscita rispetto all'origine.
Potete anche agire a livello di server per velocizzare il sito. La compressione GZIP o la compilazione delle risorse, per esempio, possono essere usate per ridurre il numero delle richieste HTTP. Se siete interessati all'argomento performance un buon punto di partenza è la sezione Exceptional Performance su Yahoo Developer Network. Ricordate anche di installare l'estensione per Firefox YSlow.
