Optimiser le chargement de vos pages avec la compression Gzip

Cet article a 4 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci

HistogrammeVous n’êtes pas sans savoir que depuis maintenant quelques mois Google prend en compte la vitesse de chargement de vos pages Web pour effectuer son classement lors de l’indexation et du retour des résultats de recherche.

On peut donc facilement résumer cela par : à site léger, meilleur référencement tu auras !

Pourquoi compresser ?

La compression vous permettra d’optimiser votre site sur plusieurs points très intéressants à prendre en compte :

  • économie de la bande passante
  • performances du site
  • référencement

Rien que ces points devraient vous donner envie d’en savoir un peu plus… non ?

Mais qu’est-ce que c’est ?

La compression gzip est une compression utilisant un format GNUzip (le projet GNU). Tout se passe directement sur les serveurs hébergeant vos sites Web. Le serveur compresse les données, votre navigateur lui se chargera de les décompresser.

  1. Le serveur compresse les données (code HTML, CSS, javascript, etc.)
  2. Les fichiers transitent par le réseau via HTTP
  3. Le navigateur décompresse les données avant de les interpréter

Mon navigateur le prend en charge ?

La plupart des navigateurs modernes prennent en charge ce type de compression puisqu’elle est prévue depuis 1999. Ainsi Firefox, Opera et Safari prennent en charge cette compression sur toutes leurs versions, opera depuis sa version 5.12 et IE depuis sa version 4.

Oui mais…

Jusqu’à IE6 ce mode de compression pose quelques problèmes, puisqu’il peut arriver certains bogues lors de la décompression. C’est pourquoi dans les quelques lignes de code qui vont suivre, IE ne sera pas pris en compte (impossibilité de cibler un navigateur sur sa version).

Utiliser la compression Gzip

Le code que je vais vous donner est un code simplifié fonctionnel pour les serveurs mutualisés OVH. En effet pour plus de détail sur son utilisation sur d’autres « niveaux » de serveurs, je vous renvoie sur l’excellent article de Dew.

Je vous invite donc à créer un fichier .htaccess à la racine de votre site. Pour cela sous Windows il vous faudra créer un fichier .txt et en changer l’extension directement sur votre serveur. (grâce à Filezilla par exemple)
Quoi qu’il en soit je vous invite à entrer ces quelques lignes de codes dans votre fichier. Ce sont celles que j’utilise sur ce domaine, cela fonctionne parfaitement, mais peut-être n’aurez-vous pas besoin de tout, je vous détaille donc chaque ligne.

Fichier « .htaccess »

##	activation ZEND optimizer
SetEnv ZEND_OPTIMIZER 1

##	suppression de SESSID dans les url
SetEnv SESSION_USE_TRANS_SID 0

##	serveur en PHP5
SetEnv PHP_VER 5

##	Commenter la ligne ci-dessous si plantage 
# php_flag zlib.output_compression on

##	Activer le filtre
SetOutputFilter DEFLATE

##	Certains navigateurs ne peuvent pas avoir GZIP (les vieux) 
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0678 no-gzip

##	On ne prend pas IE 
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

##	On ne compresse pas les images, elles le sont déjà
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

##	on gère le cas des proxy 
Header append Vary User-Agent env=!dont-vary

Pour information un dièse devant une ligne sert à commenter cette ligne, elle devient donc une simple note et n’est pas comprise par le serveur. Le double dièse c’est juste pour la présentation :)

Le ZEND OPTIMISER doit être activé (ligne 2) pour pouvoir utiliser la compression Gzip. Sauf que sur OVH il semblerait que PHP5 soit nécessaire pour que l’outil de compression fonctionne. Il faut donc renseigner la version de PHP à utiliser (ligne 8).

Bon ! Sachez que je ne suis pas spécialiste du langage indien (Apache), donc certains points sont flous pour moi. Si un des visiteurs s’y connait là dessus qu’il n’hésite pas à nous en dire davantage.
Merci d’avance.

Et après ?

Et bien normalement c’est tout. Vous venez d’optimiser votre site Internet pour son chargement. Votre référencement vous remerciera, et vos visiteurs aussi je pense !

Vous pouvez, si ce n’est pas déjà fait, inscrire votre site Internet sur Google dans les outils pour Webmasters. Cet outil très pratique vous livre un grand nombre d’informations sur la vitesse de chargement de vos pages (Labos > Performances du site), mais aussi sur les principaux sites qui redirigent sur vos pages, sur les mots-clefs qui ressortent de l’indexation de vos pages, etc.
Un outil très pratique, et gratuit, dont il serait dommage de se priver.

La prochaine fois nous verrons comment utiliser d’autres outils à notre disposition pour tester l’optimisation de nos pages Web, ainsi que la mise en cache des fichiers de notre site.

A la prochaine ;)

32 commentaires et un trackback sur “Optimiser le chargement de vos pages avec la compression Gzip”

  1. Sam dit :
    9 février 2011

    Bonjour,

    Très bien ce petit script d’optimisation, je suis passé d’une page de 104ko à 18ko !
    Par contre ce que je ne comprend pas c’est que sous firefox quand je fait information de la page, j’ai bien 18ko, mais sous chrome avec l’outils d’analyse, il me met toujours 102ko. Quelqu’un aurait-il une explication ?

  2. Geoffrey dit :
    12 février 2011

    Bonsoir,

    Il est probable que l’outil d’analyse de Chrome ne présente que le chiffre après décompression, tout simplement, mais cela m’étonne tout de même.
    Quel outil utilisez-vous ?

    Je pense que la compression n’en reste pas moins efficace :)

    Bonne continuation Sam.

  3. Geoffrey dit :
    13 février 2011

    Bonjour Sam,

    Voici de quoi tester une page : http://www.whatsmyip.org/http_compression/

    Je l’ajoute aux liens utiles de l’article.

  4. Arnaud dit :
    30 mars 2011

    Merci, c’est vrai de plus en plus important d’optimiser au mieux le temps de chargement de ses sites web.

  5. 14 août 2011

    ho nice !
    ca marche super bien !
    je suis passé d’une page de 95ko a 13ko
    merci beaucoup

  6. Olivier dit :
    17 septembre 2011

    Ca marche super bien . Je viens de gagner un temps précieux pour la vitesse de chargement de mon blog .
    Merci à toi pour ces lignes de code .

    • Geoffrey dit :
      17 septembre 2011

      Je t’en prie, et merci à toi pour ton retour :)

  7. 18 avril 2012

    Bonjour. Votre code pour le fichier .htaccess fonctionnerait-il sur un mutualisé Online.net ?

    Merci. Alex

    • Geoffrey dit :
      18 avril 2012

      Bonsoir,
      Je fais souvent mention de OVH car je n’ai que ça sous la patte pour tester, mais normalement ça devrait fonctionner.
      Il suffit de tester, si ça pose problème ça devrait provoquer une erreur 500 :)
      Au plaisir.

  8. Romain dit :
    15 mai 2012

    Sur OVH, c’est pas PHP 4 qui tourne plutôt ?

  9. Romain dit :
    15 mai 2012

    Quelle est l’utilité de

    ## activation ZEND optimizer
    SetEnv ZEND_OPTIMIZER 1
    ## suppression de SESSID dans les url
    SetEnv SESSION_USE_TRANS_SID 0

    Personnellement, je n’utilise que les deux lignes ci-dessous et tout à l’air de fonctionner :)

    SetOutputFilter DEFLATE
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/x-javascript

  10. Geoffrey dit :
    15 mai 2012

    Bonjour Romain,

    Je crois que PHP4 tourne encore par défaut chez OVH oui, du coup il faut « activer » PHP 5 ou utiliser des extensions .php5 (ce qui n’est pas pratique).

    Comme pour l’activation de PHP 5, tout dépend de l’activation ou non de ZEND_OPTIMIZER.
    Je m’assure qu’il soit activé. Mais si ça fonctionne sans tant mieux.

    SESSION_USE_TRANS_SID est une saloperie (désolé) de OVH qui te place une variable PHPSESSID vers les pages en PHP. Elle est activée par défaut. Je ne sais pas l’expliquer, je sais juste que désactiver cette option permet de retirer l’info dans l’URL.

    Voili voiloù ^^

  11. Romain dit :
    17 mai 2012

    Merci pour les précisions :) Et que fait :

    ## on gère le cas des proxy
    Header append Vary User-Agent env=!dont-vary

    ?

  12. Geoffrey dit :
    17 mai 2012

    Je pense que la doc t’aidera plus que mes explications approximatives : http://httpd.apache.org/docs/trunk/fr/mod/mod_deflate.html

    Bonne continuation :)

  13. SOSPC95 dit :
    3 juillet 2012

    Bonjour Geoffrey,

    Sur mon .htaccess, il y à pas mal de codes et je voudrais faire le tri dans tout ça, je voulais ajouter ton code mais certains y sont déjà mais écrit différemment.

    Saurais-tu me dires si j’ai des codes inutiles qu’on peut supprimer ou modifier.

    Voici mon htaccess :

    ———————–
    SetEnv PHP_VER 5_4
    SetEnv REGISTER_GLOBALS 0
    SetEnv ZEND_OPTIMIZER 1

    # MAIN
    RewriteEngine On
    ServerSignature Off
    Options All -Indexes
    Options +FollowSymLinks

    # SVN protect
    RewriteRule ^(.*/)?.svn/ – [F,L]

    # Secure .htaccess

    Order Allow,Deny
    Deny from all

    # Secure wp-config.php

    Order Deny,Allow
    Deny from all

    # FILTER REQUEST

    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d

    # BEGIN W3TC Browser Cache

    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

    Header append Vary User-Agent env=!dont-vary

    AddOutputFilterByType DEFLATE text/css application/x-javascript text/x-component text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon

    FileETag None

    Header set X-Powered-By « W3 Total Cache/0.9.2.4″

    FileETag None

    Header set X-Powered-By « W3 Total Cache/0.9.2.4″

    FileETag None

    Header set X-Powered-By « W3 Total Cache/0.9.2.4″

    # END W3TC Browser Cache
    # BEGIN W3TC Page Cache core

    RewriteEngine On
    RewriteBase /blog/
    RewriteRule ^(.*\/)?w3tc_rewrite_test$ $1?w3tc_rewrite_test=1 [L]
    RewriteCond %{HTTP:Accept-Encoding} gzip
    RewriteRule .* – [E=W3TC_ENC:_gzip]
    RewriteCond %{REQUEST_METHOD} !=POST
    RewriteCond %{QUERY_STRING} = » »
    RewriteCond %{HTTP_HOST} =www.sospc95.fr
    RewriteCond %{REQUEST_URI} \/$ [OR]
    RewriteCond %{REQUEST_URI} (sitemap(_index)?\.xml(\.gz)?|[a-z0-9_\-]+-sitemap([0-9]+)?\.xml(\.gz)?) [NC]
    RewriteCond %{REQUEST_URI} !(\/wp-admin\/|\/xmlrpc.php|\/wp-(app|cron|login|register|mail)\.php|\/feed\/|wp-.*\.php|index\.php) [NC,OR]
    RewriteCond %{REQUEST_URI} (wp\-comments\-popup\.php|wp\-links\-opml\.php|wp\-locations\.php) [NC]
    RewriteCond %{HTTP_COOKIE} !(comment_author|wp\-postpass|wordpress_\[a\-f0\-9\]\+|wordpress_logged_in) [NC]
    RewriteCond %{HTTP_USER_AGENT} !(W3\ Total\ Cache/0\.9\.2\.4) [NC]
    RewriteCond « %{DOCUMENT_ROOT}/blog/wp-content/w3tc/pgcache/%{REQUEST_URI}/_index%{ENV:W3TC_UA}%{ENV:W3TC_REF}%{ENV:W3TC_SSL}.html%{ENV:W3TC_ENC} » -f
    RewriteRule .* « /blog/wp-content/w3tc/pgcache/%{REQUEST_URI}/_index%{ENV:W3TC_UA}%{ENV:W3TC_REF}%{ENV:W3TC_SSL}.html%{ENV:W3TC_ENC} » [L]

    # END W3TC Page Cache core
    # BEGIN WordPress

    RewriteEngine On
    RewriteBase /blog/
    RewriteRule ^index\.php$ – [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /blog/index.php [L]

    # END WordPress

    ## EXPIRES CACHING ##

    ExpiresActive On
    ExpiresByType image/jpg « access 1 year »
    ExpiresByType image/jpeg « access 1 year »
    ExpiresByType image/gif « access 1 year »
    ExpiresByType image/png « access 1 year »
    ExpiresByType text/css « access 1 month »
    ExpiresByType application/pdf « access 1 month »
    ExpiresByType text/x-javascript « access 1 month »
    ExpiresByType application/x-shockwave-flash « access 1 month »
    ExpiresByType image/x-icon « access 1 year »
    ExpiresDefault « access 2 days »

    ## EXPIRES CACHING ##
    ————————–

    Merci
    Cordialement
    SOSPC95

  14. Geoffrey dit :
    3 juillet 2012

    Hello,

    Je ne suis pas expert sur l’organisation d’un fichier .htaccess, mais il me semble que tu as des lignes dupliquées :

    FileETag None
    Header set X-Powered-By "W3 Total Cache/0.9.2.4″
     
    FileETag None
    Header set X-Powered-By "W3 Total Cache/0.9.2.4″
     
    FileETag None
    Header set X-Powered-By "W3 Total Cache/0.9.2.4"

    De même RewriteEngine semble apparaitre plusieurs fois, la déclaration initiale doit être suffisante.

    Sinon pour plus de détails, notamment pour les contextes de réécriture :
    apache.org – Mod_Rewrite

  15. SOSPC95 dit :
    3 juillet 2012

    En effet, j’avais pas vu, je vais déjà supprimer les lignes dupliquées.
    Et sinon le code que tu donnes dans cet article, je peux le rajouter sans problème, je n’aurais pas de code dupliqués ?

  16. Romain dit :
    3 juillet 2012

    Je ne pense pas que ça soit utile, la compression GZIP à l’air déjà activée.
    Tu as déjà ca :


    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

    Header append Vary User-Agent env=!dont-vary

    AddOutputFilterByType DEFLATE text/css application/x-javascript text/x-component text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon

    Et enfin si j’étais toi, à part supprimer les lignes dupliquées je ne toucherais à rien, WordPress risquerait de ne plus fonctionner correctement ;)

  17. Geoffrey dit :
    3 juillet 2012

    Yep, tu as déjà la compression Gzip activée :)
    Mêmes conseils que Romain, ne touche à rien entre les commentaires de WordPress.
    Merci Romain !

  18. Romain dit :
    3 juillet 2012

    :)

  19. SOSPC95 dit :
    3 juillet 2012

    Ok, merci pour vos conseils.

  20. Romain dit :
    6 mai 2013

    Petite mise à jour vers
    SetEnv PHP_VER 5_3
    ?

    Encore merci pour cet article, il me sert fréquemment.

  21. Romain dit :
    6 mai 2013

    Et petit ajout, selon ce site http://redbot.org/, cette ligne est à éviter :

    Header append Vary User-Agent env=!dont-vary

    Des avis/explications ?

    • Geoffrey dit :
      7 mai 2013

      Merci Romain, c’est édité oui.
      La dernière fois j’avais 5_TEST moi. Drôle de version…

      Sinon pour le header, je sais juste que dans certains cas ça fait planter le serveur, mais je n’ai jamais rencontré le cas sur OVH.
      Si c’est déconseillé pour une autre raison, je ne la connais pas.

  22. Damien dit :
    9 mai 2013

    Bonjour,

    Dans votre code, il est écrit :
    ## Commenter la ligne ci-dessous si plantage
    # php_flag zlib.output_compression on

    Donc à la base, on doit décommenter cette ligne afin que ça fonctionne? Sinon, elle sert à quoi exactement?

    Merci pour votre aide :)

  23. Raph dit :
    24 juillet 2013

    Yop tout le monde, j’ai placé le fichier .htaccess avec le code repris ci-dessus mais malheureusement il m’affiche des erreurs dans ma page.

    Warning: include() [function.include]: URL file-access is disabled in the server configuration in /homez.27/chinaeur/www/fr/catalogues.php on line 37

    Warning: include(http://www.ceb2b.eu/fr/nav.php) [function.include]: failed to open stream: no suitable wrapper could be found in /homez.27/chinaeur/www/fr/catalogues.php on line 37

    Warning: include() [function.include]: Failed opening ‘http://www.ceb2b.eu/fr/nav.php’ for inclusion (include_path=’.:/usr/local/lib/php’) in /homez.27/chinaeur/www/fr/catalogues.php on line 37

    Warning: include() [function.include]: URL file-access is disabled in the server configuration in /homez.27/chinaeur/www/fr/catalogues.php on line 50

    Warning: include(http://www.ceb2b.eu/fr/blocs.php) [function.include]: failed to open stream: no suitable wrapper could be found in /homez.27/chinaeur/www/fr/catalogues.php on line 50

    Warning: include() [function.include]: Failed opening ‘http://www.ceb2b.eu/fr/blocs.php’ for inclusion (include_path=’.:/usr/local/lib/php’) in /homez.27/chinaeur/www/fr/catalogues.php on line 50

    Est ce que qqn peut m’aider ? Merki :-)

  24. Raph dit :
    30 juillet 2013

    Bonjour Geoffrey,

    Merci pour ta réponse.
    Mes include fonctionne correctement, c’est seulement lorsque je place ce bout de code dans le ht.access qu’il m’affiche cette erreur.

    Bonne journée également

  25. Woolyss dit :
    1 septembre 2013

    Merci pour cet article bien pratique !

    @Raph, il faut que tu vérifies à chaque fois les directives du htaccess afin de t’assurer que tout fonctionne convenablement. Il ne faut pas copier bêtement les choses qu’on trouve sur le net. En plus, ici, c’est clair et détaillé. Merci à l’auteur!

  26. Jojaba dit :
    24 décembre 2013

    Bonjour et merci pour cette ressource !

    Je ne suis pas un spécialiste du paramétrage de serveur Apache non plus, alors j’ai « bêtement » copié-collé le code que tu proposais il y a plus de 3 ans !
    Ça fonctionne ainsi sur un hébergement mutualisé ovh Pro. Depuis 3 ans les choses ont un peu changé donc php5 est à présent la version par défaut (ou pour être plus précis, la version 5.3.13), pas besoin de la ligne qui défini la version à utiliser. Pour le reste, comme je n’y connais pas grand-chose, j’ai laissé comme c’était. Le gain est visible, les pages s’affichent vraiment beaucoup plus rapidement. On va voir si le cpu du serveur va supporter cette charge supplémentaire. Je vous tiens au courant.
    Joyeux Noël à tous ! :)

Laisser un commentaire

Certains codes HTML ne sont pas échappés automatiquement. Pour afficher du code dans votre commentaire, merci d'échapper vos chevrons en utilisant "&lt;" et "&gt;" en lieu et place de "<"" et ">".

Il est difficile de proposer un support pour tous les articles de ce blog. En ne fournissant pas un moyen de consulter votre code bogué, vous vous assurez de ne pas avoir de réponse adaptée. Utilisez CodePen.io à défaut d'une page web.

Les sites qui en parlent

 
Le studio web