Velocizzare il tuo sito: CSS e Javascript.
Questo articolo continua la serie “Velocizzare il tuo sito” nel precedente capitolo abbiamo visto una serie di nozioni base e strumenti utili da conoscere e utilizzare per i nostri fini, oggi invece affrontiamo il capitolo dedicato all’ottimizzazione dei file CSS e Javascript ai fini di migliorare la velocità di caricamento dei nostri documenti web, cominciamo:
Rendere i File Javascript e CSS esterni
Creare dei file esterni al documento principale e collegarli tramite un link tra i tag head della pagina permette ai file di essere inseriti nella cache e quindi di essere caricati una sola volta e poi rimanere in memoria fino al momento dello svuotamento della stessa, al contrario inserendo CSS e Javascript direttamente nel documento ogni volta che quella pagina verrà richiamata anche questi file dovranno essere scaricati.
Usare librerie su CDN
Possiamo sfruttare i Content Delivery Network per richiamare le librerie Javascript nei nostri documenti web senza doverli hostare in prima persona, questo aumenterà la velocità di caricamento delle stesse, potrete trovare tutte le librerie in CDN come Google API libraries, Microsoft Ajax CDN o CDN js.
Esempio:
<head> ... <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> </head>
Inserendo il codice sopra abbiamo inserito e attivato in un ipotetico documento web la libreria JQuery minimizzata usando il CDN di Google.
File CSS in cima al documento, Javascript in fondo
Il problema di inserire codici o collegamenti a file Javascript all’interno di un documento è che potrebbero bloccare il caricamento da parte del browser della pagina web, la soluzione a questo problema è posizionare il collegamento ai fogli di stile in cima al documento, mentre posizionare gli script in fondo, in questa maniera anche se il browser andrà in contro ad un blocco gli elementi fondamentali della pagina web saranno già caricati e la pagina risulterà navigabile correttamente dall’utente.
<head> ... <link rel="stylesheet" href="stile.css" type="text/css" media="screen" /> </head> <body> ... <script type="text/javascript" src="/js/jquery.min.js"></script> </body>
Unire il più possibile: 1 file è meglio di 4
Se possediamo tanti file CSS, o tante librerie Javascript da far caricare è uso comune dividerli per scopo, uno per gli stili generali, uno per le griglie, uno per il reset etc… questo è corretto dal punto di vista concettuale ma scorretto per chi vuole velocizzare il caricamento delle proprie pagine perchè ogni link a un foglio di stile o libreria esterna è una richiesta che il browser fa al server che ospita questi file aumentando il tempo di caricamento rispetto a uno file unico che ne racchiude tutte le istruzioni necessarie.
Nota:
Se decidiamo comunque di mantenere separati i file CSS è meglio richiamarli nel documento tramite il tag link piuttosto che la proprietà @import.
Usare versioni minified: piccolo è meglio.
Una volta scelte le nostre librerie Javascript e creati i nostri file CSS è meglio farne una copia da conservare per le modifiche e invece creare una versione minified (minimizzata) degli stessi, da usare nel proprio sito.
Minimizzare in contenuti significa in sostanza scrivere lo stesso codice senza spazi e commenti, in maniera da ridurre drasticamente il peso in KB del file.
Per ridurre o comprimere i file Javascript esistono diversi tool online come Javascript Compressor, YUI Compressor, Bananascript o nel caso usiate librerie come Jquery è ancora meglio scaricare direttamente la versione minified.
Per quando riguarda la compressione dei CSS vi rimando a questa raccolta, tool per ottimizzare il proprio foglio di stile .
Meno righe di codice non bastano, si può fare di più.
Vero è che meno righe di codice sono sinonimo di risparmio in termini di KB ma non è la sola cosa da tenere in conto quando si parla di ottimizzazione dei CSS, Scrivere un CSS ottimizzato è una questione di esperienza personale, allenamento, studio e sperimentazioni, è comunque utile sapere che scrivere regole CSS in maniera differente influisce anche sul parametro della velocità di download delle pagine, per esempio un fattore fondamentale è la sintassi delle regole che andiamo a scrivere, banalmente:
li { color:blue; font-size:15px; }
è differente rispetto a
#container ul li {color:blue; font-size:15px;}
La seconda istruzione infatti è più complessa da tradurre da parte di un browser, aumentando il tempo di rendering, a questo proposito vi rimando all’articoloEfficiently rendering CSS del blog CSS-triks nel quale si parla dell’efficenza dei selettori CSS a discesa.
Reset
Altro importante apsetto è il famoso reset degli stili, metodo ormai fondamentale e sicuramente con tanti pregi, ma da usare con cura, ogni elemento di cui andremo ad eseguire il reset inlfuirà negativamente sulla velocità di caricamento della pagina web, per questo molti sconsigliano l’utilizzo del reset universale:
* { margin:0; padding:0; }
Shorthand
Un ottimo metodo per scrivere CSS ottimizzati è la tecnica shorthand, che evita la ripetizione di istruzioni CSS e permette di riassumere diverse proprietà in meno righe di codice ecco alcuni esempi:
Font Shorthand:
font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana,sans-serif font: bold italic small-caps 1em/1.5em verdana,sans-serif
Background Shorthand
background-color: #fff; background-image: url(image.gif); background-repeat: no-repeat; background-position: top left; background: #fff url(image.gif) no-repeat top left
Margin e padding:
margin-top: 2px; margin-right: 1px; margin-bottom: 3px; margin-left: 4px margin: 2px 1px 3px 4px (top, right, bottom, left)
Questi sono solo alcuni esempi delle tante possibilità che offono gli shorthand, per approfondire l’argomento vi segnalo questa guida in inglese che sicuramente vi aiuterà, CSS-Shorthand ,l’articolo in italiano, tradotto dal blog 435 brea street CSS efficienti con l’ uso delle shorthand.
Conclusioni
Anche questo secondo appuntamento è terminato, nel prossimo post della serie andremo ad elencare quali i vantaggi della compressione del codice, gli strumenti e i metodi più utilizzati.
Leggi gli altri articoli della serie:
Concordo su tutto, anche non credi che in alcuni casi, quando il JS è parte fondamentale per comporre il layout della pagina si meglio inserire il JS poco prima della chiusura ? Altrimenti si noterebbero troppi sconvolgimenti della pagina al caricamento iniziale. Non ho mai fatto veri test ma ho questo dubbio, tu che ne pensi?
Ciao Massimo!
Per quello che è la mia esperienza ti posso dire che una vera differenza rispetto al tema javascript la noto quando arrivo su un sito per la prima volta, o quando svuoto la cache del browser, quindi penso anche io che se hai un contenuto javascript molto sostanzioso (per esempio una galleria di immagini) allora posizionarlo in cima o in basso fa una differenza importante, dipende anche dalla mole di codice da caricare oltre il javascript.
Ottimi consigli
confesso che spesso esagero nei selettori CSS.
Io conosco minify:
http://code.google.com/p/minify/
Permette di minififizzare, combinare e cachare più fogli css e javascript (esiste anche un plugin per WP).ù
L’ho provato e sembra che dia buoni risultati.
Non lo conoscevo bella segnalazione Gabri, grazie.