Comprimere il codice CSS e migliorare la performance del sito

Una parte importante dell’ottimizzazione dei tempi di caricamento delle pagine web è la gestione efficiente dei file CSS. Una compressione mirata e le migliori pratiche possono migliorare significativamente le prestazioni, con conseguenti tempi di caricamento più rapidi e una migliore esperienza utente.

Cos’è CSS?

Cascading Style Sheets (in italiano “fogli di stile”), conosciuto soprattutto con l’abbreviazione CSS, è un linguaggio con il quale si definisce separatamente la formattazione dei contenuti del sito, cioè la loro presentazione, come ad esempio i colori o il layout. I documenti HTML e XML contengono solo le indicazioni sui contenuti e sulla loro struttura all’interno del sito, mentre gli altri elementi relativi alla forma sono stabiliti a parte nei cosiddetti file CSS. Quando si utilizzano i fogli di stile, il server web deve inoltrarli al browser insieme ai documenti HTML e ai contenuti multimediali integrati (foto, video, ecc.) al momento dell’apertura di una pagina. Questo processo incide sui tempi di caricamento del sito.

Più i file CSS sono grandi e complessi, più il visitatore o la visitatrice deve attendere per visualizzare la pagina per intero. Comprimendo il codice CSS in uso, puoi ridurre notevolmente le dimensioni dei file CSS e migliorare la performance del tuo sito. Un’altra opzione per migliorare i tempi di caricamento è attraverso il lazy loading, in cui i file CSS vengono caricati solo quando necessario. Questo riduce il tempo di caricamento iniziale, poiché non tutti i fogli di stile devono essere caricati immediatamente, ma solo quando sono effettivamente necessari.

Le possibilità di ottimizzazione del codice CSS

Il tempo di caricamento di una pagina web acquista con il tempo sempre più importanza, soprattutto per via del crescente utilizzo dei dispositivi mobili e delle connessioni dati. Allo stesso tempo è aumentato il campo di impiego del codice CSS: infatti, questo linguaggio ricopre sempre più le funzioni di JavaScript. Specialmente i template dei CMS come WordPress hanno spesso dei file CSS carichi che rallentano inutilmente l’apertura del sito. Per questo motivo, ti forniamo alcuni consigli e trucchi per comprimere il codice CSS e ridurre i tempi di caricamento del tuo sito.

1. Evita di utilizzare eccessivamente CSS in linea, cioè l’inserimento del codice direttamente sul file HTML, a meno che non si tratti dell’intestazione della pagina. Lo stesso vale per i tag style, cioè proprietà CSS personalizzate che differiscono dallo standard del foglio di stile in uso.
2. Combina più file CSS in un unico script PHP. Così il client richiama solo il file PHP, evitando di inviare una richiesta HTTP per ogni singolo foglio di stile e di doverne aspettare la risposta. Tuttavia, HTTP/2 consente ora di gestire in modo efficiente diverse richieste parallele, il che significa che i singoli file CSS possono essere caricati più rapidamente senza doverli unire prima.
3. Utilizza, quando possibile, abbreviazioni come: body { margin: 20px 10px 5px 10px } invece che forme estese come: body { margin-top: 20px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px }.
4. Evita troppe specificazioni. Se tag specifici sono già inclusi in un elemento (per esempio in una lista), non c’è bisogno di ripeterli.
5. Utilizza i colori con la notazione esadecimale (HEX) al posto di quella RGB.
6. Il selettore universale * va utilizzato solo se veramente indispensabile. Una rappresentazione con questo selettore è valida per ogni elemento e quindi il browser deve recuperare tutti gli elementi che ne fanno uso.
7. Minimizza il codice CSS, eliminando spazi non necessari, righe vuote e commenti. Per esempio, non serve lasciare uno spazio dopo i due punti o il punto e virgola. Puoi cancellare anche il punto e virgola finale a conclusione di una lista. Tramite questo processo, il file CSS perde la sua struttura ordinata e la sua chiarezza, però verrà interpretato più velocemente dal browser.

Dato che la compressione di un file CSS è complicata, ricordati di creare una copia di sicurezza del file originale non minimizzato. Così facendo, potrai anche in seguito apportare piccole modifiche o risolvere gli errori.

Comprimere il codice CSS: strumenti online gratuiti

Per chi volesse alleggerirsi il compito di ottimizzare il codice CSS manualmente, ci sono diverse applicazioni web gratuite con cui è possibile minimizzare i file CSS. Questi strumenti ti 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 tuo file. Ti presentiamo in sintesi tre applicazioni che svolgono queste funzioni.

CSS Minifier

L’applicazione online CSS Minifier è raggiungibile alla pagina cssminifier.com. Basta copiare il codice CSS nel campo “Input CSS” e iniziare il processo cliccando su “Minify”. Nel campo “Minified CSS Output” viene mostrato il risultato dell’operazione e puoi copiare il codice direttamente o scaricarlo. CSS Minifier elimina dal codice i ritorni a capo, gli spazi e il punto e virgola finale dalle liste. Inoltre, lo strumento converte senza problemi i codici RGB nella variante HEX compressa.

CSS Compressor

L’applicazione web CSS Compressor si differenzia da CSS Minifier per la presenza di altre opzioni tra cui scegliere per la compressione del codice. Richiama il sito csscompressor.com e copia il tuo codice CSS nel campo “CSS Source Code Input”. Ora puoi stabilire il grado di compressione. Hai la possibilità di scegliere tra quattro diverse opzioni preconfigurate, basate sulla leggibilità del CSS compresso. Cliccando su “Show advanced options” spunta 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”, lo strumento fornisce informazioni sulle dimensioni di input e output del tuo file CSS così come la minimizzazione raggiunta in percentuale.

CSS Compressor di Gilmeister Software

CSS Compressor di Gilmeister Software è uno strumento gratuito per gli sviluppatori e le sviluppatrici web che consente una compressione facile del codice CSS. Il compressore rimuove facilmente gli spazi, l’ultimo punto e virgola e i commenti. Secondo il produttore, si può prevedere una riduzione complessiva fino al 30%.

Tempi di caricamento più veloci grazie al CSS ottimizzato

Più il tuo sito web o negozio 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 tuo server web aumenti al crescere 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. Gli strumenti online come quelli illustrati qui permettono anche a chi muove i primi passi nello sviluppo di web di eliminare informazioni non necessarie dai file CSS. Tuttavia, con questi programmi non è possibile ottimizzare al massimo il codice; per quello devi pensarci tu o rivolgerti a un team di esperti.