Minify HTML, CSS, JavaScript – una pratica fondamentale

Introduzione & Background

Minificare i file CSS, HTML e JavaScript del tuo sito può avere un’ importante impatto sui tempi di caricamento delle tue pagine e di conseguenza sul tuo rank nei motori di ricerca! Ma cosa comporta quest’operazione? Quali sono i migliori strumenti per il minify? Scopriamolo subito.

Con il termine “minify” si intende la rimozione dei caratteri superflui del codice sorgente e quindi una conseguente riduzione del peso reale del file. Ma cosa c’è di superfluo nel codice sorgente del tuo sito? 

Prova a pensare a tutti quei caratteri come ad esempio spazi bianchi, interruzioni di riga, commenti e delimitatori di blocchi che sono utili se non fondamentali per noi umani ma non necessari per le macchine. Minimizzando i file del tuo sito web quindi rimuovi dal codice CSS, HTML e Javascript tutto ciò che non è strettamente necessario in modo che il tuo web browser li legga più velocemente.

Ecco un esempio di file CSS prima e dopo il minify:

.example { 
   width: 100%; 
   position: absolute;
   display: block;
   color: red !important;
}
/*this is a comment*/
.class { 
   font-size: 12px;
   font-family: Arial, sans-serif;
}

.example{ width:100%; position:absolute;display:block;color:red!important}.class{ font-size:12px;font-family:Arial,sans-serif}

Come si può notare gli spazi bianchi, le interruzioni di riga ed i commenti sono stati rimossi. 

Perché il minify è importante?

Come già detto, ridurre e monitorare il codice è buona norma per diminuire i file che il web browser dovrà scaricare ed eseguire. La cosa più importante però è che il Cascading Style Sheets o CSS, che descrive come un elemento HTML, deve essere mostrato a schermo ed è una risorsa di blocco del rendering. Questo significa che il browser sospenderà il rendering di qualsiasi contenuto fino a quando questo non sarà elaborato e costruito. 

Immagina cosa accadrebbe se eseguissimo la homepage del tuo sito senza CSS?

Non solo CSS

Anche se il CSS descrive l’abito, la grafica delle pagine web, ci sono altri linguaggi di programmazione non meno importanti, come HTML che definisce lo scheletro del documento, PHP che gira sul lato server e infine JavaScript, un linguaggio di scripting lato client utilizzato per rendere interattive le pagine web. Si potrebbe dire che HTML è lo scheletro, CSS l’abito e la pelle mentre JS i muscoli.

Alcuni tools per il minify

Consigliamo CSS Minifier, è il più prestante con il migliore algoritmo di compressione.

Menzioniamo Minifier perché propone un JavaScript Minifier insieme a quello CSS.