Avete costruito il vostro sito in ogni sua parte. Con un po’ di tempo e di esperienza, siete anche riusciti a ottimizzare il codice php e le query di connessione al database – che rappresentano i due elementi fondamentali per la buona costruzione di un sito.
A un certo punto, però, vi accorgete che nel pc degli utenti il vostro sito risente in alcuni casi dei rallentamenti. Quello che per voi era un codice «perfetto» (una parola che non si dovrebbe mai usare nella programmazione) in realtà ha degli scogli che gli utenti si trovano a dover aggirare.
Provate a immaginare un ecommerce complesso: centinaia di prodotti nello store e migliaia di query processate ogni giorno; se il sito è visitato, le pagine aperte dall’utente possono essere decine. Con il tempo sempre più agli sgoccioli in quest’Era moderna, l’utente non ha la pazienza per aspettare che una pagina pesante si carichi del tutto o che la sua adsl (se la possiede) superi i blocchi di linea che ogni tanto si presentano in Italia.
Nella peggiore delle ipotesi, potrebbe decidere di abbandonare il sito e cercare un altro negozio online.
C’è altro che possiamo fare per velocizzare l’apertura delle pagine del nostro sito?
La risposta, naturalmente, è affermativa: c’è sempre qualcosa da imparare e da migliorare.
In questo articolo vi propongo alcuni spunti di sbocco e alcune accortezze da seguire per ridurre al minimo i tempi di caricamento della pagina lato utente.
Teniamo presente, comunque, che esistono online ottimi strumenti per monitorare la velocità delle nostre pagine e capire dove mettere le mani per migliorare. Uno di questi strumenti è il Page Speed di Google: basta inserire l’url del sito e avrete una lista di “problemi” che stanno indigesti al più grande motore di ricerca e che pertanto dovrebbero essere risolti il prima possibile.
Accortezze generali
Prima di entrare in “fase avanzata”, vediamo qualche linea di base da seguire nella costruzione di un qualsiasi sito internet. Se avete qualche anno di esperienza nel settore probabilmente avrete già evaso tutti o quasi i seguenti punti, ma una ripassata non fa mai male.
Cito i punti senza addentrarmi nella questione, perché potete facilmente informarvi con una ricerca online.
– Usare i CSS Sprites per le immagini, ovvero combinare le immagini di sfondo in un’unica immagine e usare le direttive “background-image” e “background-position” per mostrare il segmento voluto.
– Usare un sistema di caching (vedi sotto).
– Usare la compressione delle pagine (vedi sotto).
– Mettere i fogli di stile in alto nella pagina: in questo modo le pagine si renderizzano progressivamente.
– Quando possibile, mettere i javascript in basso nella pagina.
– Quando possibile, evitare stili in linea e javascript nella pagina: meglio caricare css e javascript da file esterni.
– Quando possibile, evitare i redirect 301 e 302.
– Nelle chiamate Ajax al di sotto dei 2K di dati, usare GET anziché POST: con i POST, infatti, prima invia l’header e poi i dati; invece con i GET invia un unico pacchetto.
– Ridurre il più possibile le dimensioni dei cookies.
Htaccess e html – Abilitare il caching delle pagine
Abilitando il sistema di headers caching, se un utente torna a visitare il nostro sito eviterà di scaricare di nuovo le risorse – con ovvio incremento di prestazioni e di velocità.
Il sistema di caching andrebbe applicato a tutti gli elementi statici: immagini, js, css, pdf, media files, ecc.
La cosa migliore è settare il tempo di “Expires”, cioè il periodo dopo il quale le risorse vengono di nuovo scaricate, da un minimo di una settimana a un massimo di un anno (oltre un anno non è consigliabile).
Impostando il tempo nei metatag “Expires” oppure “Cache-Control: max-age”, il browser eviterà di controllare nel web server la disponibilità di nuove versioni dell’elemento.
Con il seguente metatag si abiliterà il caching delle pagine:
1 |
<meta http-equiv="Cache-control" content="public">
|
Il valore “public” significa che le risorse saranno messe in una cache pubblica. All’occorrenza il valore può essere sostituito con “private” (=cache privata) oppure “no-cache” (=la pagina non viene messa in cache).
Entriamo più nello specifico.
Copiate il seguente codice nell’htaccess: in questo modo si abiliterà l’expires per gli elementi “statici” della pagina. Nel seguente esempio, dopo 1 settimana (604800 secondi) gli elementi saranno scaricati di nuovo:
1 2 3 4 |
# caching 1 settimana (in secondi) <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=604800, public" </FilesMatch> |
Compressione delle pagine con php
Nota: i file già compressi non hanno bisogno di compressione, per cui se possibile evitare di comprimere file come mp3, zip, ecc.
Usando un sistema di compressione delle pagine, si può velocizzare (a volte di molto) il tempo di risposta HTTP. L’header “Accept-Econding” supporta la compressione tramite gzip e deflate.
In pratica, grazie a questo header, il browser invia la richiesta “Accept-Encoding: gzip, deflate” e il server risponderà con “Contenet-Encoding: gzip”; se il server non invia questa risposta, allora qualcosa è andato storto.
Gzip è il più efficiente (può ridurre fino al 70% le dimensioni di risposta) rispetto a deflate.
Prima di tutto occorre verificare che il server che ospita il nostro sito supporti la libreria gzip. In PHP basta lanciare il comando phpinfo() e controllare se il modulo “mod_gzip” (la libreria “zlib”) è abilitato.
A questo punto, in ogni nostra pagina e, prima di qualsiasi altro codice, dobbiamo far uso dell’ob_start e dell’ob_gzhandler in modo che richiedano la compressione:
1 |
ob_start( 'ob_gzhandler' ); |
Un modo più sicuro è far controllare a php se sia possibile abilitare la compressione; in caso contrario lanciare un comune ob_start:
1 2 3 4 5 |
if(substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')){ ob_start('ob_gzhandler'); }else{ ob_start(); } |
Subito dopo aver effettuate le modifiche, un modo per testare se il sito ha preso correttamente la compressione è passare il link della pagina a un tool dedicato per questo tipo di monitoraggio. Uno degli strumenti lo mette a disposizione GIDZipTest.
Se il codice è stato correttamente settato, la risposta mostrerà tra gli header il tipo di compressione (voce “content-encoding”).
Comprimere determinati tipi di file con htaccess
In questo caso il server deve avere abilitato il modulo “mod_deflate” (controllate lanciando sempre phpinfo()).
Inserire nell’htaccess i seguenti codici:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
# per comprire i file di tipo text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript # per comprire i file con estensione .html: <files *.html> SetOutputFilter DEFLATE </files> |
