Ottimizzare e velocizzare il proprio sito web (I Parte)

Si possono individuare tre ragioni principali del perchè sia meglio utilizzare un ottimizzazione front-end piuttosto che una back-end:

Innanzitutto è migliore in quanto riduce il tempo delle risposte ben del 40%, contro il 10% ottenuto tramite ottimizzazione back-end;
La sua creazione richiede inoltre meno tempo e risorse di quanto non ne richieda un back-end;
Oltre 50 team di Yahoo! la hanno testata, con ottimi risultati.

E' infatti importante sapere che ben l' 80% del tempo di risposta viene utilizzato per le risposte front-end. Ottimizzare quindi questo aspetto renderà il tutto più veloce.

1: Ridurre le richieste HTTP

Gran parte del tempo di attesa viene impiegato per caricare i vari elementi presenti nella pagina, quali immagini, scripts, elementi in Flash, video, ecc. Ridurre il loro numero, evitare di sovraccaricarne le pagine, renderà le pagine decisamente meno pesanti e pergiunta più veloci da caricare.

Per ridurre il numero di tali componenti si può procedere ad una semplificazione del design della pagina. Ma...c'è un modo per avere pagine web ricche di contenuto, ma dal ridotto tempo di caricamento? Vedremo alcune possibilità per ridurre le richieste HTTP:

Image map, per combinare in una sola immagine, più immagini. Naturalmente, la dimensione della pagina non varierà, ma diminuirà il numero di richieste HTTP.

CSS Sprites, per ridurre il numero di richieste HTTP provenienti dalle immagini. Permette infatti di combinare tutte le immagini della pagina in una singola, da utilizzare nella sezione del CSS background-image e background-position in modo tale da mostrare solamente l' immagine desiderata.

Usare lo schema data: URL per inserire nella pagina direttamente il contenuto dell' immagine. Questa soluzione può aumentare la dimensione del documento HTML, ma combinando questo metodo con il CSS stylesheets si ridurrà il numero di richieste HTTP senza incidere gravosamente sulla dimensione del documento.

Altra soluzione, il combinare più script in uno solo e combinare in un solo stylesheet più di uno stylesheets.

Ridurre il numero di richieste HTTP in una pagina è sicuramente un buon punto di partenza, anche considerando i dati riportati da Tenni Theurer secondo i quali ben il 40-60% dei visitatori giornalieri di un sito vi entrano avendo la cache vuota. Seguire gli accorgimenti sopra-riportati renderà la loro navigazione decisamente migliore.

2: Usare una Content Delivery Network (CDN)

Da tener presente che la vicinanza fisica dell' utente al server che regge il sito è determinante per la velocità di caricamento delle sue pagine. Per questo motivo, spargere il contenuto del sito su diversi server, posti in nazioni e continenti differenti, può rendere più rapido il caricamento delle pagine. Ma come fare?

Ci viene in aiuto il content delivery network (CDN), che consiste in una collezione di webservers sparsi per il globo in grado di spartirsi il contenuto del sito. Per decidere quale webserver dovrà rispondere alle richieste di un determinato user, quest' ultimo verrà localizzato, e gli risponderà il server a lui più vicino.

Certo, il CDN ha costi piuttosto elevati, talvolta spesso proibitivi, ma diventa indispensabile nel momento in cui il sito web abbraccia un' utenza globale proveniente da tutto il mondo. Servizi che offrono i CDN sono ad esempio Akamai Technologies, Mirror Image Internet e Limelight Networks.

3: Aggiungere un header con scadenza

L' aggiungere elementi ad una pagina richiede un numero sempre maggiore di scripts, i quali incrementano il numero delle richieste HTTP, cosa non piacevole. Ebbene, usando un header dotato di scadenza, si possono rendere tutti questi elementi cacheabili, evitando richieste HTTP non necessarie. Possono essere usati quanto nelle immagini, quanto negli script, nei componenti Flash, ecc.

Vediamo un esempio nel quale si avvisa il browser dell' utente che un tale componente non dovrò scadere fino al 15 Aprile 2012:

    Expires: Thu, 15 Apr 2012 20:00:00 GMT

Nel caso si utilizzi un server Apache, si potrà impostare una data di scadenza in relazione alla data attuale tramite il comando:

    ExpiresDefault "access plus 10 years"

4: Componenti Gzip

Per ridurre i tempi di attesa è importante pure utilizzare una buona compressione. I web-client iniziando con HTTP/1.1 indicano quale compressione supportano

    Accept-Encoding: gzip, deflate

Se il server web scorge questo, può comprimere tutti i dati inviati al client in gzip, avvisandolo con la stringa:

    Content-Encoding: gzip

Gzip è al momento il più diffuso metodo di compressione, e normalmente riduce i tempi di risposta ben del 70%.

5: Posizionare gli Stylesheets in alto

Si è scoperto che posizionando i vari Stylesheets nella sezione HEAD del documento, il tempo di richiesta della pagina viene significativamente ridotto. Ciò perchè permette un caricamento proggressivo della pagina, il che migliorerà nettamente l' esperienza di navigazione dell' utente.

6: Mettere gli Scripts alla fine

Al contrario, per quanto riguarda gli scripts, è sempre meglio che vengano posizionati in fondo alla pagina. Ciò darà il via ad un caricamento progressivo della pagina. Inoltre, porli in alto nella pagina, causerebbe scompiglio tra i downloads paralleli. I browsers di default infatti permettono il caricamento simultaneo di massimo 2 elementi per ciascun hostname, ma gli script potrebbero alterare questa regola.

Naturalmente ci vuole buon senso, nel capire se uno script può esser spostato in fondo, o se questo causerebbe il malfunzionamento dell' applicazione.

7: Evitare le stringhe CSS

Gli script CSS interni alla pagina sono utili, ma "pericolosi". Essi infatti vengono continuamente ricalcolati ad ogni resize della pagina, ma non solo! Anche ad ogni movimento del mouse nella pagina. Questo causa migliaia e migliaia di pacchetti inviati dal server al client, che se non avrà una buona connessione, avrà grossi problemi di banda.

Leggi la seconda parte >