8 modi per analizzare e migliorare le performance del tuo sito web

La performance di un sito web è uno degli aspetti cruciali ed allo stesso tempo più trascurata da progettisti e sviluppatori. Se un sito impiega troppo tempo per caricarsi, l’utente molto probabilmente lo abbandonerà. Ragion per cui, andiamo a vedere quali sono i punti deboli più frequenti di un sito web e soprattutto, come correggerli.

1. Osserva come gli utenti utilizzano ed interagiscono con il tuo sito

Per raggiungere le migliori prestazioni dal vostro sito web, è necessario anzitutto capire esattamente come gli utenti utilizzano e navigare al suo interno. Quali sono dunque le voci di Google Analytics cui prestare particolare attenzione? Ecco una selezione delle più importanti.

Quali sono le pagine di destinazione a maggiore traffico?

Rispondere a questa domanda è fondamentale per ottimizzare la velocità di caricamento delle pagine a maggior traffico. Quando un utente arriva su queste pagine è infatti meno propenso ad andarsene. E noi dobbiamo “facilitargli la vita”  in questo. Quindi: Javascript al minimo su queste pagine!

Quali sono invece le pagine con il tasso di abbandono più elevato?

E soprattutto, perché la maggior parte degli utenti abbandona il sito proprio quando si trova su quelle pagine? Vanno via perché il caricamento della pagina è troppo lento (e per troppo lento intendo dai 4 secondi in su ) o perché hanno completato l’obiettivo (ad esempio, nella pagina è presente un form con una call-to-action)? Analizzare i movimenti degli utenti all’interno del suo sito web, e soprattutto, non prendere i grafici così come sono, ma interpretarne il significato in termini di esperienza dell’utente, è il primo fondamentale passo per poter successivamente sviluppare delle strategie volte al miglioramento delle performance. Il giusto atteggiamento di cui ottimizza un sito è proprio quello di analizzare lo status quo e partire da dati reali.

Quante pagine vengono in media visualizzate da un utente ad ogni visita?

Se maggior parte degli utenti visualizza in media 1 o 2 pagine per visita, possiamo anche fare il refresh dell’intera pagina. Nel caso in cui la media delle pagine visualizzate fosse invece consistente potremmo valutare anche un caricamento in AJAX dei contenuti (anche se ciò potrebbe andare a penalizzare la tracciabilità dei movimenti dell’utente – io personalmente preferisco evitare l’AJAX, tranne in caso di photogallery, mediagallery ecc.).

“Take advantage” dalla fedeltà dei tuoi visitatori

Se il tuo sito ha una base ampia di visitatori di ritorno – ed hanno quindi alcune pagine in cache – hai una possibilità in più di utilizzare file più grandi, video in flash, ecc., perché il tempo di caricamento sarà nettamente inferiore rispetto a chi visita il sito per la prima volta. Ma questa ipotesi è abbastanza rara.

2. Approfitta del caching

Il collo di bottiglia più grande per i siti web è quasi sempre la velocità di download di elementi delle pagine e la conseguente latenza del feedback da parte dell’utente. Quando è possibile saltare questo passaggio (come ad esempio nel caso precedentemente citato del visitatore di ritorno, che ha già alcune pagine in cache) la velocità di download aumenta sensibilmente.

La velocità di caricamento delle pagine è uno dei fattori da non sottovalutare nella progettazione ed implementazione di un sito web, poiché è un parametro che entra in parte nel calcolo del quality score di Google (piccoli consigli per aumentare la velocità di caricamento: evitare filmati flash pesanti, evitare immagini pesanti, usare un codice HTML e CSS pulito e non ridondante, preferire il testo HTML al testo-immagine, ecc.)

Se il nostro sito è appoggiato ad un database, difficilmente riusciremo ad approfittare del caching per tutte le pagine. Ma dove possiamo farlo – cioè nelle pagine statiche – non tiriamoci indietro! 

Esistono comunque dei tool per trarre vantaggio dal caching anche per pagine generate tramite database. Tra questi, cito ad esempio CacheRight.

Divide et impera: meglio più file di un file unico 

Dividere correttamente i file è un’altra azione importante al fine di ottimizzare i tempi di caricamento.
Facciamo un esempio pratico. Prendiamo in considerazione due ipotetiche pagine: una ha bisogno soltanto del Javascript “pippo.js”, l’altra invece soltanto di “pinco.js”. Se noi avessimo un unico file “pallo.js” da utilizzare per entrambe le pagine, il risultato che otterremmo sarebbe quello di rallentare entrambe le pagine, caricando del codice Javascript non necessario al loro corretto funzionamento.
Potremmo testare quanto ho scritto usando un tool free della Pingdom che ci dà un report completo del tempo di caricamento di tutti gli elementi di una determinata pagina.

Cominciate a capire quanti dati preziosi ci vengono offerti da Google Analytics?

3. YSlow

YSlow è un ottimo add-on per Firefox che ogni webmaster dovrebbe usare insieme a Firebug.
YSlow analizza il tuo sito ed attribuisce ad esso un punteggio in base alle sue performance. Puoi vederne una schermata di sintesi che compara le performance di un utente con cache e di uno senza cache.

Con Y-slow puoi individuare i punti deboli del tuo sito ed iniziare a lavorarci.

4. Ottimizza JavaScript e CSS: evita ridondanze e sfrutta le short hand!

Anche ridurre un file di pochi kb può avere una ricaduta positiva quando il tuo sito ha milioni di visitatori al mese.

Poniamo una ipotesi semplicissima. Abbiamo un CSS di 4 Kb (pochissimo, direte voi). E abbiamo una cosa come 50 milioni di visitatori al mese. Questo vuol dire che solo per un CSS di 4kb noi consumiamo una cosa come 2Gb di banda. Ridurlo anche solo di 1kb ci farebbe risparmiare il 25% di banda.
Numeri a parte, un CSS ottimizzato è sempre una buona regola da seguire.

Possiamo anche prenderci la briga di ottimizzare manualmente il CSS, ma esiste un tool on-line che fa questo per noi chiamato CSS Optimizer (anche se non sono fan degli automatismi, questo tool facilita davvero la vita agli webmaster) . La leggibilità del file ottimizzato non è proprio fantastica (vengono eliminate anche le interruzioni di riga…), ma il risultato in termini di peso del file è certo.
In alternativa esiste anche Clean CSS che riduce le dimensioni del CSS, conservandone però la leggibilità.

Anche per i JavaScript, che sono in genere file più pesanti rispetto a quelli dei CSS, esistono dei tool che riducono il peso del file (pensiamo solo alla libreria Jquery…).

YUI Compressor è sicuramente uno dei tool migliori, ma non è facilissimo da usare perchi non ha familiarità con i programmi che si lanciano da riga di comando. Anche JSMin è degno di nota.

5. Parola d’ordine per webdesigner: diminuire le dimensioni delle immagini

Le immagini rappresentano generalmente il cuore di un sito web. Il delicato equilibrio tra qualità e dimensione dell’immagine è stato oggetto di molte discussioni legate allo sviluppo di un sito web.
Alcuni webdesigner tendono ad avere la cattiva abitudine di salvare le proprie immagini come file JPEG a qualità 80%, senza dare un’occhiata alle possibili alternative. Ecco alcuni suggerimenti utili per ridurre il peso delle immagini senza penalizzarne la qualità.

Salva l’immagine in PNG e JPEG e confrontale

I file PNG hanno di solito una dimensione leggermente più grande del file, ma la qualità dell’immagine è sicuramente superiore. Scegli il migliore compromesso tra qualità e peso.

Hai scelto di salvare in JPG? Ho una cattiva notizia per te: hai sbagliato (forse)  !

Forse non sai che esiste un programmino da riga di comando che riduce i file PNG. Pngcrush non sempre riesce a rendere la png inferiore alla jpg, ma di certo rende la scelta un po’ più difficile! Dopo aver elaborato la tua PNG con PNGcrush ripeti il primo passaggio.

Puoi ancora ridurre i tuoi file: pubblicale su server e vai su Smush.it

Smush.it non riduce la qualità delle immagini, ma elimina soltanto i byte inutili (una sorta di compressione), riducendo il peso dell’immagine dall’1% al 45%. Ora siete veramente in grado di poter scegliere.

Ora combina le immagini in una sprite

Ciò significa creare una unica immagine e richiamarne le varie porzioni tramite CSS usando la proprietà del background-position.
In questo modo, il browser farà una sola richiesta (e quindi la pagina si caricherà più rapidamente).
Un ottimo strumento per la creazione di sprite è il CSS Sprites Generator. Ovvio che le sprite vanno create con un certo criterio, raggruppando le immagini a seconda della sezione del sito.

6. Lori, ovvero in quanto tempo si carica la mia pagina web?

Lori è un addon per Firefox molto semplice che visualizza alcune statistiche di vitale importanza nella barra di stato:

• Tempo per il download del primo byte: numero di secondi da quando il browser invia la prima richiesta fino a quando il primo byte viene restituito
• Tempo per il download completo della pagina: numero di secondi da quando il browser invia la prima richiesta fino a quando l’ultimo byte viene restituito
• Dimensioni pagina: quanto pesa la pagina.
• Numero di richieste al server: quante richieste il browser ha inviato al server.

7. Mentre l’utente visualizza la pagina, fai caricare il resto del sito!

Quando un utente atterra su un post di un blog o su una pagina del tuo sito, passerà un minimo di tempo a leggere: tu approfitta di questo lasso di tempo per caricare i contenuti secondari.

Ed ora, a voi!