skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

dimanche 26 avril 2009

Compression HTTP avec GZip

Publié par Infinite Loop, à 12 h 21 0 commentaire

Le développement web utilise de plus en plus de librairies JavaScript pour agrémenter l'expérience d'un site web mais qui vient inmanquablement avec l'inconvénient d'augmenter considérablement le volume de l'information à télécharger. Bien qu'on puisse utilise YUI Compressor pour réduire la taille des fichiers, on peut aussi tirer avantage de sa combinaison avec GZip (GNU Zip) au niveau du serveur web pour automatiser la compression HTTP des types de contenus textes (HTML, CSS, JavaScript, etc).

L'objectif avec GZip est de faire en sorte que le serveur compresse l'information à envoyer au client (fureteur) et celui-ci est normalement en mesure d'accepter et d'interpréter le contenu en le dézippant, tout cela de façon transparente pour l'utilisateur. Ça permet entre autre d'augmenter la vitesse de téléchargement puisque les fichiers sont plus petits et donc de réduire la bande passante utilisée.

Avec Firefox, on peut voir s'il est configuré pour accepter du contenu compressé en entrant about:config dans la barre d'adresse et en recherchant la clé network.http.accept-encoding. S'il est activé (par défaut avec les fureteurs récents), il devrait avoir la valeur gzip,deflate. Certains fureteurs plus vieux n'ont pas cette capacité, par exemple ceux basés sur Mozilla 4.

Pour ajouter la compression sur un serveur Apache, il faudra utiliser le module mod_deflate. Son activation repose principalement sur ceci dans le fichier httpd.conf :

  • Ajouter le chargement du module :

    LoadModule deflate_module modules/mod_deflate.so

  • Ajouter les lignes suivantes (de façon globale ou dans le vhost qui doit l'utiliser) :

    Activer le filtre :
    SetOutputFilter DEFLATE

    Spécifier les types à compresser (ne pas oublier d'ajouter JavaScript!) :
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript

  • Apache recommande la configuration suivante pour gérer les exceptions de certains types de fureteurs. Pour s'assurer que tout fonctionne normalement, n'oubliez pas de tester dans un environnement de développement avant de le mettre en production!

    # Insert filter
    SetOutputFilter DEFLATE

    # Netscape 4.x has some problems...
    BrowserMatch ^Mozilla/4 gzip-only-text/html

    # Netscape 4.06-4.08 have some more problems
    BrowserMatch ^Mozilla/4\.0[678] no-gzip

    # MSIE masquerades as Netscape, but it is fine
    # BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

    # NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
    # the above regex won't work. You can use the following
    # workaround to get the desired effect:
    BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

    # Don't compress images
    SetEnvIfNoCase Request_URI \
    \.(?:gif|jpe?g|png)$ no-gzip dont-vary

    # Make sure proxies don't deliver the wrong content
    Header append Vary User-Agent env=!dont-vary

Une fois la configuration terminée, on peut noter quelques chiffres concernant les améliorations apportées :
  • Sur la page d'accueil de jQuery, ils annoncent que leur librairie ne pèse que 19 kb. Remarquez à côté que les termes "Minified and Gzipped" sont ajoutés.
  • Le fichier original de la version 1.3.2 a un poids non compressé de 117 kb.
  • En compressant le fichier (minified) avec la dernière version du YUI Compressor, on obtient un résultat de 56 kb, soit le même que celui offert en téléchargement sur le site de jQuery. C'est son poids réel occupé sur le disque et c'est lui qui sera mis en ligne dans notre projet.
  • Durant le transfert, si GZip est activé, on note grâce à Firebug et son onglet Net, que le fichier zippé n'a nécessité que 20 kb de téléchargement par le client, soit 65% de moins que la version réduite et 5 fois plus petite que l'originale.
En conclusion, la compression HTTP est une excellente pratique pour réaliser une économie d'échelle sur le bandwidth et accélérer la vitesse de chargement des composants. N'hésitez surtout pas à vous en servir.


Tags: Apache, JavaScript

0 réponse à "Compression HTTP avec GZip"


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (55)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ►  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ▼  2009 (429)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ▼  avril 2009 (35)
        • Coeur de pirate
        • Photos des développeurs d'OpenOffice
        • Audiotool, studio musical en Flash
        • Compresser TinyMCE
        • Compression HTTP avec GZip
        • Citation no. 27 sur les geeks
        • Compter sur ses doigts
        • Disque dur externe
        • Cocher toutes les cases d'un formulaire
        • Plugin mp3 Fluendo sur Fedora
        • Ajouter du support mp3 à Fedora 10
        • Injection sur PostgreSQL
        • Préférer la balise button à un bouton de formulaire
        • Citation no. 26 sur les logiciels gratuits
        • Écrire du texte à l'envers
        • Amazon = rapide !
        • Amazon.ca en français
        • Centrer un objet dans la page en CSS
        • La fonction PHP la moins utilisée
        • PHP CLI
        • Filtrer une liste de fichiers avec glob
        • Image style Polaroid avec ImageMagick
        • Citation no. 25 sur le langage de programmation pa...
        • Plugin jQuery pour upload de fichiers multiples
        • Comparer des fichiers avec Dreamweaver
        • Compatibilité Internet Explorer 8
        • Temps de chargement d'une page web
        • Installer APC sur Windows
        • Encore une fois Vidéotron...
        • Shazam et SnapTell
        • Citation no. 24 sur le parachutisme
        • Définir une séquence PostgreSQL
        • Pro PHP
        • J is null dans Prototype
        • Poisson d'avril 2009
      • ►  mars 2009 (36)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft