Metodi efficaci per ridurre la larghezza di banda (e quindi i tempi di caricamento della pagina)?

Quali sono i metodi più efficaci per ridurre la larghezza di banda di cui un sito Web ha bisogno per eseguire il rendering di una pagina?

Cache aggressiva? Minimizzare JS / CSS? Gzip? CMS? Sprites?

Alcuni metodi di base facilmente implementabili da qualsiasi sito Web:

• Comprimi HTML, CSS e Javascript con deflateo gzipse il browser che ha effettuato la richiesta lo supporta.
• Minimizza il tuo javascript con Google Closure Compiler
• Minimizza i tuoi CSS con YUI Compressor

Un po 'più coinvolto:

• Se è improbabile che una pagina o un'immagine cambi, dire al browser di memorizzarla nella cache. La maggior parte dei server Web lo fa già per i file statici, quindi tutto ciò che dovresti fare è aggiungerlo agli script dinamici, ove possibile.
• Unisci i tuoi file CSS e JS in uno solo automaticamente . Questo è vantaggioso in quanto riduce le richieste HTTP (che hanno un sovraccarico e quali determinati browser stupidi - e con questo intendo Internet Explorer - limitano di default 2 richieste alla volta per dominio).
• Sposta i tuoi file statici (CSS, JS, immagini, ecc.) In un nome di dominio separato. Questo fa sì che le informazioni sui cookie non vengano inviate nella richiesta HTTP.

• Usa gli sprite che vengono generati automaticamente . Uno sprite è una singola immagine contenente più icone o altre piccole immagini; quindi scegli quale immagine mostrare con la backgroundproprietà CSS . Esempio .

  Il vantaggio è che il client effettua meno richieste HTTP (che hanno un sovraccarico).

Ho osato "automaticamente" perché se stai facendo queste cose manualmente non ne vale assolutamente la pena e rende la manutenzione del codice un incubo. Di solito farlo automaticamente significa scrivere uno script personalizzato, motivo per cui è un po 'più "coinvolto",

Google ha delineato e spiegato i loro consigli per ridurre al minimo le dimensioni del carico utile . Includono le seguenti tecniche:

1. Abilita la compressione
2. Rimuovi CSS inutilizzati
3. Minimizza JavaScript
4. Minimizza CSS
5. Minimizza HTML
6. Rinvia il caricamento di JavaScript
7. Ottimizza le immagini
8. Servi immagini in scala
9. Servi risorse da un URL coerente

Questi suggerimenti fanno parte del loro progetto open source Firefox / Firebug chiamato Page Speed . Simile al plugin YSlow di Yahoo! L'attuale componente aggiuntivo Velocità pagina verificherà molte più ottimizzazioni di quelle spiegate in dettaglio nell'elenco. Vengono inoltre presentate le istruzioni per l'utilizzo della velocità della pagina.

Le migliori pratiche di Yahoo! per accelerare il tuo sito web identificano un insieme simile di migliori pratiche:

1. Riduci a icona le richieste HTTP
2. Utilizzare una rete di distribuzione dei contenuti
3. Aggiungi un'intestazione Expires o Cache-Control
4. Componenti Gzip
5. Metti i fogli di stile in cima
6. Metti gli script in fondo
7. Evita le espressioni CSS
8. Rendi JavaScript e CSS esterni
9. Ridurre le ricerche DNS
10. ...

(L'elenco di Yahoo! È lungo ~ 35 articoli, non c'è bisogno di citarlo nella sua interezza.)

Sia YSlow (collegamento immagine) che Velocità pagina (collegamento immagine) ti permetteranno di eseguire test sulle tue pagine, suggerendo cose che puoi fare e mostrandoti cosa, dei loro consigli, è già implementato.