90 % sur GMe­trix les doigts dans le nez

Quelques outils et conseils pour opti­mi­ser votre site

Lorsque Google a déci­dé que le temps de char­ge­ment d’une page était un élé­ment impor­tant pour son réfé­ren­ce­ment, les uti­li­sa­teurs de Word­Press ont dû apprendre l’économie et l’optimisation. Et les créa­teurs de thème ont dû res­ser­rer un peu les bou­lons. Ce qui n’est pas un mal…
Mais obte­nir 90 % sur GMe­trix n’est pas tou­jours évident à obte­nir. Voi­ci quelques exten­sions et conseils que j’ai gla­nés ici et là pour vous aider à y arri­ver. Je ne pré­tends par à l’exhaustivité et je ne suis pas un spé­cia­liste de la ques­tion mais ça vous devrait vous aider.

Opti­mi­sez votre .htac­cess

Les sites de nota­tion véri­fient si les visi­teurs stockent bien dans le cache de leur navi­ga­teur le conte­nu des pages qu’ils visitent pour une durée de temps suf­fi­sante. Pour ce faire, il faut modi­fier le fichier .htac­cess à la racine de votre ins­tal­la­tion Word­Press et du lui ajou­ter ces lignes :

ExpiresActive On
ExpiresDefault "access plus 10 day"
ExpiresByType image/gif "access plus 2 years"
ExpiresByType image/jpg "access plus 2 years"
ExpiresByType image/png "access plus 2 years"
ExpiresByType image/jpeg "access plus 2 years"
ExpiresByType text/javascript "access plus 2 years"
ExpiresByType application/x-javascript "access plus 2 years"
ExpiresByType text/css "access plus 2 years"
ExpiresByType text/html "access plus 1 day"
ExpiresByType text/plain "access plus 1 day"
ExpiresByType application/x-shockwave-flash "access plus 2 years"

Vous en pro­fi­te­rez pour “tuer” les Etags mais je n’ai pas trop com­pris ce que c’est :

# KILL THEM ETAGS
Header unset ETag
FileETag none

Mini­fiez moi tout ça

Votre site Word­Press uti­lise des fichiers .css pour la pré­sen­ta­tion et des fichiers Javas­cript pour les effets visuels. Le navi­ga­teur doit char­ger cha­cun des fichiers un par un et ça le ralen­tit. Alors qu’on pour­rait regrou­per tout ça dans un seul et même fichier voire opti­mi­ser le tout et le com­pres­ser. C’est la “mini­fi­ca­tion”.
De nom­breuses exten­sions s’en chargent – notam­ment les exten­sions de cache les plus connus – mais ma pré­fé­rée c’est Autop­ti­mize.

Remarque

Vu l’action réa­li­sés sur les fichiers néces­saires au fonc­tion­ne­ment de votre site, il se peut que le thème “plante” après acti­va­tion d’une telle exten­sion. N’hésitez pas à tes­ter une autre exten­sion du même genre qui sera peut-être plus com­pa­tible. Dans tous les cas, il fau­dra par la suite bien véri­fier votre site pour toutes les exten­sions néces­si­tant du Javas­cript. L’utilisation de ces codes dans Word­Press s’est nor­ma­li­sée mais on n’est pas à l’abri d’un mau­vais codeur.

Opti­mi­sez les images

GMe­trix va véri­fier si les images affi­chées sont d’un poids opti­mum rela­ti­ve­ment à leur taille et réso­lu­tion. La seule solu­tion fiable à mes yeux, c’est l’extension EWWW Image Opti­mi­zer.
Atten­tion !: contrai­re­ment à ce que s’imaginent les gens, l’extension ne va pas trans­for­mer une image de 2 Mo en une image de 50 ko tout en conser­vant sa qua­li­té. Il fait gagner 10 à 20 % du poids mais cela suf­fi­ra pour satis­faire GMe­trix et les sites équivalents.

Lazy Loa­ding des images

Inutile de char­ger les images pas encore visibles dans la navi­ga­teur et vaut mieux attendre que le visi­teur soit arri­vé des­sus pour les appe­ler. Pour cela il faut une exten­sion de lazy loa­ding. Ils sont nom­breux et, comme pour la mini­fi­ca­tion, il peut y avoir des inter­fé­rences avec votre thème ou d’autres exten­sions. Véri­fiez aus­si que cela fonc­tionne sur plu­sieurs navi­ga­teurs (j’en ai pra­ti­qué un qui ne char­geait pas les images sous Inter­net Explo­rer). J’utilise Rocket Lazy Load.

Les gra­va­tar en cache

Les Gra­va­tars c’est super chouette mais il faut aller les cher­cher sur les ser­veurs dis­tants et si vous avez beau­coup de com­men­ta­teurs, c’est un peu lourd.
Là encore, une exten­sion de cache spé­ci­fique devrait aider : Harry’s Gra­va­tar Cache.

Ins­tal­lez une exten­sion de cache

L’extension de cache est plu­tôt à conseiller aux sites avec une bonne fré­quen­ta­tion mais ce n’est pas l’avis de GMe­trix. Autant ins­tal­ler une exten­sion simple à confi­gu­rer genre Comet Cache ex Zen­Cache – ex Quick Cache – ou le très connu WP Super Cache.
Cer­taines de ces exten­sions embarquent un sys­tème de mini­fi­ca­tion interne mais j’obtiens de meilleures notes avec Autop­ti­mize.

Gzip­pez les fichiers de votre site

Comme l’a fait remar­quer Flo­bo­go en com­men­taire, acti­ver la com­pres­sion des fichiers de votre site va per­mettre aux navi­ga­teurs d’être plus effi­caces. Cette pos­si­bi­li­té dépend en grande par­tie des héber­geurs – le mien le fait auto­ma­ti­que­ment. Consul­tez les dif­fé­rents tutos et la docu­men­ta­tion de votre héber­geur pour l’activer.

Ne char­ger les fichiers de Contact Form 7 que si nécessaire

C’est l’extension de contact la plus popu­laire et ses fichiers vont être char­gés avec tout votre site alors qu’il n’en a besoin que sur les pages avec un for­mu­laire de contact. Le créa­teur de Contact Form 7 a réa­li­sé un petit tuto – un peu tech­nique – pour y arri­ver : http://​contact​form7​.com/​l​o​a​d​i​n​g​-​j​a​v​a​s​c​r​i​p​t​-​a​n​d​-​s​t​y​l​e​s​h​e​e​t​-​o​n​l​y​-​w​h​e​n​-​i​t​-​i​s​-​n​e​c​e​s​s​a​ry/.

Résul­tats

Une image vaut mieux qu’un long dis­cours… Mais une bonne note ne signi­fie pas obli­ga­toi­re­ment un site rapide : si vous avez des images très lourdes, des exten­sions, un thème ou des fonc­tions très gour­mands, votre site peut conti­nuer à ramer mal­gré un joli 90 %.

gmextrix-tuto

Si vous avez d’autres conseils de ce type ou des com­plé­ments, n’hésitez pas à lais­ser un commentaire.

Par­ta­gez

Si vous avez trou­vé une faute d’orthographe, infor­mez-nous en sélec­tion­nant le texte en ques­tion et en appuyant sur Ctrl + Entrée s’il vous plaît,.

41 réponses sur “ 90 % sur GMe­trix les doigts dans le nez ”
  1. Mer­ci pour ce tuto très com­plet, qui com­pile les conseils que l’on peut trou­ver sur dif­fé­rents sites comme celui de seo​mix​.fr
    Deux petites remarques :
    Je rajou­te­rai un conseil sur la com­pres­sion Gzip des fichiers à par­tir du fichier .htac­cess
    A pro­pos des images et de EWW­WOp­ti­mi­zer, la fin de ton para­graphe peut induire en erreur : “cela suf­fi­ra pour satis­faire GMe­trix et les sites équivalents.
    Suite à notre récente dis­cus­sion, je serai encore plus claire : “ce plu­gin ne sert pas à grand chose sur une image de 2Mo, ou même 500 Ko. Par contre, le plu­gin per­met de fina­li­ser l’optimisation si les images sont pré­pa­rées en amont, en rédui­sant avant upload leur taille et leur poids.”

    1. Ah si, EWW­WOp­ti­mi­zer sert sur TOUTES les images mais il fait ce à quoi il est des­ti­né. Il optimise :-)

      Pour la com­pres­sion Gzip, je n’en ai pas par­lé parce que cer­tains héber­geurs – le mien notam­ment – l’activent sur l’hébergement. Mais je vais le rajou­ter tiens…

      1. Ce que je vou­lais dire pour EWWW Opti­mi­zer, c’est que réduire de 10 ou 20% une image de 2MO, certes on obtient une image un peu moins lourde, mais ça reste beau­coup trop lourd pour une page Web !
        Il faut bien (faire) com­prendre que l’important, c’est d’abord d’opti­mi­ser l’image avant upload sinon, EWWW n’est qu’une rus­tine sur une jambe de bois ;)

  2. Très bon résu­mé assez com­plet. Il manque encore un para­graphe plus géné­ral où le tra­vail est de réflexion.
    Ain­si, chaque web­mas­ter doit réflé­chir de l’intérêt ou non des appels Facebook/twitter et autres fan­tai­sies type météo qui fata­le­ment vont ralen­tir un site.
    Il faut alors se mettre à la place du visi­teur et juger de la per­ti­nence de chaque module, quitte à les enle­ver ou chan­ger son fusil d’épaule.
    Ega­le­ment, au niveau des billets, s’il est de bon ton de pro­po­ser des bou­tons auto­ma­tiques de par­tages, leur implen­ta­tion doit être fait élé­gam­ment pour gagner en réac­ti­vi­té : les solu­tions clefs en mains seront for­cé­ment chronophage.
    La même réflexion doit être mener au niveau des images défi­nis­sant le thème. Un thème non opti­mi­sé peut rapi­de­ment char­ger 10 à 15 images en trop, là où un sprite fera des miracles.

    Je sais que tu es contre, mais W3 Total Cache (dont je ne détiens aucune action ou inté­rêt) per­met de tout faire d’un coup. S’il demande un peu de pin­cettes pour le maî­tri­ser, il est ensuite redou­table et assez facile à maintenir.

    1. Après il y a en effet tout un “éco­sys­tème” à gérer – sur­tout au niveau des appels aux API externes genres “par­tage” en effet. De nom­breux plu­gins de par­tage très simples existent.
      Je n’ai pas abor­dé le cha­pitre des sprites qui est com­pli­qué à mettre en œuvre. Et je n’aime pas en effet W3 Total Cache – comme tous les plu­gins usines à gaz. J’ai vu trop de retours angois­sés sur ce plu­gin dans le forum pour être à l’aise pour le conseiller.

    2. chaque web­mas­ter doit réflé­chir de l’intérêt ou non des appels Facebook/twitter et autres fan­tai­sies type météo qui fata­le­ment vont ralen­tir un site.

      Ouh­la, je me sens “visée” (… mais à juste titre)
      Je confirme, mon “gad­get météo” pèse sur la vitesse du site. Je pense le repor­ter sur une autre page que l’accueil.
      Par contre, Face­book est source de visites, donc …

      1. Il y a des façons de pro­po­ser un par­tage sans que ça péna­lise le site – juste une image ou un texte avec le lien qui va. Les comp­teurs de par­tage font plai­sir aux web­mas­ters mais les visi­teurs n’en ont rien à péter qu’un billet ait été par­ta­gé 20 fois ou 200 fois. S’ils aiment, ils par­tagent sinon non.

      2. oh, non je ne vise personne !
        On a tous envie de per­mettre plein de choses mais bien sou­vent on oublie le visi­teur et le pour­quoi il est là. Et, très rare­ment, connaître la météo à Syd­ney ou lire les twit­ters c’est secondaire.

        Concer­nant les par­tages, il y a des solu­tions ultra éco­nome qui n’appelle aucun fichier. Et en plus, c’est per­son­na­li­sé donc c’est adap­té au site ;)

        1. @ Arnaud :
          Ne vous inquié­tez pas, je ne l’ai pas mal pris. J’ai même dit que c’était “à juste titre” que je me sen­tais “visée” (j’aurais dû dire “concer­née”).
          Je vais virer la météo, car c’est vrai que ça n’apporte pas grand chose.
          Pour les réseaux sociaux, j’utilise le plu­gin Coco­ri­co-social.
          Qu’en pense notre expert-ès-plugins ?

      3. Bon­jour,
        Sinon à la place de Autop­ti­mize vous avez le plu­gin JCH Opti­mize, pas mal du tout.

        Pour les par­tage et le comp­teur, moi j’aime voir si un article a eu du suc­cès ou pas, voir le nombre de voir que celui à été par­ta­gé me plait, je suis un peu frus­tré sur ce site de ne rien voir, de plus je n’ai pas vu que dif­fé­rences entre un site qui a les bou­tons de parage avec ou sans comp­teur, même vitesse, cela ne joue pas dessus.
        Il y a des sites qui pro­posent de mon­trer d’où viennent les visi­teurs, etc..
        par exemple http://quick-tutoriel.com/8490–2/
        Croire que tous les visi­teurs s’en fiche et faux.
        Idem pour la météo, si je suis sur un site qui parle d’une ville, d’une région, avoir la météo est un plus.
        J’ai sup­pri­mé Rocket Lazy Load., sur Fire­fox en tant qu visi­teur les images n’apparaissent pas, de plus page speed insight m’indique un sou­ci qu’il fal­lait un aller/retour pour affi­cher mes images.
        https://​deve​lo​pers​.google​.com/​s​p​e​e​d​/​p​a​g​e​s​p​e​e​d​/​i​n​s​i​g​h​t​s​/​?​h​l​=fr
        il n’y a pas que gtme­trix pour tes­ter un site.

        Avez vous un autre plu­gin pour le cache des gra­va­tars, celui que vous pro­po­sez n’est plus à jour.
        Merci

        1. Il faut faire des choix : faire un site le plus rapide pos­sible ou ins­tal­ler la météo. Si je veux la météo, je vais sur le site de Météo France pour ne pas avoir de mau­vaise sur­prise, je n’ai pas besoin de 15 sites dif­fé­rents avec plus ou moins le même widget.

          Atten­tion, je n’ai pas dit que les plu­gins de sta­tis­tiques ne sont pas inté­res­sants pour le web­mas­ter – j’utilise Piwik per­son­nel­le­ment. Si 20 per­sonnes se plaignent de ne pas savoir com­bien de gens ont par­ta­gé ce billet, je m’inquièterai mais vous êtes vrai­ment la pre­mière per­sonne que je croise qui s’intéresse à ce genre de choses.

          Non, je n’ai pas de plu­gin de cache de Gra­va­tar à vous pro­po­ser : s’il exis­tait, vous l’auriez trou­vé sans problème :-)

          1. Il y a des plu­gins météo avec cache, ce qui ne ralen­ti pas votre site, il n’y a pas le choix entre un site le plus rapide pos­sible ou la météo, connais­sez vous WP Cloudy ?

            Excu­sez moi mais mon mes­sage ne vous ciblez pas du tout, si il devait répondre à quelqu’un , cela serait plus à la per­sonne pré­nom­mait Arnaud.

            Le comp­teur sur les liens de par­tage, ce n’est pas pour moi des sta­tis­tiques, je ne mets pas ça avec les plu­gins de stast, je suis contre ce genre de plu­gins, sauf Google Ana­ly­tics, via ce plu­gin Google Ana­ly­tics Dash­board for WP. Le comp­teur sur les liens de par­tage montre juste que les gens ont aimé l’artiste, je suis content pour le rédac­teur du texte, je sais qu’il n’est pas facile d’avoir des visites, d’avoir des articles qui plaisent, juste une sorte de recon­nais­sance, n’ayant pas cette indi­ca­tion sur votre site, j’espère que pour vous et votre tra­vail, vos articles sont bine par­ta­gés sur les réseaux sociaux, vous le méritez.
            Pour le cache gra­va­tar, je n’ai pas cher­ché, sim­ple­ment parce que avant de lire votre article, je ne savais pas qu’il exis­tait des plu­gins spé­cia­le­ment pour les gra­va­tars, c’est pour­quoi je me suis per­mis de vous poser la ques­tion sinon j’aurai cher­ché sans rien vous demander.
            Merci

  3. Bon ben au moins les choses sont claires. Pour ce qui est de la fré­quen­ta­tion sur ce site et des retours, je m’en fiche un peu. Je fais ça pour la com­mu­nau­té et pour moi – d’ailleurs je me rends compte que j’ai viré Piwik de ce site.

    1. Bon­jour,

      je don­nais juste pour mon point de vue, je n’ai pas cher­ché à être désa­gréable, juste à échan­ger des paroles, après cha­cun est libre de gérer son site à son bon vouloir.
      Etag sert à iden­ti­fier une source et sa ver­sion, comme le javas­cript, le plu­gin, etc..

          1. Opti­mi­ser HTML et Javas­cript, géné­ra­tion de don­nées URI pour les images, enre­gis­trer les scripts/css comme fichiers sta­tiques. Voilà.

          2. mer­ci, vous n’avez pas coché “Opti­mi­ser le code CSS” ?
            si vous avez dû le faire, sinon on peut pas cocher “Géné­ra­tion de don­nées : URI pour les images?”
            Merci

    1. Mer­ci avec ces réglages Autop­ti­mize et mieux que JCH Optimize.
      Peut être aus­si d’avoir sup­pri­mer le plu­gin WP Fas­test Cache et avoir pris Zen­cache à la place

      1. Je ne sais plus si dans la ver­sion gra­tuite de Zen­Cache c’est le cas mais il y a aus­si une fonc­tion d’optimisation HTML que je n’ai pas acti­vé du coup.

        1. je ne vois pas cette option , ni dans les cap­tures d’écran sur la fiche
          https://​word​press​.org/​p​l​u​g​i​n​s​/​z​e​n​c​a​c​h​e​/​s​c​r​e​e​n​s​h​o​ts/
          vous avez la ver­sion payante de ZenCache ?
          http://​zen​cache​.com/
          HTML Com­pres­sion n’est pas dans la ver­sion gratuite.

          dans Automp­ti­mize j’ai coché aus­si “Ajou­ter une ges­tion des erreurs (try­catch) ?” pour gar­der active le plu­gin Res­pon­sive Lightbox.

          1. Ah, il me semble que ça fonc­tionne chez moi le Res­pon­sive Lightbox.
            J’avais payé la ver­sion payante de Qui­ck­Cache qui n’était pas cher mais je me suis fait un peu avoir puisque Zen­Cache passe en abon­ne­ment. J’ai trois ans de Zen­Cache pro :-)

  4. En cochant « Ajou­ter une ges­tion des erreurs (try­catch) ? » Res­pon­sive Light­box fonc­tionne, sans non pour moi, l’essentiel c’est qu’il fonctionne

    Donc vous ne pen­sez pas renou­ve­ler après les 3 ans ?.

    1. Non, j’essaie de n’utiliser que des plu­gins gra­tuits. Ça me coûte déjà assez cher en héber­ge­ment. Et j’avais payé pour être tran­quille sur les options. Mais en fait, je me rends compte que la ver­sion gra­tuite devrait me conve­nir maintenant.

  5. Bon­jour,
    je viens de rece­voir cette noti­fi­ca­tion, je ne com­prends pas
    “Auteur : Li-An
    Commentaire :
    Un com­men­taire à éditer…”
    Je dois faire quelque chose ?

    Tiens en pas­sant, je reviens sur mes dires pour les bou­tons de par­tage, n’étant pas buté comme un âne, je viens de pas­ser à OSD Social Media Sha­ring, ne pas avoir de comp­teur, je com­mence à m’y habituer.

    1. Oups, déso­lé, j’ai fait un test pour un billet à venir et je ne pen­sais pas que le com­men­taire annu­lé par­ti­rait quand même pour les abonnés.

      En fait, non, c’est logique que ça parte puisque ça a été vali­dé. Déso­lé pour ce dérangement.

      1. d’accord, pas grave, j’ai cru que je devais édi­ter un de mes com­men­taires, je ne voyais pas com­ment faire.

        j’ai trou­vé un site pour bien confi­gu­rer le plu­gin EWWW image opti­mi­zer, depuis bien meilleur résul­tat sur GTmetrix
        http://​www​.chez​-sma​sh15195​.com/​t​u​t​o​r​i​e​l​-​c​o​n​f​i​g​u​r​e​r​-​e​w​w​w​-​i​m​a​g​e​-​o​p​t​i​m​i​z​er/

    2. Bon­soir,

      j’ai tes­té ce plu­gin, il ne fonc­tionne pas sur un site, j’ai depuis mis le plu­gin Simple Share But­tons Adder, il fonc­tionne très bien.

  6. Bon­soir,

    Mer­ci à tous pour vos com­men­taire et à Flo­bo­go pour avoir abord” ce sou­ci sur le forum d’entraide word­press… Je vais avoir besoin d’un peu d’aide :-)

    J’ai la lettre F en test sur GMe­trix : donc du bou­lot !! J’ai insé­ré par contre les lignes de codes sous le .htac­cess et ça m’a plan­té le blog..

    1. Ben c’est comme si vous vou­lez aug­men­ter la vitesse d’une 2 CV. C’est pos­sible mais très limi­té. Si vous vou­lez vrai­ment de la vitesse, il vaut mieux chan­ger d’hébergeur.

      Les seuls gains que vous pour­rez avoir sur Free, c’est au niveau du poids du conte­nu et du nombre de requêtes. Nombre de plu­gins ne peuvent pas fonc­tion­ner chez eux du fait de la ver­sion de php alors j’ignore si Autop­ti­mize et autres plu­gins de cache fonctionnent.

      En plus, c’est pour un site pro­fes­sion­nel ! Vous ne pou­vez pas inves­tir un peu d’argent dans un héber­ge­ment payant ? Ça ne rentre pas dans les frais géné­raux ou je ne sais quoi ?

  7. :-) pour­quoi je me dou­tais de la réponse ? mer­ci quand même. Et non pour la der­nière question…tout du moins pas maintenant.

    Je tes­te­rais le plu­gin dont vous par­lez. Mer­ci pour tout.

    1. Bon­jour,
      Je ne sais ps si vous êtes au cou­rant mais vers la fin Juillet 2015, Free pro­pose PHP5.6 et 64 Mo, j’explique sur mon site com­ment faire, cela vous inté­resse, vous pou­vez ain­si avoir la der­nière ver­sion offi­ciel de WP, puis mettre plus de plugins.
      http://er.v.free.fr/index.php/free-va-passer-de-ph5-1-a-php5-6-confirmer/

      Juste une ques­tion à Li-An, depuis que j’ai Zen­cache, je dois aller sur “Debug­ger – Face­book Deve­lo­pers” sinon mes articles sont comme hackés, pas d’image, pas de des­crip­tion par­fois, j’ai besoin de cli­quer sur “Debug” puis ““fetch new scrape infor­ma­tion”” pour tout avoir , faut-il confi­gu­ré quelque chose dans le plu­gin pour ne pas à avoir à faire ça à chaque fois ?
      Merci

Laisser un commentaire

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

Notifiez-moi les commentaires à venir via email. Vous pouvez aussi vous abonner sans commenter.

Aucun support n’est fourni pour les extensions testées. Vous pouvez utiliser Markdown pour les commentaires.