Come comprimere e minimizzare un file CSS
Per ottimizzare un sito web, lavorando sui tempi di caricamento delle pagine, è determinante utilizzare un tool di compressione dei file CSS.
Comprimendo i file CSS presenti nel nostro sito possiamo non solo migliorarne le prestazioni ma ridurre anche le dimensioni del file stesso, togliendo tutti quei caratteri e spazi bianchi superflui per il funzionamento del foglio di stile.
Uno dei servizi più affidabili che può venirci incontro per tale scopo è CSS Compressor & Minifier. Si tratta di uno strumento online in inglese gratuito e di facile intuizione.
Come Comprimere un file CSS
Nella prima pagina viene spiegato in inglese, il funzionamento del tool e specificato come esso può essere utilizzato sia da esperti che da principianti.
Colleghiamoci alla pagina e come possiamo vedere lo strumento è costituito da 5 riquadri:
- CSS Input, dove copiare il codice css da comprire. In questa sezione è possibile inserire anche l’URL del file CSS.
- Code Layout, il tipo di compressione che vogliamo applicare (Highest, High, Standard, Low, Custom).
- Options, le opzioni che possiamo applicare alla compressione (ON/OFF).
- Messages, le operazioni che vengono effettuate durante la compressione.
- Input, il risultato della compressione da copiare e incollare nel nuovo file CSS.
Per lavorare sul tipo di compressione è possibile nel riquadro Code Layout, scegliere tra:
- Highest: il file sarà molto leggero e illeggibile.
- High: il file sarà molto leggero e poco leggibile.
- Standard: il file sarà leggero e quasi leggibile.
- Low: alta leggibilità.
- Custom: occorre inserire nel campo Custom Template, un file che si compone di più stringhe singoli, che sono separati dal carattere “|” senza virgolette.
Per avere un file leggero e che aiuterà ad ottimizzare il caricamento delle nostre pagine web, consigliamo la massima compressione del CSS.
Incolliamo il contenuto da comprimere del file CSS e clicchiamo su Process CSS.
Al termine dell’elaborazione nel riquadro Input, apparirà il contenuto compresso da copiare e incollare nel file CSS da caricare nel sito.
Come Decomprimere un file CSS
Nel caso in cui abbiamo perso il file CSS originale e non compresso, CSS Compressor & Minifier dà la possibilità attraverso la voce Low (alta leggibilità) di decomprimere il file CSS ritornando allo stato originario. Basterà copiare e incollare il contenuto del file css compresso nella Text-area del CSS Input e nel Code Layout selezionare la voce Low,. cliccare su Process CSS e tutto tornerà come prima.
Un consiglio: conservate sempre tenendoli aggiornati il file CSS originale e quello compresso.
Ecco altri servizi di compressione di file css:
Approfondimenti