Possiamo affermare con un margine di errore minimo che circa l’80% del tempo di caricamento di un sito web sia ormai dovuto alle immagini, agli scripts, ai fogli stile ecc… Come facciamo quindi a fare in modo che il tempo di caricamento del nostro sito si riduca per esssere più competitivi e meglio posizionati in Google?
Innanzitutto è bene procurarsi gli strumenti necessari per calcolare la velocità di caricamento; possiamo avvalerci delle estensioni per Firefox:
oppure utilizzare un servizio online che calcola i tempi di caricamento da varie parti del pianeta
Sinceramente credo che l’accoppiata Firefox+Firebug (con PageSpeed e Yslow) sia decisamente più valida!
Una volta in possesso degli strumenti per fare la nostra analisi possiamo vedere alcuni semplici step da tenere a mente per ottimizzare il nostro lavoro di “velocizzazione”!
Ci sono 3 fattori in cui si possono riassumere tutti i risultati forniti da Yslow e Firebug:
1. Ridurre il numero di richieste effettuate al server per i files
Richiedere al server meno files significa ridurre i tempi di caricamento. Spesso ci capita di avere ad esempio a che fare con più file javascript o css che per molte ragioni preferiamo tenere separati? Ebbene, utilizzando PHP Minify possiamo ovviare a questo problema, questo script infatti prende tutti i .js e .css che abbiamo e li concatena in un unico file preservandone l’ordine corretto!
<!-- Tipica inclusione di script --> <script src="/_scripts/file1.js"></script> <script src="/_scripts/file2.js"></script> <script src="/_scripts/file2.js"></script> <!-- Usando PHP Minify, diventano così --> <!-- http://code.google.com/p/minify/ --> <script src="/_min/b=_scripts&f=file1.js,file2.js,file.js"></script>
Da questa operazione ne otteniamo 2 benefici: una riduzione del numero di downloads da effettuare e manteniamo inalterati nostri script e fogli stile senza doverci preoccupare di quello che fa PHP minify, il quale ogni volta che faremo una modifica provvederà a rieffettuare la compressione da sè!
Un altro aspetto più strettamente legato al css riguarda invece i css sprites, una tecnica che permette, utilizzando una sola immagine e la proprietà background-position, di realizzare menù-titoli evitando, appunto, di creare un’immagine differente per ogni elemento. Questa tecnica richiede tuttavia delle conoscenze che i vostri clienti potrebbero non avere, valutate bene di fornire loro tutte le indicazioni necessarie per modificare uno sprite oppure evitate di utilizzarli laddove il cliente ci metterà per forza le mani!
2. Download di più files contemporaneamente
I browser di default cercano di scaricare parallelamente quanti più files possibile. I browser più recenti permettono il download simultaneo di 6 files per hostname. Tuttavia, mentre il browser sta scaricando uno script non eseguirà alcun altro download finchè non avrà terminato. La soluzione ottimale è quindi quella di mettere i nostri fogli stile ad inizio pagina e lasciare il caricamento dei files javascript in coda!
Appena possiamo appoggiarci a degli host esterni inoltre facciamolo! Prendiamo il caso di jQuery; Google mette a disposizione la possibilità di richiamare da un url remoto le librerie più in voga del momento.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Utilizzando questo sistema, se il browser di un utente avesse già scaricato queste (nella cache) visitando un altro sito non dovrebbe riscaricarle nuovamente. Se invece non le avesse salvate ne trarrebbe comunque beneficio in quanto vengono servite direttamente dal server geograficamente più vicino al computer in uso.
3. Mantenere più files possibili nella cache
Se hai già scaricato un file non devi scaricarlo una seconda volta, questo è la sostanza del concetto chiave del rapporto cache e velocità di un sito.
Con delle semplici righe di codice da aggiungere al file .htaccess (assicuratevi sempre, quando scegliete un host per il vostro sito, che vi permetta di utilizzare tutte le funzioni del file .htaccess, vi torneranno molto utili! Ahimè il famigerato Aruba, che molti utilizzano per la sua convenienza, non permette di effettuare praticamente alcuna operazione su questo file importantissimo!
# Aggiungere al file .htaccess FileETag none ExpiresActive On ExpiresDefault A0 ExpiresByType image/gif A2592000 ExpiresByType image/png A2592000 ExpiresByType image/jpg A2592000 ExpiresByType image/jpeg A2592000 ExpiresByType image/ico A2592000 ExpiresByType text/css A2592000 ExpiresByType text/javascript A2592000 ExpiresByType application/x-javascript A2592000
Nel caso il codice per gli eTags non funzionasse utilizzate la seguente sintassi
<ifModule mod_headers.c> Header unset ETag </ifModule> FileETag None
Il codice riportato qui sopra setta il termine di scadenza per immagini, css e scripts a 30 giorni dalla data del primo caricamento. Inoltre dice ad Apache di rimuovere gli ETags, un identificatore che spesso complica il processo di caching. Oltre ad aumentare la velocità di caricamento del sito, tutto ciò vi permetterà di risparmiare sui costi della banda per siti ad alto traffico. L’unica raccomandazione è di non usare tempi troppo lunghi e soprattutto di prestare attenzione alle durate che settate sui vari tipi di files, infatti rischiereste che, nel caso infatti aggiornaste un file con lo stesso nome, il visitatore che non avesse svuotato la cache non ne vedrebbe le modifiche.
Tutte queste piccole accortezze vi richiederanno al massimo un’ora di tempo ma vi porteranno ad ottenere dei risultati davvero soddisfacenti!
