Com­pri­me­re il codice CSS e mi­glio­ra­re la per­for­man­ce del sito

Una parte im­por­tan­te dell’ot­ti­miz­za­zio­ne dei tempi di ca­ri­ca­men­to delle pagine web è la gestione ef­fi­cien­te dei file CSS. Una com­pres­sio­ne mirata e le migliori pratiche possono mi­glio­ra­re si­gni­fi­ca­ti­va­men­te le pre­sta­zio­ni, con con­se­guen­ti tempi di ca­ri­ca­men­to più rapidi e una migliore espe­rien­za utente.

Cos’è CSS?

Cascading Style Sheets (in italiano “fogli di stile”), co­no­sciu­to so­prat­tut­to con l’ab­bre­via­zio­ne CSS, è un lin­guag­gio con il quale si definisce se­pa­ra­ta­men­te la for­mat­ta­zio­ne dei contenuti del sito, cioè la loro pre­sen­ta­zio­ne, come ad esempio i colori o il layout. I documenti HTML e XML con­ten­go­no solo le in­di­ca­zio­ni sui contenuti e sulla loro struttura all’interno del sito, mentre gli altri elementi relativi alla forma sono stabiliti a parte nei co­sid­det­ti file CSS. Quando si uti­liz­za­no i fogli di stile, il server web deve inol­trar­li al browser insieme ai documenti HTML e ai contenuti mul­ti­me­dia­li integrati (foto, video, ecc.) al momento dell’apertura di una pagina. Questo processo incide sui tempi di ca­ri­ca­men­to del sito.

Più i file CSS sono grandi e complessi, più il vi­si­ta­to­re o la vi­si­ta­tri­ce deve attendere per vi­sua­liz­za­re la pagina per intero. Com­pri­men­do il codice CSS in uso, puoi ridurre no­te­vol­men­te le di­men­sio­ni dei file CSS e mi­glio­ra­re la per­for­man­ce del tuo sito. Un’altra opzione per mi­glio­ra­re i tempi di ca­ri­ca­men­to è at­tra­ver­so il lazy loading, in cui i file CSS vengono caricati solo quando ne­ces­sa­rio. Questo riduce il tempo di ca­ri­ca­men­to iniziale, poiché non tutti i fogli di stile devono essere caricati im­me­dia­ta­men­te, ma solo quando sono ef­fet­ti­va­men­te necessari.

Le pos­si­bi­li­tà di ot­ti­miz­za­zio­ne del codice CSS

Il tempo di ca­ri­ca­men­to di una pagina web acquista con il tempo sempre più im­por­tan­za, so­prat­tut­to per via del crescente utilizzo dei di­spo­si­ti­vi mobili e delle con­nes­sio­ni dati. Allo stesso tempo è aumentato il campo di impiego del codice CSS: infatti, questo lin­guag­gio ricopre sempre più le funzioni di Ja­va­Script. Spe­cial­men­te i template dei CMS come WordPress hanno spesso dei file CSS carichi che ral­len­ta­no inu­til­men­te l’apertura del sito. Per questo motivo, ti forniamo alcuni consigli e trucchi per com­pri­me­re il codice CSS e ridurre i tempi di ca­ri­ca­men­to del tuo sito.

1. Evita di uti­liz­za­re ec­ces­si­va­men­te CSS in linea, cioè l’in­se­ri­men­to del codice di­ret­ta­men­te sul file HTML, a meno che non si tratti dell’in­te­sta­zio­ne della pagina. Lo stesso vale per i tag style, cioè proprietà CSS per­so­na­liz­za­te che dif­fe­ri­sco­no 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 ef­fi­cien­te diverse richieste parallele, il che significa che i singoli file CSS possono essere caricati più ra­pi­da­men­te senza doverli unire prima.
3. Utilizza, quando possibile, ab­bre­via­zio­ni 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 spe­ci­fi­ca­zio­ni. 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 esa­de­ci­ma­le (HEX) al posto di quella RGB.
6. Il selettore uni­ver­sa­le * va uti­liz­za­to solo se veramente in­di­spen­sa­bi­le. Una rap­pre­sen­ta­zio­ne con questo selettore è valida per ogni elemento e quindi il browser deve re­cu­pe­ra­re tutti gli elementi che ne fanno uso.
7. Minimizza il codice CSS, eli­mi­nan­do spazi non necessari, righe vuote e commenti. Per esempio, non serve lasciare uno spazio dopo i due punti o il punto e virgola. Puoi can­cel­la­re anche il punto e virgola finale a con­clu­sio­ne di una lista. Tramite questo processo, il file CSS perde la sua struttura ordinata e la sua chiarezza, però verrà in­ter­pre­ta­to più ve­lo­ce­men­te dal browser.

Dato che la com­pres­sio­ne di un file CSS è com­pli­ca­ta, ricordati di creare una copia di sicurezza del file originale non mi­ni­miz­za­to. Così facendo, potrai anche in seguito apportare piccole modifiche o risolvere gli errori.

Com­pri­me­re il codice CSS: strumenti online gratuiti

Per chi volesse al­leg­ge­rir­si il compito di ot­ti­miz­za­re il codice CSS ma­nual­men­te, ci sono diverse ap­pli­ca­zio­ni web gratuite con cui è possibile mi­ni­miz­za­re i file CSS. Questi strumenti ti ri­spar­mia­no il lavoro faticoso ed eliminano ef­fi­ca­ce­men­te almeno gli spazi, i ta­bu­la­to­ri, i commenti e il ritorno a capo. Anche la con­ver­sio­ne del codice dei colori è rea­liz­za­bi­le con la maggior parte dei programmi. Il risultato può essere di­ret­ta­men­te scaricato come file CSS o copiato e incollato sul tuo file. Ti pre­sen­tia­mo in sintesi tre ap­pli­ca­zio­ni che svolgono queste funzioni.

CSS Minifier

L’ap­pli­ca­zio­ne online CSS Minifier è rag­giun­gi­bi­le alla pagina css­mi­ni­fier.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’ope­ra­zio­ne e puoi copiare il codice di­ret­ta­men­te o sca­ri­car­lo. 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 Com­pres­sor

L’ap­pli­ca­zio­ne web CSS Com­pres­sor si dif­fe­ren­zia da CSS Minifier per la presenza di altre opzioni tra cui scegliere per la com­pres­sio­ne del codice. Richiama il sito cs­scom­pres­sor.com e copia il tuo codice CSS nel campo “CSS Source Code Input”. Ora puoi stabilire il grado di com­pres­sio­ne. Hai la pos­si­bi­li­tà di scegliere tra quattro diverse opzioni pre­con­fi­gu­ra­te, basate sulla leg­gi­bi­li­tà del CSS compresso. Cliccando su “Show advanced options” spunta la casella con le di­men­sio­ni di ot­ti­miz­za­zio­ne de­si­de­ra­te come ad esempio i colori (“Compress colors”) o gli spazi (“Remove un­ne­ces­sa­ry bac­kla­shes”). La com­pres­sio­ne ha inizio cliccando su “Compress”. In più, nel campo “Com­pres­sed Ja­va­Script”, lo strumento fornisce in­for­ma­zio­ni sulle di­men­sio­ni di input e output del tuo file CSS così come la mi­ni­miz­za­zio­ne raggiunta in per­cen­tua­le.

CSS Com­pres­sor di Gil­mei­ster Software

CSS Com­pres­sor di Gil­mei­ster Software è uno strumento gratuito per gli svi­lup­pa­to­ri e le svi­lup­pa­tri­ci web che consente una com­pres­sio­ne facile del codice CSS. Il com­pres­so­re rimuove fa­cil­men­te gli spazi, l’ultimo punto e virgola e i commenti. Secondo il pro­dut­to­re, si può prevedere una riduzione com­ples­si­va fino al 30%.

Tempi di ca­ri­ca­men­to più veloci grazie al CSS ot­ti­miz­za­to

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 di­men­sio­ni dei file CSS. Quando si apre una pagina con un client (browser), devono sempre essere ri­chia­ma­ti e inoltrati tutti i file CSS. Per questo motivo si consiglia di ot­ti­miz­za­re i fogli di stile. Gli strumenti online come quelli il­lu­stra­ti qui per­met­to­no anche a chi muove i primi passi nello sviluppo di web di eliminare in­for­ma­zio­ni non ne­ces­sa­rie dai file CSS. Tuttavia, con questi programmi non è possibile ot­ti­miz­za­re al massimo il codice; per quello devi pensarci tu o ri­vol­ger­ti a un team di esperti.