Google Webmaster Tools possiede una interessante funzione (nella sezione FUNZIONI SPERIMENTALI -> PRESTAZIONI DEL SITO), che permette di monitorare il tempo di caricamento del vostro sito web.

Il sistema analizza qualche decina di pagine casuali, e fa una media dei tempi di caricamento.

Come ci mostra questo grafico di KissMetrics, la percentuale di utenti che decidono di abbandonare il vostro sito, prima che questo abbia finito il caricamento, aumenta drasticamente col passare dei secondi.

Sfondi che pesano 1MB ed oltre, suoni (evitate le musice di sottofondo che partono a tradimento ad ogni costo!), troppe fotografie nella stessa pagina, troppi javascript sono fra le cause più comuni di un eccessivo caricamento di una pagina web.

Senza perdere ulteriore tempo, andiamo a vedere il risultato, e poi analizziamo come arrivarci:

I dati si riferiscono ovviamente al periodo che ci interessa, ovvero l’ultimo mese, e sono relative a questo sito web.

Al momento viene indicato un tempo di caricamento medio di 1.4secondi (su meno di 100 pagine). Prima delle ottimizzazioni, come indicato nel grafico, era oltre 4 secondi… troppo!

Elimina i contenuti inutili!

Non c’è bisogno di riempire ogni pagina con decine di effetti inutili, o sfondi ad alta definizione (la risoluzione dei monitor più utilizzata nel web, ha ancora 1368 pixel di larghezza). Gli utenti si sentiranno meno confusi, e ringrazieranno.

Raggruppa Javascript e fogli di stile CSS

Se una pagina richiede tre javascript per un qualsivoglia motivo, conviene raggrupparli in un unico file js. In questo modo si ridurranno le richieste al server, fattore determinante nel ridurre i tempi di caricamento. Stesso discorso vale per i fogli di stile.

Comprimi le tue immagini JPG e PNG senza ridurne la qualità

Jpegoptim e PNGout sono due ottimi programmini (funzionano da linea di comando) che permettono, utilizzando differenti algoritmi, di ridurre la dimensione di una immagine, senza ridurne la qualità (lossless compression). Provare per credere… l’immagine di sfondo di questo sito, le tante icone in PNG, ed alcune foto, hanno avuto riduzioni anche del 50%!

MINimizza e comprimi i tuoi Javascript ed i file CSS

Alcuni plugin js come Jquery, o alcuni fogli di stile molto complessi, possono contenere svariati commenti, che aiutano gli utenti a capire nel dettaglio cosa faccia questa o quella riga di codice. Purtroppo, questi commenti, assieme agli spazi ed agli “a capo”, occupano spazio. Il browser è costretto a… fare lo slalom fra queste parti che risultano utili solo ad un occhio umano.

Ci viene in aiuto Google Minify, che elimina tutte le parti inutili di questi file, consentendo di risparmiare parecchi Kilobyte.
Scaricatelo, caricate la cartella “min” nel vostro sito, ed aprite la pagina indirizzo_vostro_sito/min/builder.
Inserite i vari CSS (o JS) da comprimere, cliccate su UPDATE, e Minify vi indicherà una tag HTML bella e pronta all’uso, da inserire nelle vostre pagine web al posto dei soliti (e numerosi)

<link type=”text/css” rel=”stylesheet” href=[…..] />
<script type=”text/javascript” src=”…”></script>

In questo modo, farete UNA SOLA chiamata per i fogli di stile, ed UNA SOLA chiamata per i javascript.

Posizionate i Javascript nel footer

Alcuni codici (come queli dei contatori), se non sono “asincroni”, possono creare per un qualsiasi motivo un ritardo nel caricamento. Se si trovano nell’header (quindi all’inizio del sito), questi blocchi influenzeranno anche il resto della pagina, che dovrà aspettare la risoluzione di eventuali problemi, prima di essere caricata.

Se inserite i javascript nel footer (ovvero alla fine del sito), eventuali problemi di caricamento non comporteranno una noia per gli utenti.

Specificate l’encoding dei caratteri SOLO a livello di web server

Se utilizzate Apache, potete eliminare le tag html relative all’encoding nelle vostre pagine, ed inserire direttamente nel file .htaccess:

AddDefaultCharset UTF-8

Abilitate la cache

In questo modo gli utenti che TORNANO nel vostro sito, potranno sfruttare la cache del loro browser, senza essere costretti a ricaricare di nuovo sfondo, js, css e così via.
Sempre in .htaccess:

<IfModule mod_headers.c>
<FilesMatch “\.(js|css)$”>
Header append Vary Accept-Encoding
Cache-Control: Private
</FilesMatch>
</IfModule>

#include caching for images
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif “access plus 1 week”
ExpiresByType image/jpg “access plus 1 week”
ExpiresByType image/png “access plus 1 week”
ExpiresByType image/x-icon “access plus 360 days”
ExpiresByType text/css “access plus 1 day”
ExpiresByType text/html “access plus 1 week”
ExpiresByType text/javascript “access plus 1 week”
ExpiresByType text/x-javascript “access plus 1 week”
ExpiresByType application/javascript “access plus 1 week”
ExpiresByType application/x-javascript “access plus 1 week”
ExpiresByType application/x-shockwave-flash “access plus 1 week”
ExpiresByType font/truetype “access plus 1 month”
ExpiresByType font/opentype “access plus 1 month”
ExpiresByType application/x-font-otf “access plus 1 month”
</IfModule>

Abilitate la compressione GZIP

Esistono vari metodi, a seconda che si usi Apache o altri webserver, ed il metodo è spiegato diffusamente in altri siti, quindi non è necessario ricopiare il codice anche in questo articolo.

Create una versione mobile del sito

Aggiungete, nel vostro foglio di stile, delle correzioni che permetteranno di visualizzare il vostro sito su iPhone, iPad, Android e terminali simili:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px), only screen and (min-device-width : 480px) and (max-device-width : 800px) and (orientation : landscape), only screen and (device-width: 768px), only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5)
{ CODICE CSS MOBILE QUI }

Per esempio, potreste ridurre la dimensione dei div, eliminare l’immagine di sfondo, eventuali sottomenù non adatti a schermi piccoli, e così via. In questo modo, il tempo di caricamento sui dispositivi mobile potrà essere drasticamente diminuito.
A titolo di esempio, ecco due screenshoot che mostrano la versione mobile di questo sito su Android ed iPhone: immagine1 / immagine2

Una volta effettuati questi cambiamenti, aggiungete queste TAG html nell’header, prima del caricamento del foglio di stile:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”/>
<meta name=”apple-mobile-web-app-capable” content=”yes”/>
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent”/>

Nell’ordine, impostano il livello di zoom per i terminali mobili, e vieta all’utente di zoomare (eventualmente rompendo il layout). Le ultime due tag sono specifiche per iOS, e rendono il vostro sito più simile ad una App, nascondendo la barra degli indirizzi di Safari.

BONUS: WordPress: ottimizzare automaticamente tutte le immagini JPG e PNG

Il plugin SMUSH-IT permette di fare, automaticamente, quello che ho descritto poco sopra per le pagine statiche, ovvero effettuare una “lossless compression” delle immagini, migliorando il tempo di caricamento del vostro blog WordPress.

E’tutto! Notare che queste correzioni aiutano ad ottenere punteggi fra l’85 ed il 95 nei test Google Page Speed ed YSlow, con conseguenti miglioramenti generali in ottica posizionamento.

E tu hai qualche altro trucco da suggerire? Si accetta di tutto! 🙂