Comprimere il codice CSS e migliorare la performance del sito
I Cascading Style Sheets (in italiano fogli di stile), conosciuti soprattutto con l’abbreviazione CSS, è un linguaggio con il quale si definiscono separatamente la formattazione dei contenuti del sito, cioè la loro presentazione, come ad es. 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 deve attendere per visualizzare la pagina per intero. Comprimendo il codice CSS in uso, potete ridurre notevolmente le dimensioni dei file CSS e migliorare la performance del vostro sito.
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 il sito. Per questo motivo, vi presentiamo alcuni consigli e trucchi per comprimere il codice CSS e ridurre i tempi di caricamento del vostro sito:
- Evitate 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.
- In un unico script PHP combinate più file CSS cosicché il client richiami solo il file PHP, eviti di inviare una richiesta http per ogni singolo foglio di stile e di doverne aspettare la risposta.
- Utilizzate, 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 }
- Evitate troppe specificazioni. Se tag specifici sono già inclusi in un elemento (per es. in una lista), non c’è bisogno di ripeterli.
- Utilizzate i colori con la notazione esadecimale (HEX) al posto di quella RGB.
- 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.
- Minimizzate il codice CSS, eliminando spazi non necessari, righe vuote e commenti. Per es. non serve lasciare uno spazio dopo i due punti o il punto e virgola. Potete 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, ricordatevi di creare una copia di sicurezza del file originale non minimizzato. Così facendo, potrete anche in seguito apportare delle piccole modifiche o risolvere gli errori.
Comprimere il codice CSS: tool online e offline
Per chi volesse alleggerirsi il compito di ottimizzare il codice CSS manualmente, ci sono diverse applicazioni online e programmi offline con cui è possibile minimizzare i file CSS. Questi strumenti vi 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 vostro file. Vi presentiamo in sintesi tre applicazioni che svolgono queste funzioni:
CSS Minifier
L’applicazione online CSS Minifier è raggiungibile alla pagina http://www.cssminifier.com/. Basta copiare il codice CSS nel campo “input CSS” e iniziare il processo cliccando su “minify”. Nel campo “minified output” viene mostrato il risultato dell’operazione e potete copiare il codice manualmente o scaricarlo tramite “download as file”. CSS Minifier elimina dal codice i ritorni a capo, gli spazi e il punto e virgola finale dalle liste. Inoltre, il tool 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. Richiamate il sito http://csscompressor.com/ e copiate il vostro codice CSS nel campo “CSS Source Code Input“. Ora potete stabilire il grado di compressione. Cliccando su “Show advanced options” spuntate 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”, il tool fornisce informazioni sulle dimensioni di input e output del vostro file CSS così come la minimizzazione raggiunta in percentuale.
Free CSS Toolbox
Free CSS Toolbox è un software gratuito per sviluppatori web, scaricabile dalla pagina degli sviluppatori della Blumentals Software. Come già svela il nome, si tratta di una raccolta di tool con i quali è possibile anche la formattazione e la verifica dei codici CSS. Nel menu “CSS Fomatting Options” scegliete i parametri CSS che volete ottimizzare e iniziate la compressione cliccando su “Re-Format Now”. Il programma elimina così senza problemi gli spazi e l’ultimo punto e virgola, e anche la dimensione dei colori viene minimizzata. Free CSS Toolbox funziona su tutti i sistemi operativi Windows, a partire da XP.
Tempi di caricamento più veloci grazie all’ottimizzazione del codice CSS
Più il vostro sito web o shop 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 vostro web server aumenti all’aumentare 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. Tool online e offline, come quelli qui illustrati, permettono anche ai principianti della programmazione di eliminare informazioni non necessarie dai file CSS. Purtroppo, però, con questi programmi non è possibile ottimizzare al massimo il codice; per quello dovete pensarci voi o rivolgervi agli esperti.
Articoli simili
Comprimere le immagini: indispensabile per il web
Lo spazio di archiviazione aumenta ogni anno sempre di più grazie ai Gigabyte e Terabyte messi a disposizione. Sarebbe pertanto consigliabile ridurre le dimensioni dei dati, soprattutto se gestite una pagina web in autonomia. File compressi significano tempi di caricamento più veloci, utenti più felici e un migliore posizionamento su Google. In modo particolare sarebbe utile comprimere le immagini…
Fondamenti del web design: la progettazione
Chi vuole costruire un sito web, dovrebbe essere consapevole dello scopo da raggiungere e delle funzioni che la pagina offrirà. Solo così potrete conferire un aspetto unitario alla vostra pagina. Infatti, nel web design si comincia sempre con la progettazione, che è alla base della realizzazione di ogni sito. A cosa bisogna fare attenzione e a cosa bisognerà dare un maggiore valore? Se investite…
I migliori font per il web: perché i caratteri sicuri per il web sono così importanti
Per font web-safe si intendono quei caratteri che possono essere utilizzati sul web senza problemi. Il fattore chiave qui è se i rispettivi font possono essere visualizzati correttamente dal maggior numero possibile di browser. Scopriamo perché il numero di caratteri sicuri per il web è in costante crescita e perché i font per il web giocano un ruolo così importante per il successo delle aziende…
Sinart CreativeShutterstock Introduzione a YAML
Se desiderate sviluppare una nuova applicazione web, vi troverete certamente dinanzi alla fatidica domanda se scrivere il codice completamente da zero o se, in alternativa, fare affidamento su di un framework. La raccolta di codici YAML contiene una struttura già pronta all’uso, che può essere adattata alle proprie esigenze. Il framework CSS YAML vi mette a disposizione una struttura responsive…
I migliori tool gratuiti per l’analisi del traffico del vostro sito web a confronto
Uno strumento per l’analisi del traffico del sito web vi fornisce una visione d’insieme su quanti visitatori attira un sito e tramite quali canali arrivano alla pagina. Tutto questo è importante per rispondere alle seguenti domande: quanto ha successo una pagina? Conviene avviare una collaborazione? Specialmente nell’ambito dell’analisi della concorrenza è utile controllare il traffico del sito.…