Come comprimere i file CSS per diminuirne il peso e aumentare la velocità di caricamento.

La velocità di caricamento di un sito è diventata da due anni uno dei 200 e passa parametri che Google utilizza per determinare il posizionamento delle pagine nei risultati delle ricerche. Avere un blog che ci mette anche solo una frazione di secondo in meno a caricarsi può voler dire migliorare le SERP e quindi avere più visitatori. Il fattore che incide maggiormente nel rallentare il caricamento delle pagine è soprattutto il numero e le dimensioni delle immagini presenti.

Avere una immagine di sfondo significa avere un sito che viene rallentato anche di due o tre secondi. Pure le immagini che vengono caricate sui singoli post sono una delle cause della lentezza di un sito. Bisogna dire però che Blogger le ottimizza di default quando vengono caricate su Picasa e che si può sempre usare dei tool come Sharper Photo per ridurne il peso. Poi diciamolo con chiarezza. Un blog senza immagini che blog è? Si può monitorare la velocità di caricamento di un sito andando su Strumenti per Webmaster in Prestazioni del Sito oppure su Google Analytics in Velocità Sito che si trova nella sezione Contenuti.

Anche l'abbondanza di widget e di strumenti di navigazione basati su javascript hanno bisogno di un tempo non piccolo per caricarsi. E' quindi opportuno fare una selezione e lasciare solo i gadget e i menù che servono per una maggiore usabilità del sito. Si può anche intervenire sui CSS attraverso dei tool che ne riducano la pesantezza in kilobyte. Si tratta certamente di risparmi non eccelsi ma che vanno comunque nella giusta direzione.

Ricordo che i CSS sono detti anche Fogli di Stile e sono quei codici che vengono incollati in Modello > Modifica HTML > Procedi sopra la riga ]]></b:skin> oppure, nel modulo sulla destra, andando su Modello > Personalizza > Avanzato > Aggiungi CSS.

CSS Drive Compressor è un tool gratuito che permette di diminuire il peso di un CSS semplicemente incollandolo nell'apposito modulo e cliccando su Compress-it!. Ci sono anche diverse opzioni di configurazione per comprimere il codice in modo più o meno intensamente. 

Si può mettere la flag su Light, Normal o Super Compact per avere una compressione leggera, normale o massima. E' anche possibile eliminare o lasciare i commenti dal CSS. Ricordo che i commenti sono delimitati dai segni /* e */ servono agli sviluppatori per illustrare il significato di un parametro. E' anche possibile impostare la lunghezza massima dei commenti da tenere nel CSS.

Dopo il processo ci viene mostrato il guadagno in percentuale che si è realizzato con questa operazione

Come test ho utilizzato il codice del Menù Scorrevole con modalità Normale e ho avuto un guadagno del 23% passando da una dimensione di 1487 bytes a 1141 bytes. Tale codice va selezionato e incollato nel modello al posto del precedente. Prima di procedere a Salvare il modello è opportuno cliccare su Anteprima per vedere se il CSS compresso con CSSDrive Compressor funziona a dovere.