Pubblicato il 11/01/12e aggiornato il

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. 

css-drive-compressor

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

css-compressor-comprimere-file

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.





7 commenti :

  1. provato ma il codice non funziona...è vero che però ho inserito gran parte del codice css tutto insieme....devo riprovare pezzo per pezzo; effettivamente il difetto del mio blog è proprio la lentezza! Sto seguendo da poco questo blog fantastico ed ogni articolo mi stupisce...grazie per il suggerimento su google friend per le newsletter..incredibile, non lo conoscevo eppure avevo il widget (di default)nel blog!

    RispondiElimina
  2. come si modifica il commento prima del form commenti?vedo che ci hai inserito del codice...

    RispondiElimina
    Risposte
    1. Queste personalizzazioni attualmente sono tutte saltate comunque per farti una idea ...
      http://www.ideepercomputeredinternet.com/2012/01/come-modificare-e-personalizzare-il.html

      Elimina
  3. Scusami non ho inteso: devo copiare tutto ciò che è al di sopra di:
    ]]>

    e copiarlo in:
    http://www.cssdrive.com/

    e poi comprimerlo per poi ricopialo al posto di origine?

    grazie

    RispondiElimina
  4. @francesco_qci_
    No. Sarebbe troppo rischioso. Questo è consigliabile farlo quando si deve incollare del codice sopra a quella riga che delimita appunto i CSS. Prima di incollarlo è bene compattarlo per renderlo più veloce.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.