Le prestazioni di un sito web spesso si misurano in quantità di dati scaricati. Cosa buona e giusta, perchè l’ottimizzazione passa anche per cercare di far visualizzare lo stesso contenuto con la quantità minore di bit inviati dal server al client. Se usiamo un header con una scritta abbastanza semplice, usiamo del testo invece di un’immagine.
Piccole cose che nel complesso aiutano i visitatori a visualizzare più velocemente le pagine, stressano di meno il server e rendono la navigazione più piacevole, accrescendo la possibilità di fidelizzare l’utenza.
Oltre la quantità di dati è bene tenere sott’occhio anche il numero di richieste che riceve il server. Quando richiediamo via browser una pagina web questa verrà caricata con tutti i file necessari alla sua visualizzazione. Ogni immagine contenuta è una richiesta aggiuntiva, così come per ogni foglio di stile e file javascript incluso. Tempo fa abbiamo visto come ovviare alla marea di richiesta http che possono attivarsi per richiamare tutte le immagini usate come elementi decorativi tramite la tecnica del CSS sprites. Oggi vediamo qualcosa di molto più semplice, ma altrettanto potente come soluzione.
Capita spesso che si abbiano fra i tag del head più file CSS. Questo fa avviare una chiamata per ogni file. Il problema può poi essere maggiore nel caso in cui andiamo a richiamare CSS da altri host. Vediamo in codice l’esempio.
<link rel="stylesheet" type="text/css" media="all" href="http://www.example.com/style.css " />
<link rel="stylesheet" type="text/css" media="all" href="http://www.example.com/css.css " />
<link rel="stylesheet" type="text/css" media="all" href="http://www.othersite.com/othersite.css " />
Perchè tre file quando possiamo caricarne uno solo che contenga tutto? Facciamolo allora. In un unico file inseriamo il codice presente nei file style.css e css.css. Se siamo sicuri che il codice del file othersite.css, che risiede su un altro host, non cambi ad eventi particolari, possiamo aggiungere all’unico file anche quelle righe.
Lo stesso discorso vale per i file di codice javascript. E la cosa avviene piuttosto spesso.
<script type="text/javascript" src="http://www.example.com/myscript.js"></script>
<script type="text/javascript" src="http://www.example.com/mootools.js"></script>
<script type="text/javascript" src="http://www.example.com/effect.js"></script>
Stesso discorso fatto per i CSS. Unico file con tutto il codice. in definitiva avremo ottimizzato il codice diminuendo di 4 chiamate http il loading completo della pagina. Ma possiamo fare di più per velocizzare il loading della pagina! Se non abbiamo interesse ad eseguire codice javascript al loading della pagina, è buona norma includere i file relativi alla fine del codice. Poco prima del tag di chiusura del </body>. In questo modo il browser caricherà velocemente tutte le intestazioni con le relative direttive di stile, applicandole automaticamente dal momento in cui comincia ad interpretare il body della pagina.
Solo in ultimo verranno caricate le funzioni javascript, che essendo di solito necessarie a favorire l’interazione utente <=> pagina possono aspettare il completo caricamento del contenuto con cui poi si interfacceranno via input dell’utente.
Un ultimo consiglio. Se vi trovate ad avere la situazione descritta sopra e volete applicare i suggerimenti di cui sopra fate attenzione a come includete il contenuto nell’unico file di destinazione. Non dimenticate mai che il codice HTML viene interpretato from top to bottom. Quindi per evitare qualsiasi tipo di problema è meglio copiare il contenuto dei file nello stesso ordine con cui ora li state richiamando.