Chi ha visitato di recente la pagina webmaster tools di Google avrà notato che è da un po’ di tempo che WT propone la sezione “velocità del sito” ed in questa sezione si fa riferimento ad un plugin per Firefox (e che si appoggia a Firebug) dal nome Pagespeed. Nota: è da ieri che è uscita la versione 1.6 beta per Firefox 3.6.
Quando Google consiglia una cosa in genere è perchè la ritiene molto utile e quindi vale la pena studiarla. Pagespeed non è difficile da installare ma per il corretto funzionamento richiede come già detto l’installazione di un altro comodissimo plugin Firebug davvero utile agli sviluppatori.
Per attivare Pagespeed è sufficiente fare clic sulla icona di Firebug (in genere posta in basso a destra) nella status bar del browser Firefox, selezionare l’opportuna scheda e premere il pulsante Analize Perfomance.Lo scopo principale di Pagespeed oltre ad aiutarvi a rilevare qualche errore è quello di ottimizzare in termini di velocità il vostro sito web.
Prendiamo come esempio il sito web http://www.clicfoto.it. Porto questo sito come esempio in quanto ha una struttura un po’ complessa e questo porta sicuramente ad una maggiore necessità di ottimizzazione. Inoltre è realizzato con un uso di CSS e table e non solamente con l’uso di tag div.
Effettuando l’analisi con pagespeed ottengo i seguenti risultati:
L’indice di velocità complessivo è di 77/100 ed il messaggio è “Significant performance improvement are possible”
In primo luogo possiamo vedere qualche segnalazione “grave” mostrata in rosso e altre segnalazioni di media entità segnalate in giallo.
Ad esempio segnalate come “grave”:
- Leverage browser caching
- Combine external JavaScript
- Specify image dimensions
- Parallelize downloads across hostnames
Segnalate come “warning”:
- Combine external CSS
- Leverage proxy caching
- Serve static content from a cookieless domain
- Use efficient CSS selectors
In linea teorica possiamo intervenire su tutte le segnalazioni, ma nella pratica dei fatti può essere molto impegnativo risolvere tutti i problemi.
I problemi evidenziati possono (o devono) essere risolti su due livelli:
- Livello di configurazione del server
- Livello di ottimizzazione delle pagine web.
Correzione dell’errore Leverage browser caching
L’errore Leverage browser caching può essere risolto a livello di configurazione di Apache attraverso l’uso del modulo mod_expires.
Verificate di avere nel vostro httpd.conf la linea:
LoadModule expires_module modules/mod_expires.so
Che consente ad apache di utilizzare alcuni meccanismi di caching. Dopodichè nella configurazione del vostro VirtualHost dovete andare ad aggiungere qualche informazione del tipo:
<Directory /home/percorsodelmiosito/images >
ExpiresActive On
ExpiresDefault "access plus 1 month"
</Directory>
<Directory /home/percorsodelmiosito/css >
ExpiresActive On
ExpiresDefault "access plus 1 month"
</Directory>
In questo modo specificate al browser che i file contenuti nelle directory “css” ed “images” non sono soggetti a cambiamenti e Firefox eviterà di ricaricarli.
Ovviamente questo tipo di ottimizzazione è possibile farla solamente se disponete di un hosting che vi consente di lavorare a livello professionale. In genere queste configurazioni non sono disponibile per gli hosting di tipo “economico”
Correzione dell’errore Parallelize downloads across hostnames
Anche questa correzione è possibile effettuarla solamente a livello di server. In pratica sono necessari almeno due “hosting” uno che fornisce il contenuto statico e l’altro quello dinamico. Tutte le immagini statiche dovrebbero essere spostate su un hosting statico del tipo static.clicfoto.it e tutti i percorsi alle immagini saranno del tipo src=”http://static.clicfoto.it/images/mia-immagine” (il link indicato non funziona è solo un esempio).
Correzione Serve static content from a cookieless domain
Questo errore si collega al precedente e può essere risolto nello stesso modo. Nel caso di un sito dinamico come ad esempio http://www.clicfoto.it viene settato un cookie per gestire la sessione. Il consiglio riportato è di fornire tutti i contenuti statici da un hosting parallelo che non setta cookie.
Correzione dell’errore Combine external JavaScript
La correzione di questo errore avviene a livello di programmazione della pagina web. E’ buona norma unire tutti i file javascript in un’unico file: in tal modo il parsing degli script è molto più veloce. Sebbene questa pratica non sia difficile da implementare risulta molto scomoda per i programmatori in quanto dividere gli script in varie parti facilita in genere il debug e l’aggiornamento a nuove versione.
Correzione dell’errore Combine external CSS
Analogamente a quanto specificato per i javascript la stessa operazione può essere fatta sui fogli di stile.
Correzione dell’errore Specify image dimensions
Questo è facilissimo da risolvere in tutti i tags img bisognerebbe sempre specificare l’altezza e la larghezza. In questo modo il broser limita i calcoli da fare per il ridimensionamento dell’immagine in quanto si trova già le dimensioni in termini di altezza e larghezza da raggiungere.
Correzione dell’errore Use efficient CSS selectors
Il consiglio in questo caso è di evitare di utilizzare selettori css troppo innestati ad esempio evitare #primostile #secondostile #terzostile. Lo strumento Pagespeed fornisce informazioni su quali selettori sono inefficienti nella pagina.
Personalmente cerco di limitare a due selettori la maggiorparte dei DIV anche se questo non è sempre possibile.
Analisi post ottimizzazione
Dopo aver fatto qualche ottimizzazione al sito http://www.clicfoto.it il risultato è questo:
Il punteggio in termini di velocità è: 82/100 è il messaggio di Pagespeed è: “Moderate performance improvements are possibile”. Questo risultato è stato ottenuto utilizzando solamente le correzioni di “Leverage browser caching” e di “Leverage proxy caching” ovviamente è possibile migliorare ancora, ma il risultato è già abbastanza soddisfacente!