Activer la compression Gzip facilement sans aucun plugin sur WordPress !

Mis à jour le
  • Présentation générale

    Pour activer la compression Gzip sur WordPress, il suffit d’éditer les fichiers header.php et footer.php de votre thème-enfant comme indiqué ci-dessous.

  • Création d’un thème enfant si nécessaire

    Si vous n’avez pas encore de thème-enfant, si votre thème est original :

    • Soit que vous l’ayez acheté tel quel
    • Soit que vous l’ayez téléchargé tel quel

    C’est l’occasion de créer votre premier thème-enfant afin que lors des prochaines mises à jour de votre thème par son concepteur, vous ne perdiez pas vos modifications, ni vos améliorations comme cette compression Gzip.
    Vous pourrez ainsi mettre à jour votre thème sans perdre aucune des améliorations que vous aurez apporté à votre thème.

    Ce tuto, explique très simplement comment faire un thème-enfant : Créer des thèmes enfants (child themes) avec WordPress

  • Modification des fichier header.php et footer.php

    Une fois ce thème-enfant créé, copiez-collez les fichiers header.php et footer.php dans votre dossier enfant, puis ouvrez -avec notepad++ (encodé en UTF8 sans BOM) :

    1. le fichier header.php et ajoutez l’instruction PHP suivante : ob_start('ob_gzhandler'); 
      avant la balise <!doctype html> située tout en haut de header.php.

      Autrement dit, la ligne :

      ?><!DOCTYPE html>

      du fichier header.php de votre thème-enfant est remplacée par :

       ob_start('ob_gzhandler'); ?><!DOCTYPE html>
    2. Ouvrez le fichier footer.php et ajoutez la ligne : <?php ob_end_flush(); ?> après la balise : </html> située tout à la fin du fichier footer.php

      Autrement dit :
      la dernière ligne du fichier footer.php de votre thème-enfant

      </html>
      

      est remplacée par

      </html>
      <?php ob_end_flush(); ?>
      
  • Vérification

    Vous pouvez vérifier que l’encodage Gzip est pris en compte grâce à l’outil en ligne RedBot.

    Le robot renvoie le contenu des entêtes HTTP où vous devez voir la ligne Content-Encoding: gzip qui confirme que la compression Gzip est fonctionnelle.

    Comme dans cet exemple :

    HTTP/1.1 200 OK
    Date: Fri, 20 Jul 2012 08:17:44 GMT
    Server: Apache/ProXad [Apr 20 2012 15:06:05]
    Content-Encoding: gzip
    Vary: Accept-Encoding
    X-Pingback: http://additifstabac.free.fr/xmlrpc.php
    X-Powered-By: PHP/5.1.3RC4-dev
    Connection: close
    Content-Type: text/html; charset=UTF-8

  • Bug engendré par cette technique sur certains navigateurs

    Dans le tableau de bord de WordPress, la page Apparence->Personnaliser reste grise. Le thème actif n’est plus prévisualisable.

      Ce bug est présent avec :

    • Firefox 30 (moteur de rendu Gecko),
    • Opera 22.0 (qui utilise le même moteur de rendu Blink que Chrome),
    • Safari 5.1.7 (moteur de rendu Webkit)
    • Internet Explorer 11.0.9 (moteur de rendu Trident)
      Mais il n’y a pas de bug avec :

    • Chrome 35 (moteur de rendu Blink dérivé de webkit),
    • SRWare Iron 35 (qui est dérivé de Chrome)
    • Maxthon 4.4.1 (moteur de rendu Webkit),

    la prévisualisation fonctionne parfaitement.

    il semble donc que l’implémentation des même moteurs de rendu des navigateurs soit la cause du problème.

  • Principe de la technique

    La première déclaration [ob_start('ob_gzhandler');] permet d’activer la compression de la page envoyée au client, la dernière [ob_end_flush();] permet de libérer le tampon du serveur pour lui permettre de passer à une autre tache.

  • Source

    Activer la compression sur les Pages Perso

    • Si vous avez trouvé une faute d’orthographe, informez-nous en sélectionnant le texte et en appuyant sur Ctrl + Enter

39 réflexions au sujet de « Activer la compression Gzip facilement sans aucun plugin sur WordPress ! »

  1. encore mieux pour mettre le level de compression : (ici 7 mais cela peut aller de 1 a 9 les meilleur réglage se situe entre 5 et 8
    plus compression est levé plus le temps de décompression est lent, si vous avez un site avec énormément de chose sur les pages régler bien !
    pour un site wp normal quelque plugin etc mettre 7 comme dans l’exemple ci dessous

    ini_set('zlib.output_compression_level', 7); 
    ob_start("ob_gzhandler"); ?>< !DOCTYPE html>
    

    apres pour savoir quel level mettre faite un test sur ce site :
    http://www.testthisurl.com/

    regarder en bas du résultat du test il y a un tableau avec les différent test de compression de 1 a 9 et choisissez le level que vous souhaitez
    PS : quand vous constater que de 1 level a l’autre il n’y a un gain que de 10 cela n’améliore pas le temps de chargement par exemple si le level 6 est de 1,557 ms et que le level 7 est de 1,551 ms autant mettre le level 6 et pas au dessus car le gain de temps n’est pas assez conséquent par rapport au temps de traitement du gzip

    Have fuun !

    1. Bonjour,
      Merci de cette information que j’ignorais.
      J’ai fait le test sur mon site le gain est le plus important avec un niveau de compression à 6.
      Merci

  2. Bonjour,

    merci pour ces supers infos !
    Par contre, j’ai un petit soucis, le code ajouté dans mon header apparait en ligne ;-(
    vous avez une idée du problème….
    je pense avoir trouvé, il faut se déconnecter de son administration wordpress, et là le code est effectivement invible ! ouf !

    Merci encore pour cette super astuce !

    1. Bonsoir,
      Vous avez du mal faire le copié-collé car rien ne doit apparaître nulle part, ni dans le tableau de bord, ni dans le header du site.
      Vérifiez bien l’ouverture et la fermeture des balises HTML

      1. Bonsoir,

        j’ai toujours le problème dans mon header :(

        Voici mon code :

        ob_start(‘ob_gzhandler’); ?>
        <html >
        <?php et ici codes de ma page…..

        Merci d'avance si vous pouvez m'aider !

        1. Bonsoir,
          Le problème doit certainement venir des apostrophes entourant ob_gzhandler. Il faut écrire le caractère quote (apostrophe droit) et non pas des apostrophes obliques.
          Utilisez notepad++ pour ce faire puis enregistrez le fichier en UTF8 sans BOM.

          1. Bonjour luciole,

            j’ai fait ce que vous m’avez conseillé, mais j’ai toujours le même problème….je ne comprends vraiment pas le problème :(

            1. Bonjour,
              Le plus simple est de tout recopmmencer à zéro.
              Remplacez les fichiers originaux header.php et footer.php de votre thème et vérifiez si le problème persiste ou non.
              Si le problème ne se pose plus, vous pouvez refaire la procédure, sinon, c’est que le problème a une autre cause. Il vous faudra alors investiguer avec l’aide d’un bénévole sur le forum support de wordpress.

              1. Bonjour,
                j’ai eu le même souci en collant simplement l’instruction. C’est arrangé en mettant

                <?php  ob_start('ob_gzhandler'); ?>< !DOCTYPE html>

                la fin de balise s'est bien mise et le test Redbot impeccable.
                Merci pour tous ces tutos qui me permettent de mettre à jour et d'améliorer mon blog

                1. Bonjour,
                  Quel est le thème que vous utilisez ?
                  Quelles sont les lignes originelles et qu’avez-vous fait exactement ?

                  Avec un des thèmes par défaut, dans le fichier header.php
                  la ligne à modifier est celle-ci :

                  ?>< !DOCTYPE html>

                  Comment est–elle écrite dans votre thème ?

                  1. Bonjour, pour répondre à la question, moi je n’est pas « ?>  » , je n’est que «  ».

                    Du coup ca donne « ob_start(‘ob_gzhandler’); .

                    Est ce que c’est bon ?
                    Merci luciole

                    1. Non, <?php et ?> sont des balises d’ouverture et de fermeture de session PHP.
                      En leur absence les fonctions PHP ne peuvent pas fonctionner.

    1. Bonjour,
      On met bien entendu les fichiers header.php et footer.php modifiés dans le thème enfant afin que ces derniers priment sur ceux du thème parent.

  3. bonjour,
    Merci de l’aide que vous apportez aux néophytes possesseurs de sites wordpress hébergés chez free !
    j’ai un soucis de compression, le patch que vous proposez ne fonctionne pas chez moi
    Apparemment la compression gzip n’est pas reconnue chez free, j’ai regardé sur php.ini et il n’y a que la compression bz2.

    j’ai la version 3.9.2 et utilise un thème enfant de twentyfourteen

    1. La compression gzip est independante de la version de wordpress.
      Gzip fonctionne chez free et sert à compresser les pages envoyées par le serveur.
      Si vous parlez de l’installation de wordpress, suffit de dezipper le pack sur votre ordinateur perso !

      1. Merci de votre aide,
        Je voudrais compresser le contenu de mon blog, j’ai appliqué les modifications sur le header et le footer du thème enfant et j’ai le message suivant quand je veux voir mon site : http://daziba0.free.fr

        Erreur d'encodage de contenu

        La page que vous essayez de voir ne peut être affichée car elle utilise un type de compression invalide ou non pris en charge.

        Veuillez contacter les propriétaires du site pour les informer de ce problème.


        ayant modifié le header pour intégrer un script (google analytics) j’ai essayé avec un fichier header et footer d’origine, même problème

        1. Je viens de changer de thème, et repris le thème twentyfourteen d’origine, j’ai fait les modifs des 2 fichiers header et footer toujours le même problème, l’encodage n’est plus reconnu.
          cela vient donc d’ailleurs, je vais voir sur le forum wp
          Encore merci

  4. Salut,

    Cette technique va compresser la page, mais pas les ressources… donc les fichiers .js et .css ne seront pas compressés et c’est souvent ce type de ressources qui ont besoin d’être compressées.

    1. C’est bien mieux ainsi !

      Il est inutile de compresser les fichiers JS ou CSS à chaque génération de page HTML avec gzip. Ils peuvent très bien être compressés une fois pour toutes puisque leur contenu est toujours identique et indépendant des pages du site visité.

      D’ailleurs il existe beaucoup de sites en ligne qui effectuent ces compressions. Mais vous pouvez aussi très bien compresser ces derniers avec des logiciels installés sur votre ordinateur perso.

  5. J’ai suivi votre méthode, red bot me dit ceci: GZip-compressed responses have a header that contains metadata. This response’s header wasn’t valid; the error encountered was « Not a gzip header (magic is hex 0a1f, should be 1f8b) ».
    Lorsque je vais dans page speed, je gagne bien en rapidité, 96 %, mais mon site n’apparait plus dans chrome « erreur ». Pouvez vous m’aider.
    Cordialement.

  6. Bonjour,

    J’utilise le théme spacious, j’ai placé dans spacious-child qui contenait seulement style.css, les fichiers header.php et footer.php modifiés

    Le header.php initial est ainsi :
    <?php
    /**
    * Theme Header Section for our theme.
    *
    * Displays all of the section and everything up till
    *
    * @package ThemeGrill
    * @subpackage Spacious
    * @since Spacious 1.0
    */
    ?>

    J’ai corrigé ainsi :
    ob_start(‘ob_gzhandler’); ?>

    et le footer comme indiqué :

    avec Redbot j’obtiens :

    HTTP/1.1 200 OK
    Date: Wed, 19 Aug 2015 22:26:48 GMT
    Server: Apache/ProXad [Jul 22 2015 14:50:04]
    Content-Encoding: gzip
    Link: ; rel=shortlink
    Vary: Accept-Encoding
    X-Pingback: http://chantal.attia.free.fr/xmlrpc.php
    X-Powered-By: PHP/5.6.8
    Connection: close
    Content-Type: text/html; charset=UTF-8

    Avec ceci : This response was compressed using GZip, but the header wasn’t valid. (GZip-compressed responses have a header that contains metadata. This response’s header wasn’t valid; the error encountered was « Not a gzip header (magic is hex 0d0a, should be 1f8b) ».

    Mon site n’apparait pas ni sur Chrome ni sur firefox, il s’affiche à la place une page : Erreur d’encodage de contenu

    Je ne sais pas où est l’erreur.

    Merci

    Merci.

    1. Bonjour,
      Vous devriez faire une capture d’écran et la mettre sur un service de stockage temporaire comme http://www.casimages.com/ ou autre. J’ai l’impression qu’il manque < !DOCTYPE html>.

      Édit 14 h 35 : Je viens de regarder ce thème et en effet, la ligne unique des thèmes par défaut de WordPress (qui sert d’exemple dans mon tuto) est écrite sur deux lignes dans ce thème.
      Ainsi, vous devez remplacer :

      ?>
      <!DOCTYPE html>

      par

      ob_start('ob_gzhandler'); ?>
      <!DOCTYPE html>
      1. J’ai fait le corrigé sur 2 lignes, il manquait aussi un espace entre < et le !

        Le site s’affiche mais cette fois-ci avec cette phrase en haut de page :

        Warning: ob_start(): output handler ‘ob_gzhandler’ cannot be used twice in /var/www/sdb/9/1/chantal.attia/wp-content/themes/spacious/header.php on line 11

        Pourtant j’ai bien fait comme indiqué et vérifié le wp-content/themes/spacious/header.php on line 11 je ne vois pas où est le problème

        http://i18.servimg.com/u/f18/17/88/42/15/hearde10.jpg

        Merci

        1. Bonsoir,
          Non, il ne manquait pas d’espace, c’est l’éditeur de commentaire de WordPress qui l’a ajouté. Il n’y est pas lorsque j’édite le commentaire et apparaît à l’affichage (c’est dingue ce truc !).

          J’ai du pour supprimer cet espace bizarre écrire les caractères en code HTML, c’est à dire écrire « &lt;! » pour faire apparaitre à l’écran « <! » (dingue non ?).

          L’erreur vient de là : ne rajoutez pas un seul espace, contentez-vous d’ajouter de remplacer la ligne

          ?>

          par

          ob_start('ob_gzhandler'); ?>

          et ne touchez pas à la suivante.

            1. Cette erreur indique que vous utilisez deux fois cette fonction ob_gzhandler. Est-ce un plugin qui l’utilise ?
              Désactivez-les tous pour vérifier si c’est le cas.

  7. Oui c’est bien le cas j’avais installé WordPress Gzip Compression comme vous l’aviez suggéré à Michel ce qui faisait doublon.
    Mais quand je désactive « WordPress Gzip Compression » en ayant changé le footer et le header comme indiqué, encore une fois la page n’apparaît pas du tout.
    Je suis confuse du temps que cela prend….

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *