Qualche giorno fa abbiamo analizzato alcuni strumenti che abbiamo a disposizione per migliorare la velocità dei nostri siti. Oggi vi voglio mostrare come abbiamo usato questi strumenti per individuare i colli di bottiglia ed i risultati che abbiamo ottenuto ponendovi rimedio.
Modifiche alle richieste DNS
Ci sono alcuni fattori messi in evidenza da Page Speed e YSlow che riguardano le richieste DNS e alcune di loro sono in contraddizione tra loro:
- Ridurre al minimo il numero di richieste DNS (Minimize DNS lookups)
- Parallelizzare i download su hostname multipli (Parallelize downloads across hostnames)
- Servire i contenuti statici da un dominio privo di cookie (Serve static content from a cookieless domain)
Ridurre al minimo il numero di richieste DNS
Questo punto è abbastanza semplice. Meno richieste ai DNS dovrà fare il visitatore, maggiore sarà la velocità di risposta del browser. Se tutti i nostri contenuti sono ospitati su un singolo dominio il browser dovrà effettuare una sola richiesta. E’ importante notare che seppure sia vero che i DNS in genere hanno tempi di risposta veloci, questo non vuol dire che non ha importanza ridurre le richieste al minimo. Infatti fintanto che il dominio non viene “risolto”, nessuna richiesta partirà dal browser.
E’ quindi importante avere dei DNS con buoni tempi di risposta come i Google Public DNS o gli OpenDNS, ma queste sono cose di cui si deve preoccupare il visitatore e vanno al di là della nostra sfera di azione.
Quello che possiamo fare è appunto evitare quanto più possibile di includere contenuti da altri domini. Chiaramente se da un certo dominio carico molti contenuti, il peso di una richiesta DNS aggiuntiva è accettabile, mentre per un solo contenuto non ne vale la pena.
Parallelizzare i download su hostname multipli
Ed ecco la prima contraddizione. Abbiamo appena finito di dire che dobbiamo minimizzare le richieste DNS e ora il consiglio diventa di aumentare i nomi a dominio delle richieste?
In effetti anche avere più nomi a dominio ha i suoi vantaggi. Tutti i browser hanno dei limiti sul numero di richieste che possono effettuare contemporaneamente e questi limiti si applicano dominio per dominio (iniziate a capire dove voglio arrivare?). Se su una pagina del nostro sito abbiamo 30 immagini, tutte ospitate dal domino aaa.com, allora ci vorrà un po’ di tempo a scaricarle tutte se lo si può fare solo a 4 per volta (numero arbitrario). Se invece le immagini si trovano sparse su aaa.com, bbb.com e ccc.com, allora il browser potrà scaricarne 12 per volta (4 da ciascuno dei domini). Ovviamente per ottenere questo risultato non dobbiamo per forza comprare 3 domini ma possiamo usare dei sottodomini come files1.miosito.it, files2.miosito.it etc…
L’importante è non esagerare e il mio suggerimento è di non metterne mai più di 3, e possibilmente meno nei casi di siti con pochi contenuti statici.
Servire i contenuti statici da un dominio privo di cookie
I cookie vengono utilizzati per inviare delle informazioni al server con ogni richiesta, ma nella maggior parte dei casi è inutile inviarli anche insieme alle richieste per i contenuti statici come immagini, file javascript e css e altro. Se abbiamo utilizzato sottodomini per i contenuti statici, come suggerito nel punto precedente, allora assicurandoci che i cookie non vengano inviati anche per questi sottodomini possiamo ridurre la dimensione delle richieste HTTP.
Cosa dobbiamo controllare? Il dominio dei cookie deve essere impostato sul solo nome esatto del domino ovvero ad esempio “miosito.it” o “www.miosito.it” e NON “.miosito.it” (notare il punto iniziale).
Performance del rendering del browser
La velocità di un sito non si misura solo nel tempo richiesto per scaricare tutti i contenuti, ma anche nel tempo richiesto dal browser per mostrare la versione definitiva della pagina web e al riguardo Page Speed ci da alcuni consigli:
- Usare selettori CSS efficienti (Use efficient CSS selectors)
- Specificare le dimensioni delle immagini (Specify image dimensions)
Usare selettori CSS efficienti
Possiamo semplificare il lavoro al browser, per quanto riguarda l’applicazione dei fogli di stile, semplificando le regole usate nei CSS. Regole più complesse richiedono più tempo per essere applicate e nei casi peggiori possono dare l’impressione di un sito pesante.
Alcuni esempi:
/* gli id come #title sono comunque univoci, non ha senso specificare un eventuale padre */
.header #title { /* ... */ }
/* semplificato diventa */
#title { /* ... */ }
/* i td devono per forza essere figli dei tr e delle table */
table tr td { /* ... */ }
/* semplificato diventa */
td { /* ... */ }
e così via. Page Speed ci può mostrare le regole più complesse che può valer la pena di ottimizzare.
Specificare le dimensioni delle immagini
I browser sono in grado di calcolare da soli la dimensione corretta di un’immagine, questo è vero, ma non possono farlo fino a quando l’immagine non è stata scaricata e cosa succede al sito ogni volta che viene scaricata una delle immagini? Il layout viene ricalcolato in base alle dimensioni ottenute e quindi tutto il rendering della pagina viene rifatto. Lo si può notare in alcuni siti in cui la pagina continua a “muoversi” fino a quando non ha terminato completamente il caricamento. Se invece le dimensioni vengono specificate inline nel tag <img>, le dimensioni saranno corrette fin da subito, alleggerendo il carico del browser e evitanto il mal di mare al navigatore (dovevo dirlo).
Ottimizzare i download
Infine le ottimizzazioni da fare per quanto riguarda i download sono:
- Abilitare la compressione (Enable compression)
- Minificare JavaScript/CSS (Minify JavaScript/CSS)
- Ottimizzazione delle immagini (Optimize images)
- Utilizzare la cache del browser (Leverage browser caching)
Abilitare la compressione
I browser possono ricevere contenuti compressi se il server li offre. Il modo più semplice per attivare la compressione in apache è tramite qualche riga nel file .htaccess
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript
Da notare che non vale la pena comprimere tutti i tipi di contenuto per cui conviene attivarlo solo su alcuni mime types.
Minificare JavaScript/CSS
Non sono un grande fan di questa tecnica che a mio avviso non ha quasi nessune senso, se non nel caso in cui la compressione non sia supportata dal browser del visitatore. Altrimenti la compressione ottiene già il massimo dell’effetto di riduzione del download.
PageSpeed rende comunque molto rapida questa operazione, fornendo la versione minificata con JsMin direttamente dalla sua interfaccia.
Ottimizzazione delle immagini
In ogni immagine ci sono una quantità di dati (i metadati) che contengono informazioni aggiuntive che possono essere rimosse per ottimizzarne le dimensioni. Alcuni formati supportano la compressione internamente, ma non è detto che sia stata attivata. E anche scegliere il formato corretto delle immagini a seconda del contenuto gioca un ruolo importante.
In questo caso YSlow con la sua integrazione con Smush.it risulta più comodo, dato che è in grado di mandarci su una pagina del servizio di yahoo in cui ci mostrerà in maniera chiarissimo quanti KB possiamo risparmiare sostituendo le immagini del nostro sito con le alternative da lui proposte e scaricabili comodamente in un archivio zip
Utilizzare la cache del browser
Ci sono molti modi per fare in modo che le risorse vengano conservate dal browser in una sua cache interna in modo da non scaricarle ad ogni visita. Uno dei più semplici prevede l’uso degli Etag, ovvero una sorta di riferimento univoco che viene comunicato al browser insieme a ogni contenuto statico e che quando cambia fa si che il browser capisca che quella risorsa è stata modificata e va quindi riscaricata.
Li possiamo attivare su apache con una semplice istruzione nel nostro .htaccess
FileETag MTime Size
Conclusioni
Prese singolarmente queste modifiche forse non sembrano fare granché, ma una volta applicate possono fare la differenza tra un sito lento e uno veloce e possono anche farci risparmiare qualche cosa nel consumo di banda del nostro hosting
Ti invitiamo a verificare con mano i risultati di Page Speed e YSlow sui nostri portali Artera, HostingMag e JoomlaProvider per vedere queste tecniche messe all’opera.
