90 % sur GMetrix les doigts dans le nez

Quelques outils et conseils pour optimiser 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 utili­sa­teurs de Word­Press ont dû apprendre l’économie et l’optimisation. Et les créa­teurs de thème ont dû resser­rer un peu les boulons. Ce qui n’est pas un mal…
Mais obte­nir 90 % sur GMetrix n’est pas toujours évident à atteindre. Voici quelques exten­sions et conseils que j’ai glané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.

Optimisez votre .htaccess

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 suffi­sante. Pour ce faire, il faut modi­fier le fichier .htac­cess à la racine de votre instal­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 profi­te­rez pour “tuer” les Etags mais je n’ai pas trop compris ce que c’est :

# KILL THEM ETAGS
Header unset ETag
FileETag none

Minifiez moi tout ça

Votre site Word­Press utilise 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 chacun 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 compres­ser. C’est la “mini­fi­ca­tion”.
De nombreuses exten­sions s’en chargent – notam­ment les exten­sions de cache les plus connues – mais ma préfé­rée c’est Autop­ti­mize.

Remarque

Vu l’action réali­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 à tester une autre exten­sion du même genre qui sera peut-être plus compa­tible. Dans tous les cas, il faudra 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 norma­li­sée mais on n’est pas à l’abri d’un mauvais codeur.

Optimisez les images

GMetrix 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 quali­té. Il fait gagner 10 à 20 % du poids mais cela suffi­ra pour satis­faire GMetrix et les sites équi­va­lents.

Lazy Loading 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é dessus pour les appe­ler. Pour cela il faut une exten­sion de lazy loading. Ils sont nombreux 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 aussi que cela fonc­tionne sur plusieurs navi­ga­teurs (j’en ai prati­qué un qui ne char­geait pas les images sous Inter­net Explo­rer). J’utilise Rocket Lazy Load.

Les gravatar en cache

Les Grava­tars c’est super chouette mais il faut aller les cher­cher sur les serveurs distants et si vous avez beau­coup de commen­ta­teurs, c’est un peu lourd.
Là encore, une exten­sion de cache spéci­fique devrait aider : Harry’s Grava­tar Cache.

Installez une extension de cache

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

Mise à jour du 19 février 2019 : la plupart de grosses exten­sions de cache gèrent la plupart des points abor­dés dans cet article, à vous de voir (une lecture utile sur les exten­sions de cache à la mode ici).

Gzippez les fichiers de votre site

Comme l’a fait remar­quer Flobo­go en commen­taire, acti­ver la compres­sion des fichiers de votre site va permettre aux navi­ga­teurs d’être plus effi­caces. Cette possi­bi­li­té dépend en grande partie des héber­geurs – le mien le fait auto­ma­ti­que­ment. Consul­tez les diffé­rents tutos et la docu­men­ta­tion de votre héber­geur pour l’activer.

Ne charger 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 formu­laire de contact. Le créa­teur de Contact Form 7 a réali­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ésultats

Une image vaut mieux qu’un long discours… 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 malgré un joli 90 %.

gmextrix-tuto

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

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.

41 réponses sur “ 90 % sur GMetrix les doigts dans le nez ”
  1. Merci pour ce tuto très complet, qui compile les conseils que l’on peut trou­ver sur diffé­rents sites comme celui de seomix​.fr
    Deux petites remarques :
    Je rajou­te­rai un conseil sur la compres­sion Gzip des fichiers à partir du fichier .htac­cess
    A propos des images et de EWWWOp­ti­mi­zer, la fin de ton para­graphe peut induire en erreur : “cela suffi­ra pour satis­faire GMetrix et les sites équi­va­lents.
    Suite à notre récente discus­sion, je serai encore plus claire : “ce plugin ne sert pas à grand chose sur une image de 2Mo, ou même 500 Ko. Par contre, le plugin permet 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, EWWWOp­ti­mi­zer sert sur TOUTES les images mais il fait ce à quoi il est desti­né. Il opti­mise :-)

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

      1. Ce que je voulais 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) comprendre que l’important, c’est d’abord d’opti­mi­ser l’image avant upload sinon, EWWW n’est qu’une rustine sur une jambe de bois ;)

  2. Très bon résu­mé assez complet. Il manque encore un para­graphe plus géné­ral où le travail est de réflexion.
    Ainsi, chaque webmas­ter doit réflé­chir de l’intérêt ou non des appels Facebook/​twitter et autres fantai­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 perti­nence de chaque module, quitte à les enle­ver ou chan­ger son fusil d’épaule.
    Egale­ment, au niveau des billets, s’il est de bon ton de propo­ser des boutons auto­ma­tiques de partages, 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 forcé­ment chro­no­phage.
    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) permet de tout faire d’un coup. S’il demande un peu de pincettes pour le maîtri­ser, il est ensuite redou­table et assez facile à main­te­nir.

    1. Après il y a en effet tout un “écosys­tème” à gérer – surtout au niveau des appels aux API externes genres “partage” en effet. De nombreux plugins de partage très simples existent.
      Je n’ai pas abor­dé le chapitre des sprites qui est compli­qué à mettre en œuvre. Et je n’aime pas en effet W3 Total Cache – comme tous les plugins usines à gaz. J’ai vu trop de retours angois­sés sur ce plugin dans le forum pour être à l’aise pour le conseiller.

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

      Ouhla, je me sens “visée” (… mais à juste titre)
      Je confirme, mon “gadget 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 propo­ser un partage sans que ça péna­lise le site – juste une image ou un texte avec le lien qui va. Les comp­teurs de partage font plai­sir aux webmas­ters mais les visi­teurs n’en ont rien à péter qu’un billet ait été parta­gé 20 fois ou 200 fois. S’ils aiment, ils partagent sinon non.

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

        Concer­nant les partages, il y a des solu­tions ultra économe qui n’appelle aucun fichier. Et en plus, c’est person­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 sentais “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 plugin Coco­ri­co-social.
          Qu’en pense notre expert-ès-plugins ?

      3. Bonjour,
        Sinon à la place de Autop­ti­mize vous avez le plugin JCH Opti­mize, pas mal du tout.

        Pour les partage et le comp­teur, moi j’aime voir si un article a eu du succès ou pas, voir le nombre de voir que celui à été parta­gé me plait, je suis un peu frus­tré sur ce site de ne rien voir, de plus je n’ai pas vu que diffé­rences entre un site qui a les boutons de parage avec ou sans comp­teur, même vitesse, cela ne joue pas dessus.
        Il y a des sites qui proposent de montrer d’où viennent les visi­teurs, etc..
        par exemple http://​quick​-tuto​riel​.com/​8​490 – 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 suppri­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 souci qu’il fallait 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 tester un site.

        Avez vous un autre plugin pour le cache des grava­tars, celui que vous propo­sez n’est plus à jour.
        Merci

        1. Il faut faire des choix : faire un site le plus rapide possible ou instal­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 mauvaise surprise, je n’ai pas besoin de 15 sites diffé­rents avec plus ou moins le même widget.

          Atten­tion, je n’ai pas dit que les plugins de statis­tiques ne sont pas inté­res­sants pour le webmas­ter – j’utilise Piwik person­nel­le­ment. Si 20 personnes se plaignent de ne pas savoir combien de gens ont parta­gé ce billet, je m’inquièterai mais vous êtes vrai­ment la première personne que je croise qui s’intéresse à ce genre de choses.

          Non, je n’ai pas de plugin de cache de Grava­tar à vous propo­ser : s’il exis­tait, vous l’auriez trou­vé sans problème :-)

          1. Il y a des plugins 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 possible ou la météo, connais­sez vous WP Clou­dy ?

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

            Le comp­teur sur les liens de partage, ce n’est pas pour moi des statis­tiques, je ne mets pas ça avec les plugins de stast, je suis contre ce genre de plugins, sauf Google Analy­tics, via ce plugin Google Analy­tics Dash­board for WP. Le comp­teur sur les liens de partage 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 travail, vos articles sont bine parta­gés sur les réseaux sociaux, vous le méri­tez.
            Pour le cache grava­tar, je n’ai pas cher­ché, simple­ment parce que avant de lire votre article, je ne savais pas qu’il exis­tait des plugins spécia­le­ment pour les grava­tars, c’est pour­quoi je me suis permis de vous poser la ques­tion sinon j’aurai cher­ché sans rien vous deman­der.
            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 commu­nau­té et pour moi – d’ailleurs je me rends compte que j’ai viré Piwik de ce site.

    1. Bonjour,

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

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

          2. merci, 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 données : URI pour les images?”
            Merci

    1. Merci avec ces réglages Autop­ti­mize et mieux que JCH Opti­mize.
      Peut être aussi d’avoir suppri­mer le plugin WP Fastest Cache et avoir pris Zencache à la place

      1. Je ne sais plus si dans la version gratuite de ZenCache c’est le cas mais il y a aussi 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 captures 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 version payante de ZenCache ?
          http://​zencache​.com/
          HTML Compres­sion n’est pas dans la version gratuite.

          dans Automp­ti­mize j’ai coché aussi “Ajou­ter une gestion des erreurs (trycatch) ?” pour garder active le plugin Respon­sive Light­box.

          1. Ah, il me semble que ça fonc­tionne chez moi le Respon­sive Light­box.
            J’avais payé la version payante de Quick­Cache qui n’était pas cher mais je me suis fait un peu avoir puisque ZenCache passe en abon­ne­ment. J’ai trois ans de ZenCache pro :-)

  4. En cochant « Ajou­ter une gestion des erreurs (trycatch) ? » Respon­sive Light­box fonc­tionne, sans non pour moi, l’essentiel c’est qu’il fonc­tionne

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

    1. Non, j’essaie de n’utiliser que des plugins gratuits. Ç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 version gratuite devrait me conve­nir main­te­nant.

  5. Bonjour,
    je viens de rece­voir cette noti­fi­ca­tion, je ne comprends pas
    “Auteur : Li-An
    Commen­taire :
    Un commen­taire à éditer…”
    Je dois faire quelque chose ?

    Tiens en passant, je reviens sur mes dires pour les boutons de partage, n’étant pas buté comme un âne, je viens de passer à OSD Social Media Sharing, ne pas avoir de comp­teur, je commence à m’y habi­tuer.

    1. Oups, déso­lé, j’ai fait un test pour un billet à venir et je ne pensais pas que le commen­taire annu­lé parti­rait quand même pour les abon­nés.

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

      1. d’accord, pas grave, j’ai cru que je devais éditer un de mes commen­taires, je ne voyais pas comment faire.

        j’ai trou­vé un site pour bien confi­gu­rer le plugin EWWW image opti­mi­zer, depuis bien meilleur résul­tat sur GTme­trix
        http://​www​.chez​-smash15195​.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. Bonsoir,

      j’ai testé ce plugin, il ne fonc­tionne pas sur un site, j’ai depuis mis le plugin Simple Share Buttons Adder, il fonc­tionne très bien.

  6. Bonsoir,

    Merci à tous pour vos commen­taire et à Flobo­go pour avoir abord” ce souci sur le forum d’entraide word­press… Je vais avoir besoin d’un peu d’aide :-)

    J’ai la lettre F en test sur GMetrix : donc du boulot !! 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 voulez augmen­ter la vitesse d’une 2 CV. C’est possible mais très limi­té. Si vous voulez 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 plugins ne peuvent pas fonc­tion­ner chez eux du fait de la version de php alors j’ignore si Autop­ti­mize et autres plugins de cache fonc­tionnent.

      En plus, c’est pour un site profes­sion­nel ! Vous ne pouvez 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 doutais de la réponse ? merci quand même. Et non pour la dernière question…tout du moins pas main­te­nant.

    Je teste­rais le plugin dont vous parlez. Merci pour tout.

    1. Bonjour,
      Je ne sais ps si vous êtes au courant mais vers la fin Juillet 2015, Free propose PHP5.6 et 64 Mo, j’explique sur mon site comment faire, cela vous inté­resse, vous pouvez ainsi avoir la dernière version 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 Zencache, je dois aller sur “Debug­ger – Face­book Deve­lo­pers” sinon mes articles sont comme hackés, pas d’image, pas de descrip­tion parfois, j’ai besoin de cliquer sur “Debug” puis ““fetch new scrape infor­ma­tion”” pour tout avoir , faut-il confi­gu­ré quelque chose dans le plugin 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.