Le 14 regole per velocizzare il caricamento delle pagine

Mercoledì 16 Maggio 2007 - 11:50

di Cesare Lamanna

Web Design

Abbiamo già segnalato su questo blog la serie in quattro parti (1, 2, 3, 4) sulle performance di caricamento delle pagine uscita su YUI! Blog e curata da Steve Souders (responsabile del Performance Team della stessa Yahoo!).

La serie è in realtà solo un assaggio di un libro in uscita per i tipi di O’Reilly.

Alla recente Web 2.0 Conference, Souders ha tenuto su questo argomento una presentazione, di cui Rick Skrenta traccia una sintesi. Se ne ricava una lista di 14 regole da tenere a mente se si desidera ottimizzare la velocità di caricamento delle pagine.

Eccola:

  1. Diminuire il numero di richieste HTTP
  2. Usare un CDN
  3. Aggiungere sempre un header di tipo Expires
  4. Usare la compressione GZIP
  5. Mettere i CSS all’inizio
  6. Spostare gli script JS sul fondo
  7. Evitare le espressioni CSS
  8. Affidarsi a JS e CSS esterni
  9. Ridurre i DNS lookups
  10. Comprimere Javascript
  11. Evitare redirect
  12. Rimuovere gli script duplicati
  13. Disabilitare gli ETags
  14. Usare la cache per Ajax

La cosa interessante è che per il suo libro Souders sta mettendo su un sito ad hoc su cui è già possibile visualizzare una serie di esempi e di prove comparate per testare le differenze tra diversi metodi.

Tags:

Categoria: Web Design | Permalink

Commenti

1

E’ molto interessante davvero, peccato che in alcuni casi non ho capito come operare effettivamente.
1 Dimininuire richieste http (ok, ma non ho capito come)
2 Usare un CDN (non ho capito neanche cosa sia!)
3 L’header di tipo Expires si può usare anche come tag meta?
13 Disabilitare gli ETAGS. Ho fatto una ricerca ma non ho capito cosa sono!

Qualcuno sa delucidarmi?

Grazie :)

# - postato da Clauyyy45 - 16 Maggio 2007 - 13:50

2

Intanto ti consiglio di dare un’occhiata agli esempi che ho linkato, ci trovi la risposta a quasi tutti i tuoi quesiti :)

Per esempio, se vedi quelli relativi alle richieste HTTP, vedrai che ti propone come alternative un piccolo menu creato con 5 immagini separate (5 richieste HTTP) oppure con una sola immagine mappa (1 sola richiesta HTTP).

I CDN (Content Delivery Network) sono servizi tipo Akamai che consentono di hostare e distribuire dai loro server contenuti come grafica, multimedia, etc (è però roba per siti di una certa grandezza, non certo per un piccolo blog).

Gli interventi sull’Expires header di cui si parla si fanno a livello di server, non di meta tag.

Quanto agli Etag ti confesso che un argomento abbastanza criptico anche per me, per cui me la cavo con il link alla voce su Wikipedia :)

# - postato da cesare - 16 Maggio 2007 - 14:52

3

Accidenti, avevo scritto una super risposta ma il mio browser ha fatto casini. Tant’è.
Ti ringrazio per le risposte ad un argomento secondo me sottovalutato, anche da chi gestisce server ad alto traffico.
La gestione del caching del browser dell’utente mi sembra un pò troppo rischiosa su siti altamente dinamici. Per il resto i suoi esempi non sempre sono chiari e la documentazione online circa questo argomento scarseggia parecchio.

# - postato da Clauyyy45 - 16 Maggio 2007 - 16:55

4

A parte che alcuni risultati, cronometro del loro sito alla mano, sono contraddittori, in ogni caso basta sapere che quasi tutte queste soluzioni per velocizzare complicano di molto la semplicità di manutenzione delle proprie applicazioni. E secondo me, non ne vale la pena, a meno che ti chiami Yahoo! ;-)

# - postato da paperogiallo - 16 Maggio 2007 - 23:45

5

@paperogiallo: ma se ti chiami Yahoo hai talmente tante risorse hardware, banda e traffico che potresti far scaricare a tutti un bel video anche di 10mb in home page :)

# - postato da PiccoloSocrate - 18 Maggio 2007 - 08:10

Inserisci il tuo commento:





(puoi usare i seguenti tag HTML per formattare il testo -
a href, b, i, br/, p, strong, em, ul, ol, li, blockquote, pre):

 

Anteprima del commento