Ottimizzare il vostro sito web con GZIP e deflate

Post date:24/06/2009 - Posted by

Come ottimizzare il vostro sito con la compressione GZIP

La compressione è un semplice ed efficace metodo per risparmiare larghezza di banda e velocità nello scaricare le pagine del vostro sito. Esito quando devo raccomandare di usare la compressione gzip, a causa di problemi per i browser meno recenti.

Ma è il 2009. Si suppone che la maggior parte del traffico provenga da browser moderni, e francamente, la maggior parte dei miei utenti sono abbastanza tecnologici. Non voglio rallentare tutti gli altri perché qualcuno sta ancora usando IE 4.0 su Windows 95. Google e Yahoo utilizzano la compressione gzip. E' necessario avere un moderno browser per godere dei contenuti del web moderno e della moderna velocità, e così sia fatta la codifica gzip.
Aspetta, aspetta, aspetta: Perché stiamo facendo questo?

Prima di iniziare vorrei spiegare che cosa è la codifica dei contenuti. Quando si fa richiesta di un file come http://www.yahoo.com/index.html, il tuo browser colloquia con un server web. La conversazione va un po in questa maniera:

1. Browser: Ehi, mi GET / index.html?
2. Server: Ok, fammi vedere se index.html c'è ...
3. Server: trovato! Ecco il tuo codice di risposta (200 OK) e sto inviando il file.
4. Browser: 100KB? Gurgle ... aspetta, aspetta ... ok, è caricato.

Naturalmente, l'effettiva intestazioni e i protocolli sono molto più formali (controllate gli HTTP HEADERS con firebug, se siete così pignoli).

Ma ha funzionato, e hai il tuo file.
Quindi qual è il problema?

Ebbene, il sistema funziona, ma non è efficiente. 100KB sono una grande quantità di testo, e, francamente, tutto questo HTML è superfluo. Ogni <html>, <table> e <div> tag ha un tag di chiusura che è quasi la stessa cosa. Le parole vengono ripetute in tutto il documento. In qualsiasi modo cerchiamo di regolare le cose, l'HTML rimane sempre tanto.

E qual è il piano quando un file è troppo grande? Zippiamolo!!!

Se riuscissimo a inviare un file Zip per il browser (index.html.zip) invece del semplice index.html, potremmo risparmiare larghezza di banda e tanto tempo di scaricamento. Il browser può scaricare il file, estrarlo, e poi mostrarlo allegramente agli utenti, perché la pagina è stata caricata rapidamente. La conversazione browser-server conversazione può apparire come segue:

1. Browser: Ehi, è possibile ottenere index.html? Prenderò una versione compressa se ce l'hai.
2. Server: Vedo di trovare il file ... si!, è qui. E potrai prenderne una versione compressa!! Impressionante.
3. Server: Ok, ho trovato index.html (200 OK), adesso te lo zippo e te lo invio.
4. Browser: Grande! E 'solo 10KB. lo scompatto e lo mostro all'utente.

La formula è semplice: piccole dimensioni, download di filepiù veloce = utente felice!!!.

In Apache, che consente la produzione di compressione è abbastanza semplice. Aggiungere il seguente script al vostro file .htaccess :


  # comprimi tutto il testo e l'html:
  AddOutputFilterByType DEFLATE text/html text/plain text/xml
  
  # O comprimi certe estensioni di file:
<Files *.html>
  SetOutputFilter DEFLATE
</Files>

Apache ha due opzioni di compressione:

* Mod_deflate è più facile da impostare e standard.
* Mod_gzip sembra più potente: è possibile pre-comprimere i contenuti.

DEFLATE è veloce e lavora, così io lo uso, utilizzate mod_gzip se la barca fa acqua. In entrambi i casi, Apache verifica se il browser ha inviato l' "Accept-encoding" e riporta l'intestazione o regola la versione compressa del file. Tuttavia, alcuni vecchi browser possono avere problemi (più sotto) e vi sono direttive particolari che si possono aggiungere come correzione.

Se non puoi cambiare il tuo file .htaccess, è possibile utilizzare PHP per ottenere un contenuto compresso. Ti basterà aggiungere questo codice all'inizio della pagina:

In PHP:


if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start();

Alla fine verifichiamo che la intestazione "Accept-encoding" restituisca una versione gzippata del file (in caso contrario la versione normale).

Verifica di compressione

Una volta configurato il server, come verificare che si sta effettivamente ottenendo contenuto compresso.

* Nel tuo browser: Usa Web Developer Toolbar> Informazioni> Visualizza Dimensione Documento per vedere se la pagina è compressa.
* Guarda le intestazioni: Usa gli HTTP Headers per esaminare la risposta e verifica se hai una linea che dice "Content-encoding: gzip".

Siate pronti a stupirvi di fronte ai risultati. La compressione arriverà ad un 75% di riduzione in termini di dimensioni.

Avvertimenti

Come può sembrare una cosa molto emozionante, così la compressione HTTP non è tutto divertimento e giochi. Ecco alcune cose a cui fare attenzione:

* Browser più vecchi: si, ancora alcuni browser possono avere problemi con i contenuti compressi (si dice che la accettano, ma in realtà non è sempre così). .
* Contenuto già compresso: la maggior parte delle immagini, musica e video sono già compressi. Non perdere tempo nel comprimerli nuovamente. In realtà, probabilmente hai solo bisogno di comprimere il "big 3" (HTML, CSS e Javascript).
* CPU load: La compressione dei contenuti on-the-fly utilizza le risorse della CPU (Occhio!!!) e consente di risparmiare larghezza di banda. Di solito questo è un grande compromesso data la velocità di compressione. Ci sono modi per pre-comprimere contenuto statico e inviare le versioni compresse. Questo richiede più di una configurazione, ed al finale la compressione di uscita può essere una battaglia.

L'attivazione di compressione è uno dei modi più veloci per migliorare le prestazioni del tuo sito.

Ringraziamento by Yuriy, webmaster

Grazie per questo post, e veramente molto utile. Sono completamente d'accordo con te, meglio sacrificare 100 utenti con browser IE 4.0 , che rallentare altri 3000 visitatori.

Inserisci un commento

Main Menu

Users Area

Commenti

RAPIDQ

Ottimizzare il vostro sito web con GZIP e deflate

Commenti

Ringraziamento by Yuriy, webmaster

Inserisci un commento

Users

Videos

Scripts & Tutorials

Linux - I comandi principali

Search Engine Optimization - 130 parametri usati da google per valutare il tuo sito

Inserisci Google BUZZ nel tuo sito con Google Buzz Widget Jquery Plugin

Javascript - Codifica/decodifica di password nei file ste di Dreamweaver

PHP - Uno script per calcolare il PageRank di Google

PHP - Download file con limite di velocita'

PHP - Salvare immagini remote sul proprio server usando CURL

PHP - Short Url: due funzioni per creare link brevi

Tag Clouds