Migliorare le performance del proprio blog

... o sito, o webspace che dir si voglia! :)

Viene scritto in ogni dove, se vi fate un giro per il web, di come ottimizzare "per la SEO" il proprio spazio web.

SEO, SEO, SEO e ancora SEO, alle volte si trova la dicitura "Web Marketing" abbinata a parole come trucchi, segreti o strategie come se si trattasse di chissà quale alchimia o segretissimo piano. Già mi fà sorridere la parola marketing riferita alle azioni di posizionamento su di una SERP del proprio sito personale figuriamoci tutto il resto.

Ci si è dimenticati di una cosa essenziale: l'utente! Colui il quale spende il proprio tempo, dopo una query su di un motore di ricerca, a leggere quello che abbiamo scritto. (Leggete pure "Il percorso per diventare un blogger" e "La fortuna di essere bannato da AdSense")

Perché allora non spendere un pò del nostro tempo per migliorare la "user experience"?

Tra i tanti parametri ottimizzabili quello a cui più tecnicamente farò riferimento è il Response Time (reattività del nostro sito)

Akamai e JupiterResearch fissano questo limite a 4 secondi (qui il full report).

Come ottenere questo risultato?

Quello che andremo a fare sarà analizzare 3 tool per:

• rendere il proprio sito web più veloce


• debuggare eventuali problemi sia client che server side


• migliorare la resa verso l'utente finale


• migliorare il Web (questo è un punto da miss Italia stile "vorrei la pace tra i popoli")

Di cosa abbiamo bisogno?

Di un browser web meglio se si tratta di FireFox (capirete presto perché) visto che IE non è indispensabile.

Veniamo ai tool...

Yahoo! YSlow

Ovvero l'estensione dell'estensione (ma non è il solo)

YSlow è un addon per firefox, sviluppato da Yahoo!, che sfrutta un'altra extension (FireBug) per effettuare una serie di misurazioni su di una webpage.

Tramite Firebug (disponibile qui) era già possibile debuggare, editare e monitorare CSS, HTML, DOM, e JavaScript di una risorsa web, YSlow prende queste caratteristiche e ne fa un tool per la misurazione delle performance, valutando con un giudizio il risultato ottenuto

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page's performance, summarizes the page's components, displays statistics about the page, and provides tools for performance analysis, including Smush.it™ and JSLint.

WOW! Mi hanno dato una fantastica B :)

Vi faccio notare se già non lo avete fatto che nella combo in alto è stata selezionata la voce "Small Site or Blog", se avessimo scelto la tipologia YSlow (V1 o V2) una D non me l'avrebbe tolta nessuno, questo perché oltre ai parametri utilizzati nel test effettuato su "freeuser" vengono analizzati altri indicatori propri dei siti ad alto indice di traffico come: ETag, CDN e Caching.

Seguire punto per punto tutti gli step suggeriti per migliorare il proprio sito è molto facile. Alcuni, come il non ridurre le immagini in HTML, rientrano nelle best practise per pubblicare contenuti online (oramai qualsiasi sistema di content management offre funzionalità di thumbnail) altre, come quello di personalizzare le pagine di errore (404 in primis) sono facilmente applicabili o via plugin (se usate wordpress ad esempio) o via .htaccess aggiungendo nel file (ovviamente personalizzandole un pò) qualcosa del tipo:

#Custom Error Page
ErrorDocument 403 /403.html
ErrorDocument 404 /404.html
ErrorDocument 500 /500.html

YSlow offre anche la possibilità di avere una visione d'insieme, raggruppata per classi, dei componenti che formano la pagina, con la possibilità di controllare tutta una serie di parametri tra cui il Response Time

Ad una prima analisi salta subito all'occhio che su freeuser i js (109Kb) pesano quasi come le immagini (123Kb) e che per caricare ga.js (Google Analytics) si impiega il 25% dei fatidici 4 seconds load

Come ridurre le chiamate HTTP, il peso dei JS e dei CSS spostando il tutto in file unico in fondo alle pagine per migliorarne il caricamento?

Purtroppo una soluzione univoca non c'è e il tutto si tradurrebbe in una certosina modifica dei JS e dei CSS per venire incontro alle esigenze evidenziate dal tool, però se avete Wordpress penso che WP-Minify possa fare al caso vostro! :)

Google Page Speed

Page Speed (della concorrente Google) è un plugin del tutto simile a YSlow almeno nelle funzionalità base. All'apparenza è molto più spartano e non offre la possibilità di impostare il grado di "profondità" del test, riportando dei risultati molto più schietti ed impietosi (un pò come YSlow in V2).

I triangoli gialli rappresentano le D del precedente tool in rosso ovviamente troviamo le F.

Tutto sommato direte voi poteva andare peggio no? In effetti si, se non consideriamo che step by step ho apportate tutte le migliorie richieste da YSlow, quindi il risultato che vedete fa riferimento ad un freeuser già ottimizzato (o parzialmente tale).

Che altro resta da fare?

Utilizziamo Page Speed come fine tuning per apportare delle ulteriori modifiche:

• Caching: Pur avendo installato WP-Super-Cache, plugin che promette di rendere Digg proof il blog, molte delle risorse pubblicate (dal tema ai link esterni) purtroppo difettano dei parametri di cache expiration necessari al browser per le valutazioni sul download. Trattandosi solo di alcuni elementi (12 in totale) di cui molti appartenenti al tema che sto attualmente utilizzando decido democraticamente di soprassedere :)


• Image Dimension: Alcune immagini (anche queste del tema) risultano essere prive degli attributi di width e height, mancanza che impone al browser di ridimensionare i contenuti man mano che questi vengono scaricati (4 elementi usati in totale 17 volte). Da modificare assolutamente


• Remove unused CSS: Spesso i CSS sono sovrabbondanti di definizioni lasciate lì ai posteri ed inutilizzate. Su freeuser sono circa il 33% del totale (post ottimizzazione meno di 8Kb). Per ora decido di soprassedere :)


• Serve static content from a cookieless domain: ritorniamo al discorso dei CDN di cui al precedente tool. E' vero che i contenuti statici non offrono per loro natura alcuna interazione con l'utente (tranne i web bugs ma su freeuser non ce ne sono!!), è altrettanto vero che togliendo i cookie si ridurrebbero le latenze di caricamento di questi contenuti ma un CDN per sua natura offre questo servizio quindi qualora ne usufruirò prenderò due piccioni con una fava per ora mi tengo Wordpress così com'è :) Se avete Apache e volete approfondire ...

Pagetest

Passiamo ora a Pagetest un tool specifico per Internet Explorer (anche in versione web app)

Per quelli che non vogliono installare tutti questi plugin e che intendono effettuare i test su piattaforma MS, Pagetest fa al caso vostro.

In sostanza offre una serie di informazioni paragonabili in tutto e per tutto a quanto visto fin ora con tre particolarità per quello che riguarda la web app:

• La possibilità di effettuare consecutivamente più volte il test in modo da valutare i dati medi, conseguenza di questo...


• Possiamo paragonare i risultati di primo caricamento con quelli cached per vedere come ed in cosa miglioriano i risultati, in fine...


• Abbiamo la possibilità di scegliere più di un punto di test in modo da controllare come avviene il caricamento delle pagine al variare della banda o della locazione geografica (funzione da migliorare ma sicuramente molto utile)

Un'altra chicca è la possibilità di vedere il caricamento della pagina in un grafico waterfall dettagliato per contenuti:

e per connessioni:

dando evidenza dei senguenti tempi di caricamento:

• Load time: 4,5s (siamo fuori ma ci possiamo accontentare visto che abbiamo tralasciato molte ottimizzazioni) :)


• First byte: 1,2s (questo dato un pò mi preoccupa visto che fa riferimento al backend che gestisco solo in parte, devo ridurre il numero di query!)


• Start render: 3,5s (almeno per quel che riguarda il motore di rendering di IE7)


• HTTP request: 22 (vedi punto 2)


• Total bytes: 295Kb

Concludendo

Alla fine di questa fase di ottimizzazione abbiamo ottenuto la:

• riduzione delle query HTTP: da 27 a 22 -22%


• riduzione del peso della pagina: da 320 a 295Kb -8%


• riduzione del tempo di caricamento: da 15 a 4,5s -330%

Direi non male! Al prossimo post ;)

PS: Ora YSlow mi ha dato una (meritata?) A! :)