it-swarm.it

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

Quali sono i metodi più efficaci quando si tratta di ridurre la quantità di 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?

12
Mark Henderson

Alcuni metodi di base facilmente implementabili da qualsiasi sito Web:

  • Comprimi HTML, CSS e Javascript con deflate o gzip se 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, indica 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 singolo automaticamente . Questo è vantaggioso in quanto diminuisce 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; scegli quindi quale immagine mostrare con la proprietà CSS background. 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",

10
Thomas Bonini

Google ha delineato e spiegato i loro consigli al meglio Riduci 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 aggiuntivo chiamato Velocità pagina . Simile al plug-in 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.

Yahoo! ' Best Practices for Speeding Your Your Website identifica un insieme simile di best practice:

  1. Ridurre al minimo 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. ...

(La lista di Yahoo! È lunga ~ 35 articoli, non c'è bisogno di citarla 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 raccomandazioni, è già implementato.

5
Bryson