cratio ns *

ttae
Tutoriels

Astuces

Outils

Livres
Qulz
Navigateurs
La premire interrogation - dans le monde impitoyable de la cration web et des guerres entre navigateurs modernes et antiques
concerne le support de cette fonctionnalit. Or, ici, bonne nouvelle :on peut considrer que la totalit des navigateurs
supportent la dcompression des pages avec HTTP/1.1 :
*' Microsoft internet Explorer depuis 4.0*
"Opra depuis 5.12
Firefox toutes versions
l Google Chrome toutes versions
Safari toutes versions
Netscape depuis 4.06
Tous les navigateurs mobiles
* avec quelques petits bugs jusqu'aux versions 5.0 et 6.0 comprises
De plus, il incombe aux navigateurs d'envoyer un en-tte HTTP indiquant les types de pages compresses supportes . Si
cet en-tte ne figure pas dans ceux reus par le serveur, il lui suffit de ne pas activer la compression.
GET / ilTP/"J. . l
Host: www.alsacreations.com
Acceptwncoding: gzip
UsermAgent: Firefox/3.6
Le serveur rpond alors de la mme manire, grce CORG1''_CQCLIQ, et en faisant suivre par le contenu compress de la
page.
HTTP/1.1 200 OK
Server: Apache
ContentmType: text/html
ContentEncoding: gzip
CQntentmLength: 13337
Deux formats coexistent :
*Deate, algorithme qui couple LZ77 et le codage de Huffman (zlib)
Gzip, volution de Deflate, un peu plus performant, mieux support, plus rpandu
Mise en place au niveau des serveurs web
. Attentio d :les indications suivantesidoiventltre ajustesselfonftvotre configuration et vosrbfesoins.
Apache est quip de modules de compression :
" dans les anciennes versions 1.3 :modwgzp ou modwdefiate
l depuis la version 2.0 et suprieures :du module officiel mocLdelate qui utilise zlib et remplace mod_gzip
Ces modules sont dsactivs par dfaut, mais peuvent tre activs dans la configuration gnrale du serveur si vous y avez
accs. Par dfaut modwdeflate permet de spcifier les types de fichiers compresser la vole grce la directive
AddsutputFi lteByType DEFLATE. Une fois ces modules disponibles vous pouvez galement exploiter les fichiers
mtacces s dans chaque rpertoire pour plus de souplesse (voir au point suivant).
Activation des modules pour Apache 2
Si votre serveur le permet, vous devez accder en ligne de commande avec les droits root pour activer les modules ncessaires
avec la commande a2enmod :
Manuellement en ajoutant aussi un fichier dans mods 1 able / de f1 ate . 1 oad et un lien symbolique vers celuici dans
modsvenabled/,OuuneHgnedanSbttpd.conf:
LoadModule deflate module /usr/lib/apache2/modules/mod_deflate.sa
Sous Windows, il faudra indiquer le chemin du fichier .dll ponyme. Attention : si un lien symbolique vers mod_deflate.conf est
dj prsent dans mods-enabled avec une directive de configuration gnrale, il est possible que tous vos fichiers soient dja
dlivrs compresss. Faites un test avant tout - voir en fin d'article.
Puis il faut ajouter des directives la configuration (par exemple dans un fichier situ dans /etc/apach.e2 /COH 41/) pour
compresser des types de fichiers bien spcifiques, dans un rpertoire spcifique lui aussi. Ceci est recommand lorsque l'on
place toutes les feuilles de style dans un rpertoire indpendant, ainsi que les JavaScripts, car le but n'est pas de (re)compresser
tous les fichiers hbergs sur le serveur web mais de se focaliser sur l&#39;essentiel. ll est donc possible d&#39;indiquer <Localtion
/Cs s> pour nappliquer ces rgles que sur ce rpertoire (on considre ici FURL) et ses descendants, ou d&#39;utiliser <o1 rectory
absolu/va /<:s s> si l&#39;on se rfre au systme de fichiers.
te.c>
DEFLZVJE

Q
DEFLTE
DEFLTE
ddOutputFilterByType DEFLATE
ddOutputFilterByType DEFLATE
AddOutputFilterByType DEFLATE "M svg+xml
AddOutputFitterB, _, DFLATE = j. ti0n/xhtml+xml
AddutputFilterBy
DEFLATE
AddOutputE lterByType DEFLTE , ation/atommxml
AddOutputFilterByType . ation/xwjavascript
# Pour les proxies
H
eader append Vary UserAgent env:ldontvary
DeflateCompressionLevel

AddOutputFilterByType DEFLATE text/html
Applique la compression sur les fichiers de type mime text/html
SetOutputFilfer DEFLATE
Active le filtre compression.
N&#39;oubliez pas de redmarrer (restart) ou recharger (reload) Apache aprs chaque modification de la configuration.
Apache 1.3
Pour activer le module dans le fichier de configuration httpdconf, ajoutez la ligne :
LoadModule gzipmmoduie modules/modmgzip.so
Puis configuration, semblable celle mentionne auparavant :
Addncodinq gzip
mod_ p_updates
mod_A .. le /mod_gzip_st;tus
mod_qv
mod gz
mod_gzipn rimum_file_size
ximumwfilewsize
_ . imum_inm_:_
mozipmmlnmuttp 1000
1p_handle_methods GET POST
heade User-agent:
\ . htt
\.htmS
tem tnclude n&#39;. \.php3S

\
mod_
mod_ &#39;.item_ lude
mod_,i mitem_include
rude ."a httpd/unixwdi
je mime image/
;p_dePhunk Yes
> cdd_header count Y.n
N&#39;oubliez pas de recharger Apache aprs chaque modification de la configuration.
Les options sont relativement parlantes (pour les anglophones), elles ne seront pas dtailles dans cet article.
Microsoft llS
llS supporte la compression depuis la version 4, mais celle-ci est victime de bugs. Dans la version 5, les efforts de Microsoft n&#39;ont
pas port leurs fruits puisque celleci est toujours instable. C&#39;est enfin dans la version 6 que la compression HTTP a t finalise.
Cependant elle ncessite quelques manipulations (voir documentation Micrcsott : Using HTTP Compression for Faster
Downoads (lis 6.0} et tutoriel en franais pour activer Ea compression GZip dans iis.
Les autres serveurs restent marginaux. Lighttpd est quip du module bien nomm ritod_compres s.
Solutions rapides avec un htaccess pour Apache
Les fichiers htaccess sont des fichiers placs la base d&#39;un rpertoire et modifiant le comportement du serveur pour les fichiers
qu&#39;il contient. On peut y placer les instructions de configuration mentionnes ci-dessus (sans la directive Location ou Directory).
Voici des exemples tests et exploits sur Alsacreationscom. Si vous obtenez des erreurs HTTP 500 aprs la mise en place du
fichier htaccess, vrifiez sa syntaxe, l&#39;adquation avec votre type de serveur et la disponibilit des modules. Vous pouvez
galement combiner le tout avec des options de cache (mod_expires dans l&#39;exemple pour Apache 1.3) pour viter de sen/ir
plusieurs fois le mme contenu aux visiteurs et sa compression par le serveur ceci relve d&#39;un autre article.
Apache 2
Contenu du fichier htaccess, dans le rpertoire contenant les fichiers CSS et JavaScript.
SetOutputFilter DEFLATE
Expiresgctitve on
tesefatgilt "access

daiz"
week"
cacion/xavasczipt.*
pt access plus
"access plus 5
month"
Solution alternative en PHP
La fonction obgzhandter et l&#39;ensemble des fonctions de type disponibles depuis PH P4 permettent la gestion du tampon de
sortie, c&#39;est dire des donnes qui seront envoyes au navigateur. il est alors possible de gnrer le contenu complet de la page
et de le compresser avec Gzip avant envoi. On active le tampon en dbut de script avec Obmstat, et on le vide la fin avec
ob__ertd__flush.
La fonction obngzttandler a le mrite de vrifier les types de compressions supports par le navigateur (gzip, deflate ou aucun)
avant de retourner le contenu du tampon de manire approprie. Si le navigateur ne supporte pas les pages compresses, cette
fonction retournera 1. s e.
Bien sr, ceci est adapter en fonction de la structure de votre site. il ne suffit pas toujours de placer ces instructions en dbut et
en fin de script PHP car de nombreux CM8 utilisent dj leur propre systme de buffer (tampon) interne.
Tests dans la pratique
Vous pourrez aisment vrifier le bon droulement du transfert et de la dcompression en vrifiant les proprits de la page dans
le navigateur (dans Firefox :clic bouton droit, informations sur la page, onglet Gnral, Taille). Comparez la taille du fichier
original et la taille lue ( l&#39;octet prs).
Permissions Scurit
Consultez galement les indications fournies par les extensions de dveloppement (type Firebug ou Outils de dveloppement
accessibles dans les navigateurs modernes). Celles-ci figurent dans l&#39;onglet Rseau ou Network, et mentionnent les en-ttes
HTTP de compression ainsi que la quantit de donnes tlcharges.
trams: C-
styiesmmarzss
2ms &#39;
Taille compresse

l fe?
Commentaires
arnolem a dit le 20100340 t7z2szse
En ce qui concerne la solution PHP, je ne suis pas sr que le ob__end_flush();Csoit ncessaire
dew a dit le 2010034 o 17:37:56
resichoses se passenr.
arnolem a dit le zor (x0134 0 18:21 :2r
D&#39;ailleurs pour ceux qui veulent encoder leurs fichiers JCS, CSS, ...Cen utilisant la mthode PHP (que je r
dconseille si vous pouvez fairela mthode APACHE), vous pouvez passer par un script PHP qui se chargetde C
vous renvoyer vos fichiers compresss, Cg C C C C g C C l
Par exemple, un fichier gzip.php quevous utilisez en passant un nom de ressource en GET :gzipphp?
f=style.css C C C
On peut trs bien imaginer une page ressemblant ceci:
<?php l c C n V C C
ob_start(&#39;ob_gzhandler&#39;); g g g
Sfile =isset(S_GET[&#39;f&#39;]) ? S_r_GET[&#39;f&#39;] znull; a
switch(sfile){ C C f
case stylecss:
header("Contenttype: text/css");
include(style.css); Le
break;
case ajaxjs: C a g
heaCderxContent-type:application/x-javascrip"); se
include(lajax.js&#39;); C C C C C C
break; f
},
ll suffira ensuite de remplacer vos appels aux fichiers JS et CS8 classique par l&#39;appel au script PHP suiviedu
nom de fichier en paramtres C C C
: f Cragest pasCnesCsaiCreCr csst appelautqrrtatiqquemntantirides Csgcrptrque le butter sottfactivaveclColbgstrtCC
Coujviatphinixmais la thorielagplusabsoluegcest cpluSjCpropre,retscelagpermetde comprendre comment g x C
Technologix a dit te 2010-08-101928883
jTjrs intressant. Vj " l
Nico3333fr a dit le 20104331 o 22:11:32
Trs bon article l
J&#39;utilise pour ma) part ces mode de compression sur plusieurs sites, le gain peut tre trs important, certains
fichiers sont rduits au quart de leurtaille initiale. Sur une page contenant beaucoup de texte, c&#39;est t
particulirement agrable. V
Cela rend aussi l&#39;utilisation deJquery (58Ko non compresse, 18 Ko Gzippe ainsi) particulirement lgre en
terme de bande passante, c&#39;est toujours plaisant. l
Heyoan a dit te 20l 0-0341 08:57:42
*l Merci dew gzjunxbien beaursum dz) l I
2) V) a V
<jFilesMatch "tupgiipegitangigiflcssirsiswgss;a
gHeadersettCachecontrol."maX?age-=17209600, public") f.
crale mefpermejtjde faire d&#39;unefpierre_dux qtipssmrsjefhefsaas pas;sisscsestdioptimai... j)
Shonagon a dit te 20100341 tO:44:29
Merci pour cet article d&#39;autant plus que le sujet taitquasiment inconnu pour certains d&#39;entre nous, mis part les.
solutionslogicielles de compression d&#39;HTML.
>> De nos jours, l&#39;accent est souvent mis sur la performance des sites et les conomies de bande passante.
Cela a toujours t le cas. Ca l&#39;est particulirementpour les mobiles aujourd&#39;hui. Mais pour les postes fixes le
besoin au niveau client est bien plus faible qu&#39;hier au niveau HTML. Quand on fait le ratioHTMsL/objets
multimdia (images, videos...), il s&#39;avre auourd&#39;hui que le HTML ne pse souvent pas grand chose.
Un code propre est une tape pralable et bien plus importante que l&#39;optimisation (elle y participe indirectement).
Et puis quand on parle d&#39;optimisation, il est toujours bon de rappeller :
Rgle 1: Ne pas optimiser, l
Rgle 2: Ne pas optimisertant que nous n&#39;avons pas de solutions parfaitement claire et non optimise.
M.VA. Jackson, Principles of Program Design V
Mis part ces remarques d&#39;emmerdeur trolleur, je dcouvre tout cela avec beaucoup d&#39;enthousiasme. Encore
quelque chose apprendre et mettre en Suvre. M&#39;enfin cela n&#39;a pas l&#39;air sorcier, pas trop difficile mettre en
Suvre et particulirement apprciable. Merci encore. s
J&#39;ai quand mme une question. Si la prise encharge d&#39;lE6t est importate pour un projet, peuton quand mme g
utiliser ces techniques ?s (une remarquedans letutoriel voque des bugs possibles) Quels seraient les risques ?
arnolem a dit le 201 003-11 14:38:00
. ttsqujj concerne {don script;ilrn&#39;es_tt piastres conseill.lsflectivement, tujrditsunrgletquitdfinjaggj .
1 misleetccate pourries lichrslPiG; Cqu. est corusesu.rwcontreaittu WtleDEFLATE:da"S&#39;cet
[rgle hdrs11;idestpas:conseilldayerDEFLAE sur dsfamages outdessjfichiers multimdias;scegfgchjiersstnt g ; t,
Lditcomprssir. : . a 1 - &#39;
Je te con se1&#39; de ta1 redu D1ErLAtE ou ez1 P un1<1 u e me nt sur des donnes de tvpe 1e x1e comme u n H1ML, css .
t J3, 1 .
nesrqum.on:.:avis =.1e &#39;t a 1ama 1s 1assdates: poussiadcsssmisattnticni, . *
Nico3333fr a dit le 201 003-11 20:53:20
. Je plussoie arnolem : c&#39;est compltement inutile de compresser des images censes dj tre compresses... et t
pire, a bouffera du temps CPU pour un rsultat nul. g j .
Par contre, sur dufichier texte... voir une CSS passer de 8 ko 2ko et une page html passer de14ko 4 ko, c&#39;est
quand mme intressant l t
Par contre, la mise encachedes images est souhaitable et mme recommande.
dj DMSR a dit le 201 0-034 2 02:25:38
r a
fMefrti
STudio26 a dit le 2010-0sm1219:14:10
Je confirme galement que le gain peut tre trs important, surtoutpourtout ce qui est texte (HTML, JavaScript, s
t CSS, XML me viennent l&#39;esprit). Non seulement on conomisetde la bande passante, mais un site ainsi .
comprim peut apparatre plus:"ractif". 1 1 t g g g t a
Les problmes de latence existeront toujours si vous aez beaucoup (trop) d&#39;objet surune page web. A ce
propos, Googleexprimente JSPDY, un protocole qui pourrait remplacer HTTP, dont un des points est de toujours
comprimer les donnes (httpJ/devchromium.org/spdy/spdy-whitepaper). La boucleest boucle. a
lroniede l&#39;histoire, wwwalsacreationscom n&#39;utilise pas de compression HTTP (ce n&#39;est pas une critique, juste
une remarque)... t t
dew a dit le 2010-08-32 21:80:42
j les pages:HTMLldlivresparlframeworktfstun ddix dlibr, Voillttpourqudsi.jeprcise dans lfarticlequ
netsagitrque dindicatitonsgitappliquertavetctprudenceretitajusterselon lesjcajstdetigure. tu t
]Porqttstbjptlcath/Xiavstpi ttr tkr/javattscrfbtjett d dn imts,lesdux?ttt 1 1 t s. 2 &#39; - . , ;:
a h,si,si,1lajcompressionestutilise[parlesSSgetJavaScriptj(combinefaunemisegensicachSltmaitsltpas,pour? t t
1
Changaco a dit 1e 2010-03-1318:46:00
Tout ce qui concerne Apache dans l&#39;article a t crit avec Debian en tte, il serait bien de le prciser. En effet
a2enmod ne fait pas parti du projet apache et /etc/apache2 n&#39;est pas utilis sur toutes les distributions (il existe
notamment /etc/httpd)p. } l i l l
youki a dit le 20101032211:47:16
1-Merci;puneicistdepiusirourcetarticlesextrmementgiqmessqnt.affx. H H
J&#39;en profite,1pourremercierfnolempourlepetitbout derjrog jsquand paslaar" l l
11 chance deppouvoirtile.tglrelct apachexeqpuijestfrhlheureusement. mon cas pour}; totalittde imes sitesenh .
youki a dit le 2010-03-221 1 158148
Merci, une foisde plus pour cet n-iemearticles extrmement intressant. q
il J&#39;en profite, pour remercier arnolem pour le petit bout de prog destin gziper le css etjs quand on n&#39;a pas la
chance de pouvoir le faire cot apache. Ce qui est malheureusement mon cas pour la totalit de mes sites en
exploitation. &#39; i l
i ALSNAUTE&#39;?._1. a
vcnaertezk-fs
[ALsAcAGNSesQ1101?l,- a 1 011 .
rAlsacraltions est unecocmmunautiddie1lapprentissagedesstandardspweb(W3C; HTMLJHTML, CS8) ainsi qu&#39;. 1 p p
x Vcellig Gmriquelen savoirsplus). 1 1 . 1 1 r
sungggg
LUMPOKHFl BblBOP KOELl:
l 89012
1 EEWJE
HHN

SPMP
. Quiz vous ni/Jouer; 1 I:
ssdbutant].
QM/ormrts/ &#39; il il i
tsaeaaNouvEAuTsf } l M l
Bolwer"pour_ls.nLuls (comme moi)
a c_ous._tesq. intgrateur ou, dveloppeur frojnt-enpczltvous avezjenvie de oupsfaciliterlla1vieytoutentant quelques allergique la lignelde
commandlunpeu comme moi en fait) xVOUS... Lire lasuite . . r 1 1 1" l l
_ k A Lld cerne i(yk s)
Problme scrorIhor ontarukgLaVIeriVLcss papychunc " "
Secunt do m ntsve hg rytho V
HGoogie- VFacebdokV Tittk Boutque VFbrmatviVons Haut deVpagt