La compressione è un modo semplice ed efficace per risparmiare larghezza di banda e la velocità del sito. Ho esitato nel raccomandare la compressione gzip quando accelerare il javascript a causa di problemi in browser meno recenti .
Ma è il 21 ° secolo. La maggior parte del mio traffico proviene da browser moderni, e francamente, la maggior parte dei miei utenti sono abbastanza tech-savvy. Non voglio rallentare tutti gli altri giù perché qualcuno sta chugging lungo su IE 4.0 in Windows 95.Google e Yahoo uso la compressione gzip. Un browser moderno è necessario per usufruire dei contenuti web moderno e velocità web moderno – così la codifica gzip è.Ecco come impostarlo.
Aspetta, aspetta, aspetta: Perché stiamo facendo questo?
Prima di iniziare vorrei spiegare che cosa è la codifica del contenuto. Quando si richiede un file come http://www.yahoo.com/index.html , parla del tuo browser a un server web.La conversazione va un po ‘come questo:
1. Browser: Hey, GET me / index.html
2. Server: Ok, fammi vedere se index.html è in giro …
3. Server: Trovato! Ecco il tuo codice di risposta (200 OK) e sto inviando il file.
4. Browser: 100KB? Ahi … in attesa, in attesa … ok, è caricato.
Naturalmente, le intestazioni reali e protocolli sono molto più formale (per controllare le modalità in diretta HTTP Headers se siete così inclinato).
Ma ha funzionato, e avete ottenuto il vostro file.
Allora qual è il problema?
Beh, il sistema funziona, ma non è così efficiente. 100KB è un sacco di testo , e, francamente, HTML è ridondante. Ogni <html>, <table> e <div> tag abbia un tag di chiusura che è quasi la stessa. Le parole si ripetono in tutto il documento. In qualsiasi modo si fetta, HTML (e il suo cugino muscoloso, XML ) non è magra.
E qual e ‘il piano quando un file è troppo grande? Zip it!
Se si potrebbe inviare un file. Zip al browser (index.html.zip) invece del semplice index.html vecchio, avremmo risparmiare larghezza di banda e il tempo di download. Il browser può scaricare il file compresso, estrarre, e poi mostrarlo a utente, che è di buon umore, perché la pagina è caricata in fretta. Il browser-server conversazione potrebbe essere simile a questo:
1. Browser: Hey, posso GET index.html? Prenderò una versione compressa se ce l’hai.
2. Server: Vorrei trovare il file … sì, è qui. E prendo una versione compressa? Awesome.
3. Server:. Ok, ho trovato index.html (200 OK), sto zippare e invio in
4. Browser: Grande! E ‘solo 10KB. Io lo decomprimere e mostrare all’utente.
La formula è semplice: più piccolo file = più veloce download = felice utente .
Non mi credi? Il codice HTML parte della home page di yahoo va da 101kb a 15kb dopo la compressione:
Il (non così) dettagli peloso
La parte difficile di questo scambio è il browser e il server sapendo che è consentito inviare un file zippato su. L’accordo ha due parti
- Il browser invia un colpo di testa dice il server accetta il contenuto compresso (gzip e deflate sono due schemi di compressione):
Accept-Encoding: gzip, deflate
- Il server invia una risposta se il contenuto è in realtà compresso:
Content-Encoding: gzip
Se il server non invia il contenuto di codifica intestazione di risposta, significa che il file non è compresso (di default su molti server). L’intestazione “Accept-encoding” è solo una richiesta dal browser, non una domanda. Se il server non vuole restituire contenuto compresso, il browser deve fare non con la versione pesante regolare.
Configurazione del server
La “buona notizia” è che non possiamo controllare il browser. Si può inviare le Accept-Encoding: gzip, deflate intestazione o non è così.
Il nostro compito è quello di configurare il server in modo che restituisce il contenuto compresso se il browser in grado di gestirlo, risparmiando larghezza di banda per tutti (e dandoci un utente felice).
Per IIS, abilitare la compressione nelle impostazioni.
In Apache, abilitare la compressione di uscita è piuttosto semplice. Aggiungere quanto segue al file htaccess.:
# Comprimere il testo, html, javascript, css, xml:
AddOutputFilterByType testo DEFLATE / plain
AddOutputFilterByType DEFLATE text / html
AddOutputFilterByType testo DEFLATE / xml
AddOutputFilterByType DEFLATE text / css
AddOutputFilterByType DEFLATE application / xml
AddOutputFilterByType DEFLATE application / xhtml + xml
AddOutputFilterByType DEFLATE application / rss + xml
AddOutputFilterByType DEFLATE application / javascript
AddOutputFilterByType DEFLATE application / x-javascript
# Oppure, comprimere determinati tipi di file per estensione:
<Files *.html>
SetOutputFilter DEFLATE
</ Files>
Apache ha in realtà due opzioni di compressione:
- mod_deflate è più facile da configurare ed è standard.
- mod_gzip sembra più potente: è possibile pre-comprimere il contenuto.
Deflate è veloce e funziona, quindi lo uso, utilizzare mod_gzip se la tua barca galleggia.In entrambi i casi, Apache controlla se il browser ha inviato l’intestazione “Accept-encoding” e restituisce la versione compressa o regolare del file. Tuttavia, alcuni browser meno recenti possono avere problemi (più sotto) e ci sono direttive particolari che si possono aggiungere per correggere questo.
Se non è possibile modificare il file. Htaccess, è possibile utilizzare PHP per restituire contenuto compresso. Lascia la tua HTML file di estensione php e aggiungere questo codice in alto.:
In PHP :
<? Php if (substr_count ($ _SERVER [‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) ob_start (“ob_gzhandler”); ob_start else ();?>
Controlliamo l’intestazione “Accept-encoding” e restituire una versione del file compresso con gzip (altrimenti la versione normale). Questo è quasi come costruire il vostro webserver (che divertimento!). Ma in realtà, tenta di utilizzare Apache per comprimere l’output se si può farne a meno. Tu non vuoi scimmia con i file.
Verificare il livello di compressione
Una volta configurato il server, controllare per assicurarsi che si sta effettivamente fornire un documento compresso.
- Online: Utilizzare il test online gzip per verificare se la pagina è compresso.
- Nel browser: uso Web Developer Toolbar > Informazioni> Dimensioni documento Vista (come ho fatto io per Yahoo, sopra) per vedere se la pagina è compresso.
- Guarda le intestazioni: Usa in diretta HTTP Headers per esaminare la risposta.Cercare una riga che dice “Content-Encoding: gzip”.
Siate pronti ad ammirare i risultati. La home page instacalc ridotto da 36k a 10k, una riduzione del 75% delle dimensioni.
Provare Alcuni esempi
Ho creato alcune pagine e un esempio scaricabile :
- index.html – Nessuna compressione esplicito (su questo server, io sto usando la compressione di default
- index.htm -.. esplicitamente compresso con Apache htaccess utilizzando * htm come regola
- index.php – esplicitamente compresso usando il PHP intestazione
Sentitevi liberi di scaricare i file, metterli sul server e modificare le impostazioni.
Avvertenze
Per quanto emozionante come può sembrare, HTTP La compressione non è tutto divertimento e giochi. Ecco cosa a cui prestare attenzione:
- I browser più datati : Sì, alcuni browser può ancora avere problemi con il contenuto compresso (che dicono che si può accettare, ma in realtà non possono).Se il tuo sito deve assolutamente lavorare con Netscape 1.0 in Windows 95, non si può decidere di utilizzare HTTP di compressione. Apache mod_deflate ha alcune regole per evitare la compressione per browser meno recenti.
- Già compresso contenuto : La maggior parte delle immagini, musica e video sono già compressi. Non perdere tempo a comprimere di nuovo. In realtà, è probabilmente solo bisogno di comprimere il “big 3” (HTML, CSS e Javascript).
- CPU -load : Compressione contenuti on-the-fly utilizza CPU tempo e consente di risparmiare larghezza di banda. Solitamente questo è un compromesso ottimo data la velocità di compressione. Ci sono modi per pre-comprimere i contenuti statici e inviare più le versioni compresse. Questo richiede più configurazione, anche se non è possibile, l’uscita compressione può essere ancora una vittoria netta. Utilizzodella CPU cicli per un’esperienza utente più veloce è valsa la pena, visti i tempi di attenzione brevi sul web.
L’abilitazione della compressione è uno dei modi più veloci per migliorare le prestazioni del tuo sito. Andate, configurarlo, e lasciate che i vostri utenti di godere dei benefici.