Cerca:

30/01/2012

Come migliorare la velocità del tuo sito web

Perché è così importante ottimizzare le prestazioni di un sito e quali sono le tecniche principali alla base della Web Performance Optimization (WPO)

Il tema della velocità è sempre stato di particolare interesse per chi gestisce un sito web, ma lo è diventato ancor di più da quando Google ha aumentato il peso di questo parametro tra i fattori di ranking e dal momento in cui sono stati disponibili dati certi che dimostrano l’influenza diretta tra i tempi di caricamento di un sito e i suoi Key Performance Indicator (tassi di conversione, tempo sul sito, profondità delle visite, ecc.).

Fra gli studi più significativi in questo senso sicuramente c’è quello pubblicato da Strange Loop Networks a proposito del comparatore Shopzilla, che ha evidenziato come una diminuzione del tempo di caricamento delle pagine da 6 a 1,2 secondi ha corrisposto a un aumento delle vendite del 12% e un aumento delle pagine visitate del 25%. Non male, vero?

Per sapere dove intervenire per replicare simili performance occorre prima di tutto capire cosa accade quando viene richiamata una pagina web:

  • Il browser, una volta individuata la pagina che abbiamo richiamato, legge all'interno del codice HTML le URL dei file che la compongono (immagini, CSS, script JavaScript, ecc..) e li richiede al web server.
  • Il server esegue le elaborazioni necessarie per comporre la pagina (accedendo a uno o più database in cui sono memorizzati i testi e gli altri elementi dinamici della pagina) e fornisce al browser tutti i file necessari perché possa ricomporre in tutto il suo splendore la pagina che abbiamo amorevolmente preparato per il nostro utente.

Chiameremo back end tutto quello che avviene fino al momento in cui il documento HTML viene erogato dal server, fanno parte invece del front end tutti quegli elementi (CSS, immagini, script JavaScript) che vengono caricati successivamente.  Migliorare la velocità del back end può essere davvero complicato e spesso ha a che fare con l'ottimizzazione del codice che rende dinamico il sito o con la qualità dell’hosting.  La buona notizia è che spesso il collo di bottiglia delle performance di un sito non è lì.

Normalmente infatti il back end richiede circa il 20% del tempo totale di caricamento di una pagina mentre il rimanente 80% è dedicato al front end (e questo vale sia per grandi portali, che per il piccolo blog).

L'ottimizzazione delle performance lato front end è fatta di tanti piccoli accorgimenti, che talvolta non presentano significativi miglioramenti presi singolarmente, ma nel complesso possono migliorare drasticamente la velocità del sito e, quindi, la qualità dell'esperienza dell'utente.

Prima di entrare nel vivo, va spesa una parola sui due tool fondamentali per effettuare in modo tutto sommato semplice l'analisi delle performance del front end: Yahoo! YSlow e Google PageSpeed.  Si tratta di due estensioni per il browser che controllano se nella pagina che state visualizzando sono state implementate una serie di best practice che si possono applicare a quasi tutti i tipi di siti.

E' bene tenere presente però che questo test è solo l'inizio dell'analisi e serve ad individuare dove esistono delle possibilità di miglioramento.  Capire come implementare le best practice nel particolare sito che viene analizzato è spesso il passo più difficile e laborioso.  Di seguito elenchiamo le best practice che normalmente nella generalità dei siti producono i migliori risultati:

 

  • Ridurre le richieste HTTP - Ogni elemento che compone una pagina Web deve essere scaricato dal browser con una richiesta HTTP, ed ognuna di queste richieste occupa tempo.  Riducendone il numero, si può ottenere quindi un miglioramento significativo delle performance.  Innanzitutto vanno eliminati tutti gli elementi della pagina non strettamente indispensabili (si, parliamo proprio di tutte quelle iconcine che piacciono tanto al capo ma che, nel migliore dei casi, non servono a nulla).  Subito dopo si può provare riunendo in un’unica immagine tutti gli elementi grafici di una pagina (CSS Sprite), usando poi i fogli di stile per posizionare le porzioni giuste nei punti corretti.  Uno dei tool più efficaci per usare questa tecnica è Spriteme, che genera automaticamente l'immagine unica ed i CSS necessari partendo dalla pagina di origine e mostrando anche di quanto si ridurrebbero le richieste HTTP.  Verifica anche che i link dei file che richiami siano relativi e non assoluti (es.: img src=”../immagini/nome-immagine.jpg), in questo modo il server non dovrà fare ristabilire una commessione per ogni file che richiama.
  • Minificare il codice HTML - I tempi di front end possono essere ridotti anche ripulendo il sito dal codice inutile inserito automaticamente da molti CMS editor (commenti, marchi di fabbrica, richiami a siti esterni, ecc.) e ottimizzando la codifica della pagina attraverso appositi tool di compressione, come GZip.
  • Ottimizzare le immagini - Sembra incredibile, ma esistono ancora siti online, anche blasonati, che pubblicano immagini non ottimizzate per il Web.  A seconda di quale sia il tipo di immagine che si deve ottimizzare esistono diversi strumenti gratuiti a disposizione: imagemagickpngcrushjpegtran, ecc...  Uno dei più efficaci è Smush.it, un tool di Yahoo! che permette di ridurre al massimo il peso di un'immagine senza perdere qualità, applicando di volta in volta ottimizzazioni specifiche.
  • Includere e consolidare CSS e JavaScript in file esterni - Il codice CSS e i JavaScript dovrebbero sempre essere in file esterni richiamati dalla pagina HTML.  In questo modo questi file potranno essere memorizzati nella cache del browser e quindi verranno scaricati solo alla prima pageview (a meno che la cache del browser non venga per qualche motivo ripulita o che i file cambino all’interno del sito).  Inoltre, l'accorpamento di file JavaScript e CSS esterni può contribuire a diminuire il numero di chiamate HTTP, anche se questo intervento è a volte difficile da implementare, perché le regole dei CSS e le variabili negli script possono sovrapporsi (il modo migliore per integrarli è farlo fin dall’inizio della progettazione del sito).
  • Ottimizzare la caching del browser - Come appena visto, controllare come e quando il contenuto delle pagine viene memorizzato nella cache dai motori di ricerca può aiutare a velocizzare il sito in modo considerevole.  Su server Apache si possono regolare gli attributi di scadenza o controllo cache (expire o cache control) negli header di qualsiasi pagina, inserendo date sufficientemente lontane nel tempo.  Su server Windows il processo è simile e riguarda la manipolazione dell’attributo “client cache”.  Per Wordpress invece è sufficiente (e necessario) installare plug-in come W3 Total Cache o WP Super Cache.
  • Ridurre i widget esterni - I “like box” di Facebook, il box con gli ultimi tweet, i tool di tracking statistico (come Google Analytics), gli script dinamici di affiliazione, ecc. sono spesso ormai indispensabili, ma concorrono a volte a rallentare in maniera decisiva il download completo della pagina.  Se sei costretto ad aggiungerli posizionali almeno alla fine del codice delle pagine.
  • Ridurre i DNS lookup - Se alcuni dei file richiesti nel codice della pagina sono su server/siti web diversi meglio richiamarli con il loro numeri di IP, in modo da evitare una chiamata DNS.
  • Scegliere un hosting professionale - Se paghi 20€/anno per il mantenimento del dominio e lo spazio web non puoi poi lamentarti delle performance del server.  Inoltre l’hosting low cost può portarti anche problemi di “cattivi vicini” (siti che fanno spamming ospitati sullo stesso server del tuo sito).  Esistono tantissime offerte on line e sarebbe complesso affrontare il tema del miglior hosting per le specifiche esigenze di un certo progetto web, ma, comunque, al di sotto di 70-80€/anno è molto difficile trovare soluzioni professionali realmente valide (se le trovi faccelo sapere!!! :-).
  • Valutare i Content Delivery Network e i tool di ottimizzazione del codice automatici appositamente predisposti per “alleggerire” il sito e minimizzare i tempi di download degli utenti fornendo dati dal server loro più “vicino”.  Ci sono molte offerte di questo tipo di servizi (tra cui quella di Amazon, Yottaa, Aptimize), ma sono utili solo in caso di siti con molte visite da tutto il mondo (e con un buon budget a disposizione ;-).

Esistono molte altre best practice e vari strumenti di analisi da usare per ottimizzare le performance di un sito.  Se il tuo ci mette in media più di 3-4 secondi per rispondere agli utenti hai decisamente bisogno di utilizzarli, o arriverai a pentirti di non averlo fatto quando il sito avrà già perso visibilità e utenti.

Se l’argomento WPO ti interessa puoi anche dare uno sguardo qui: http://code.google.com/intl/it/speed/page-speed/docs/rules_intro.html

Se invece vuoi segnalare risorse utili, proporre modifiche al testo commenta il post.


Autore: Alessandro Martin, Gianpaolo Lorusso

Il tuo voto sta per essere inserito
Giudizio: 3.5 su 5. 4 voti.
velocita-sito.pdf368 K
stampa l'aggiornamento
Alessandro, 22-01-13 12:07:
Ottimi consigli! Da leggere con attenzione. Buon post, bel lavoro!
Numba, 26-02-13 12:21:
Smush.it non è molto efficiente, confrontare i risultati con http://compresspng.com ad esempio, e vedrete.
Carlo, 01-02-17 17:51:
Lavoro in Tsw per Aziende Italia, provider di piani hosting e server dal 1999.

Abbiamo creato un infografica con dati statistici sui danni dei server e siti web lenti e con consigli per velocizzarli. Si trova a questo indirizzo: https://www.aziendeitalia.com/blog/tutti-i-danni-di-server-e-siti-lenti-e-come-velocizzarli/

E contiene le seguenti informazioni:

• Statistiche sulle aspettative degli utenti finali in termine di velocità di caricamento
• Una classifica dei siti più veloci al mondo
• Consigli per velocizzare un server o un sito web
• Tools per capire cosa immediatamente cosa migliorare del proprio sito, server o app

L’importanza della velocità di caricamento nel web è spesso trascurata tra manager, startup, CTO, developer e professionisti IT quindi il contenuto può veramente suscitare interesse.
ciaoo
Gianpaolo, 01-02-17 17:55:
Grazie per il contributo Carlo ;-)

Commenta

* - campo obbligatorio

*





*
*
rights.jpg, 3 kB space.gif, 0 kB