Maliziosi! Scommetto che siete arrivati qua pensando che parlassi di SESSO e invece no! Parliamo di "performances" ma non di quelle che si possono ottenere a letto, ma di quelle dei nostri siti. Come sicuramente saprete, google un pò di mesi fa ha detto che la velocità di un sito è un parametro che viene tenuto in considerazione per il posizionamento e la ragione di questa scelta è ovvia: la soglia di attenzione delle persone è in diminuzione, quindi bisogna manifestare i contenuti prima possibile.

Una prima differenza tra il seo e il sesso è che la velocità di esecuzione è inversamente proporzionale alla soddisfazione. (se non sapete distinguere la differenza tra le due attività, siete nel posto sbagliato).

La seconda differenza è... che le dimensioni contano! ...chiaramente mi riferisco alle dimensioni della pagina che viene caricata dal browser, espressa in kilobytes. Più elementi esistono nella pagina più tempo è necessario a mostrare i contenuti all'utente e questo ovviamente incide nella qualità della navigazione. Anche da un punto di vista "monetario" è importante: non bastano contenuti interessanti a trattenere gli utenti, se la navigazione è lenta, l'utente si stufa in fretta ed abbandona la pagina.

Cosa incide sulla lentezza di una pagina ? E come misurarla?

Una pagina web è composta di un numero delimitato di elementi:

  1. Contenuti testuali (testo e codice (x)html)
  2. Immagini
  3. Fogli di stile (css)
  4. Script (javascript)

Tutto qua! Senza entrare nei tecnicismi del protocollo HTTP, quando il browser carica una pagina, legge questi elementi in varie tornate, perchè per una serie di motivi (limitazioni del protocollo, del browser, del server web) non è possibile leggere tutti i contenuti in un colpo solo. Ecco che quindi le performance peggiorano.

Abbiamo però dei validi alleati in vari script che ci aiutano a misurare questi impedimenti, nel caso di google chrome è addirittura integrato ! Basta infatti premere con il tasto destro sulla pagina aperta, selezionare ispeziona elemento, e poi cliccare sul tab "RISORSE" per avere un'idea dei tempi di caricamento di ogni singolo elemento e della dimensione di ogni singolo elemento. WOW!!! E' davvero facile!

[caption id="attachment_444" align="aligncenter" width="300" caption="Capire come vanno le cose non è mai stato così facile"]L'uso
delle risorse in chrome, tramite il pannello
apposito[/caption]

Le gioie del Seo..

...raramente durano a lungo. Infatti questo dato fornito da Chrome è da convalidare, insomma bisogna riprodurlo più volte e poi bisogna analizzare i dati al microscopio per capire come stanno andando le cose.

Importantissimo, quando fate le prove con il misuratore di risorse, usate la modalità "incognito" di Chrome che consente di disattivare tutti i plugin del caso e tralasciare l'uso della Cache. A tutti gli effetti simulate un nuovo utente che entra sulla vostra pagina.

La prima cosa da verificare è la distribuzione dei contenuti, ovvero COSA viene caricato nella benedetta/maledetta home page. E poi faremo lo stesso test anche sulle pagine singole.

[caption id="attachment_445" align="aligncenter" width="504" caption="Oh, ma guarda, penso di avere qualche problema."]gli
elementi della mia home page su
andreascarpetta.com[/caption]

Niente male (sono sarcastico).

  • 125 KB di testi (e vabbè son prolisso).
  • 137 KB  di fogli di stile (urk)
  • 334 KB di immagini (ci può stare...)
  • 809 KB di scripts!!!???

Sant'iddio, cos'e' che si porta dietro tutta questa roba?

  • 137 KB di protype (libreria javascript)
  • 70 KB di jquery (libreria javascript)
  • 67 KB di sansation (è il font che uso per i tag h1 e h2)
  • 37 KB di scriptacolous (libreria javascript)
  • 23 KB di lightbox (libreria per i popup delle immagini)
  • 18 KB per shareolic (libreria per condividere i link sui social media)
  • 17 KB di Cùfon (lo script associato a sansation)
  • 16 KB di Cforms (lo script delle form, ma speravo lo chiamasse solo dove ci sono delle form, non ovunque!)
  • 15 kB di fancybox (per i popup delle immagini, ma allora lightbox?)
  • 11 KB di jsplayer (serve per ... i podcast)
  • 10 KB di google analytics
  • 6 KB di jquery.easing (per fancybox...)

Insommadi roba da caricare ce n'e' un bel pò e secondo me c'e' un sacco di "ritenzione digitale" insomma questa pagina deve dimagrire..

Quindi la prima missione è tagliare via il superfluo. Iniziamo con Fancybox.

[caption id="attachment_448" align="aligncenter" width="479" caption="Comincia la dieta, -400 KB!"]Peso della home page
2[/caption]

Niente male, disattivando un plugin ho tolto 400 KB dalla dimensione originale. Quindi occhio ai plugin di wordpress, che sono tanti carini, ma alcuni occupano un botto di KB a causa delle librerie.

Ok, a questo punto alzo il tiro, sparo su shareolic (detto Sexy Bookmarks) e su Cùfon, che fa apparire i font più carucci.

Round 2! CHIUDIAMO CHROME, riapriamo la modalità incognito (così la nostra cache si resetta, almeno in teoria) e vediamo che succede. (se volete essere sicuri-sicuri, forzate il reload, tenendo premuto SHIFT e nel menu' "visualizza" dovrebbe comparire l'opzione "Forza caricamento" o "Force reload" se usate chrome in inglese)

[caption id="attachment_449" align="aligncenter" width="468" caption="fase 3, un poco meglio, ma non eclatante."]Fase 3 di pulizia
della home
page[/caption]

Ok,ho recuperato un altro pò di leggerezza, ma si può migliorare... bisognerebbe sbarazzarsi di scriptaculous e prototype... se riesco ad identificare quale plugin le usa o le tolgo o mi procuro una versione "compressa" che occupa meno spazio.

In questi casi l'opzione è unica, si disattivano i plugin uno a uno e si vede se le librerie spariscono...

E il colpevole è ...

Lightbox! C'era un altro plugin per gestire i popup delle immagini (che in questo momento non funzionano, cioe' si aprono a pieno schermo), ma in sol colpo sono sparite le librerie JS in eccesso! quasi 200 KB in meno. Ho tolto di torno anche il plugin che segnalava il rank su technorati, tanto chi se lo caga più nel 2010?

[caption id="attachment_451" align="aligncenter" width="484" caption="Ora cominciano a ragionare! "]Alleggerimento home page fase
4[/caption]

Quindi con un pò di analisi e di buon senso, ho dimezzato la dimensione della mia pagina e di conseguenza i tempi di caricamento!

Insaziabile

A me però i lightbox sulle immagini piacciono (sopratutto quando linkano quelle belle immagini enormi) e anche i titoli e sottotitoli belli alternativi, davano un tocco di originalità ad un sito che (solitamente) tratta di cose noiose.

E io (me ne frego e) li rimetto online, però questa volta per i lightbox uso un plugin chiamato Shadowbox e per i font uso i google fonts!

Ecco che quindi la dimensione della pagina ritorna corposa...

[caption id="attachment_453" align="aligncenter" width="506" caption="eh, siamo di nuovo daccapo..."]Ottimizzazione home page fase
5[/caption]

però però... la pagina sembra bella veloce... il cronometro lo conferma! (NB: la vostra esperienza potrebbe variare)

[caption id="attachment_454" align="aligncenter" width="484" caption="Tutto questo in meno di 4 secondi ?!"]La pagina si carica in
meno di 4
secondi![/caption]

Cosa è cambiato ? Ho esternalizzato dei dati!

  • La libreria jquery viene ora letta dai Datacenter di Google
  • I font aggiuntivi idem!

In sostanza ho iniziato a sfruttare dei "siti esterni" su cui ho relegato i dati di uso comune, questo ha due vantaggi molto importanti:

  • Ho alleggerito il carico del mio server, che ora deve soddisfare meno richieste e quindi fa comparire prima i dati. E quindi per forza di cose consumerò meno banda.
  • Sto usando dei dati "usati da molte persone" quindi la possibilità che un utente li abbia già in cache aumenta ancora di più la velocità di caricamento del sito.

E' il principio del Content Delivery Network. (ecco la definizione su wikipedia) ovvero sia, "distribuisco" i miei dati su diversi server e poi ci pensa il network a soddisfare le richieste di chicchesia, moltiplicando le prestazioni.

Il principio può essere ulteriormente evoluto, duplicando parte delle mie informazioni sul CDN, per esempio usandolo come archivio remoto delle immagini o dei contenuti multimediali.

Restate sintonizzati per la parte DUE, dove spiegherò come ho realizzato il collegamento di questo wordpress ad una CDN e vedremo assieme se c'e' un incremento effettivo delle prestazioni.