Le performance dei siti ad alto traffico

Tra gli aspetti più importanti di un sito web c’è sicuramente la performance del sito, ovvero la percezione da parte di un utente della velocità con cui il sito risponde ai propri comandi.

Si parla di percezione, perché grazie ad opportuni accorgimenti, quali ad esempio porre il contenuto più importante all’inizio della pagina, anche in caso di connessioni lente si può limitare il malcontento dei visitatori.

Esitono diversi testi che aiutano a ottimizzare il proprio sito; ho personalmente apprezzato qualche anno fa la lettura di “Speed up your site” di Andy Kind che fa una disanima delle tecniche per rendere più veloce il caricamento della pagina (riduzione del codice, compressione, tecniche per il salvataggio delle immagini, ecc.).

Da tempo cercavo però qualcosa che fosse stato scritto da chi (e per chi) realizza siti con tanto traffico, perché necessitano di accortezze tutte particolari.

Per puro caso mi sono imbattituto nella presentazione di un tecnico Yahoo! del 2005 che contiene ottimi suggerimenti e anche qualche conferma per quanto riguarda le strategie da adottare per i grossi siti.

Nella presentazione i contenuto dei siti sono divisi in 3 macrocategorie, in base alla frequenza di aggiornamento:

  • HTML: il contenuto a più alta variazione
  • CSS e Javascript, che cambiano, ma non molto spesso
  • Immagini, che variano raramente

In virtù di questo ragionamento, sono indicati alcuni suggerimenti interessanti:

  • è bene istruire il server e i proxy perché non aggiornino il contenuto delle immagini del sito. Questo vuol dire che i redattori che caricano i contenuti dovrebbero, in caso di modifica delle immagini, caricarne altre con nome diverso
  • un suggerimento è quello di tenere i contenuti non dinamici in uno o più server dedicati, e fare in modo che per l’accesso a questi contenuti non vengano creati cookie, così da rendere molto più efficiente la comunicazione tra browser e server
  • vale la pena, nel caso di contenuti privati di un utente registrato (come per esempio caselle di posta elettronica web based), utilizzare URL diversi per ogni utente, così da permetterne il caching da parte dei proxy, ma evitare che un utente possa erroneamente accedere al contenuto privato di un altro
  • nel caso di contenuti ad altra variabilità, come i banner, è bene arricchire l’URL con numeri casuali, così da renderne altamente improbabile il caching da parte del browser o dei proxy 

Quanto pesa la mia pagina (e il suo contenuto)

GetContentSize è una pagina che accetta come input l’Url di una pagina, restituendo:

  1. La dimensione della pagina in byte
  2. La dimensione del testo presente nella pagina (tutto quello che non è Html, Css o JavaScript)
  3. La percentuale di contenuto rispetto alla dimensione totale
  4. Il contenuto della pagina

Uno strumento utile, soprattutto per chi sta migrando da tabelle a Css per i layout: aspettetevi un deciso aumento della percentuale al terzo punto…

Pagine leggere senza spazi inutili – Ridurre il codice Html

Quello che ci apprestiamo a dire è ovvio. Prendete una pagina Html, togliete tutti gli spazi, i ritorni a capo e i commenti. Otterrete una pagina più leggera, e quindi più veloce da caricare.

Ma come fare a costruire una pagina che sia priva degli spazi inutili, ma leggibile mentre la stiamo scrivendo, nonché quando la stiamo modificando ?

Due versioni di pagina

L’idea è di avere due copie di tutte le pagine del sito:

  • Una copia offline, che contenga tutti gli spazi, le tabulazioni e i commenti perché il codice sia facilmente leggibile da chi si occupa di crearlo e modificarlo
  • Una versione “leggera”, priva degli aiuti per gli editori, derivata dalla versione offline e poi pubblica.

Molto spesso si riesce a guadagnare tra il 10 e il 20% dello spazio totale della pagina: un bel vantaggio se si moltiplica il risparmio per tutti gli utenti del sito. Per quanto poco,
la loro esperienza sul sito sarà comunque più veloce.

Togliere gli spazi superflui

Se l’operazione di pulitura fosse fatta a mano, il tempo impiegato la renderebbe improponibile. Esistono però diversi programmi che si occupano
di eliminare spazio inutile nei file Html.

Per le nostre prove abbiamo selezionato un semplice programma freeware: Absolute Html Compressor [nuova finestra], scritto da Michael Serpik.
Questo strumento, dall’interfaccia semplice ed essenziale, comprime i documenti localizzati in una cartella (opzionalmente anche nelle sottocartelle).

Absolute Html Compressor

Come si vede dall’immagine, su 31 file compressi, il guadagno è stato di quasi 30Kbyte.

Privacy del sorgente Html

Togliendo i commenti e la formattazione, il codice diventa anche più difficile da leggere per quanti vogliano copiare il design delle nostre pagine.
Non solo, ma possiamo inserire tutti i commenti che vogliamo nel codice originale (cioè quello che continueremo a modificare), perché tutti
i commenti saranno eliminati nella versione che pubblicheremo online. Senza paura di appesantire il codice o che qualcuno li possa
leggere esaminando il sorgente della pagina.

Attenzione al codice e agli stili

Nel ridurre il contenuto di spazi, bisogna prestare attenzione a non comprimere alcuni tipi di dato:

  • Il codice non Html della pagina (es. ASP, JSP e Javascript)
  • Il collegamento ai fogli di stile CSS (Cascading Style Sheet)

Se privati degli spazi, infatti, il codice e i fogli di stile potrebbero non essere eseguiti o caricati correttamente in tutti i browser.

La soluzione consiste nell’isolare il codice e i CSS in file separati dalla pagina e dotarli di un’estensione personale (es. .inc).
A questo punto i file possono essere importati nella pagina per mezzo di “include”.
Quando eseguiamo la compressione dei file nella cartella, sceglieremo i file di tipo .htm o .asp: in questo modo file con altre estensioni
non saranno interessati dal processo di compressione.

Conclusione

La compressione di file Html consente di guadagnare notevole spazio all’interno della pagina, diminuendo la
quantità di informazione spedita tra il server e il client. È anche un ottimo metodo per
rendere il codice meno leggibile da chi volesse riprodurlo.