Tuto GTmetrix pour débutants

Bonjour, ici Olivier Clémence du blog reussir-mon-ecommerce.fr et aujourd’hui je vais vous faire une petite vidéo pour vous montrer comment vous allez pouvoir utiliser l’outil GTmetrix pour améliorer la vitesse de chargement de votre site.

Là j’ai pris un site au hasard, que j’ai trouvé sur le forum de Prestashop et j’ai trouvé le site assez lent. Donc du coup je vais l’utiliser pour montrer comment utiliser GTmetrix et ça permettra éventuellement à la personne qui possède le site de faire des optimisations pour que son site se charge un peu plus vite. Donc là, vous prenez l’URL de votre site. Vous allez sur GTmetrix donc c’est gtmetrix.com, et vous mettez ici l’adresse et vous cliquez sur « Analyse ». Alors il faut savoir que c’est bien de vous connectez parce que vous allez avoir des fonctionnalités supplémentaires, ça reste toujours gratuit après il y a des fonctionnalités encore supplémentaires si vous payez mais déjà en gratuit, GTmetrix vous donne énormément d’informations qui vont vraiment vous aider à améliorer la vitesse de chargement de votre site. Donc une fois que GTmetrix a terminé l’analyse de votre site, il va vous donner tout un tas d’informations et c’est souvent là que les gens sont un peu perdus parce qu’il y a énormément d’informations donc je ne vais pas vous expliquer tout en détail mais je vais vous donner les points qu’il faut regarder. Donc le « PageSpeed Score » et le « YSlow Score » c’est deux outils qu’utilise GTmetrix pour mesurer les performances de votre site et les optimisations qui doivent être mises en place. C’est intéressant d’avoir un bon score, après ce n’est pas forcément parce que vous avez 90% que votre site est rapide. Si vous avez une valeur comme 40%, là il y a un problème et si vous commencez à être au dessus de 60-70%, ça peut déjà être suffisant. Après c’est les autres valeurs qu’il va falloir regarder. Le « Page Load Time », ça c’est une valeur intéressante. C’est le temps de chargement de votre page. Mais on va voir après qu’en fait cette valeur est souvent biaisée dans la mesure où vous allez avoir pas mal d’éléments qui vont se charger mais pour autant votre site sera déjà utilisable. Donc c’est une valeur intéressante mais à elle seule elle n’est pas suffisante. Le « Total Page Size » c’est pareil, c’est à dire que c’est une valeur qui va vous donner la taille de votre page. Il faut que ce soit le plus petit possible mais de la même manière, il y a des éléments qui peuvent se charger, qui vont biaiser cette valeur donc à voir. Et le nombre de requêtes c’est pareil, il faut avoir un minimum de requêtes idéalement. Là c’est pas mal mais il ne faut pas avoir, si vous avez 250 requêtes là c’est beaucoup trop, il faut faire quelque chose. Le « PageSpeed » et « YSlow » en fait vont vous donner des informations qui sont souvent similaires, on va avoir « minifiy JavaScript » etc on va le retrouver dans les deux donc en gros si vous corrigez « PageSpeed » vous allez corriger en même temps « YSlow ». Donc on va voir rapidement quelques éléments qui sont là. Je vais en sauter beaucoup parce qu’en fait vous allez pouvoir y passer des heures si vous voulez optimiser votre site et tout ne va pas forcément donner des résultats énormes. Il y a des éléments qui sont simples à corriger et c’est de ceux là dont je vais parler. Donc par exemple « Avoid bad requests », c’est tout simplement des éléments qui sont en erreur. Là par exemple, on a en fait des adresses, des URL d’images qui ne fonctionnent pas. Et si on va sur le site on retrouve tout de suite ici, tout ça c’est des images qui ne fonctionnent pas. Alors ça ralentit énormément le chargement de votre page. Donc ça il faut le corriger, vous devez en avoir, idéalement, 0. Ensuite, tout ça je vais passer parce que c’est un peu technique à mettre en place. Tout ça je passe. « Optimize images » ça c’est assez facile. C’est simplement que vos images sont peut être un peu grosses et GTmetrix est capable de vous dire « voilà, telle image vous allez gagner 10KB dessus, celle-ci vous allez gagner 1,9, celle-ci vous allez gagner 1,2 etc ». Sur ce site là, ça va, ce n’est pas dramatique mais des fois on a une liste d’images incroyable où on va gagner à chaque fois 10KB et au final, on va se retrouver à être capable de gagner quelque chose comme 4-5MO sur le chargement d’une page parce qu’on a énormément de pages, énormément d’images qui ne sont pas du tout optimisées. Donc ça si vous avez cette valeur là qui est dans le rouge, là c’est important à faire et ce n’est pas très compliqué, il y a pas mal d’outils d’optimisation. Ensuite, vous avez « minifiy JavaScript », « enable gzip compression », « minifiy CSS » et « minifiy HTML », tout ça, il faut regarder dans votre site, si vous avez un CMS, la plupart du temps, il y a des modules ou des réglages tout fait qui existent. Dans Prestashop vous allez simplement dans « Performances » et vous avez tout ça que vous pouvez activer. Et sinon vous avez sûrement des plugins qui vous permettent de le faire. Si par contre, vous n’avez rien qui existe pour le faire, c’est un petit peu compliqué à mettre en place, il vaut mieux demander à un web-master de le faire. Mais si vous avez ça qui est dans le rouge, ça veut dire qu’il faut aller voir dans votre CMS, si vous ne pouvez pas les activer pour les mettre en place. Et enfin, ici on a « Minimize redirects » c’est pareil, si vous êtes dans le rouge, à cette valeur là, c’est que vous avez sûrement des redirections qui sont faites et là du coup, c’est peut être par rapport aux réglages que vous avez fait dans votre CMS ou au niveau de votre serveur, vous pouvez avoir mis en place des redirections et là ça va considérablement ralentir le chargement de votre site donc ça il faut essayer au mieux d’avoir une valeur de 100, c’est à dire d’avoir aucune redirection parce qu’en théorie vous n’allez pas avoir besoin de redirections. Donc voilà, j’ai passé ça vraiment très rapidement, mais si vous voulez corriger tous les éléments, vous allez y passer beaucoup de temps, il y a des éléments qui sont un peu techniques etc à mettre en place, vous pouvez le faire. Mais en règle générale, les points que je vous ai donné c’est les plus simples à corriger et c’est aussi ceux qui vont donner les meilleurs résultats en termes de gain de temps de temps de chargement. Donc « YSlow » c’est pareil, vous allez avoir des valeurs à peu près identiques. Là il vous dit les erreurs 404 mais en fait ça reste les images qu’on a vu toute à l’heure dans « PageSpeed », éviter les mauvaises requêtes. Donc si vous corrigez ça dans « PageSpeed », dans « YSlow », vous corrigerez et votre score va monter dans les deux. Je vais passer ces deux là, je vais y revenir juste après. Là on a « History », c’est très intéressant dans la mesure où si vous corrigez votre site au fur et à mesure, vous allez re tester avec GTmetrix et au fur et à mesure, il va vous dire « vous étiez à 10 secondes, là vous êtes passé à 9 secondes, là vous êtes passé à 8 secondes etc ». Donc c’est super intéressant de voir en effet, le temps de chargement diminué et de voir si les modifications que vous faites vont dans le bon sens. Là il y a le « Waterfall » et la « Video ». Alors ce que je vais faire, c’est que je vais vous montrer d’abord la vidéo comment ça fonctionne. C’est tout simple, vous cliquez ici et il va refaire un test en sauvegardant l’affichage de votre site pour justement se rendre compte quel est le temps d’affichage et le temps de chargement. Donc je vais le faire et donc il relance un test donc je vais couper la vidéo et on va reprendre juste après que le test soit terminé et je vais vous montrer la vidéo. Ok donc là on a la vidéo du chargement de votre page qui a été enregistrée, on va pouvoir la visionner. Il faut savoir que c’est une fonctionnalité que vous pouvez avoir accès seulement si vous avez créé un compte sur GTmetrix. Comme je vous le disais c’est gratuit donc faites le. Et donc là si on charge, on voit le temps qui passe ici, et voilà la page est arrivée et on voit que le chargement continu, il se passe des choses, l’image grandit, là il y a le slide qui s’est activé et pourtant notre page est affichée et on a quand même le chargement qui continu. Si je le remets, vous voyez, on attend toujours que la page arrive. Là elle arrive, là l’image se charge en entier et ensuite on a l’impression qui ne se passe plus rien et pourtant il y a encore du chargement en fait. Et c’est ce qu’on va voir avec le « Waterfall ». Le « Waterfall » c’est ultra intéressant. Là par exemple, on voit ce qu’il appelle le « first bit », le tout premier chargement, c’est à dire qu’on va appeler vers votre serveur, on va demander à votre serveur « affiche moi la page » et là vous renvoyez toutes les informations qu’il a besoin sans les images, il va simplement vous renvoyer le code et là, ça prend plus ou moins de temps. Là ça prend 3,32 secondes. Moi sur mon serveur, sur mon blog par exemple ou sur ma boutique, ça va prendre 0,5 secondes et je pense que je peux encore l’optimiser donc là 3,32 secondes c’est assez long déjà. Pour reprendre l’exemple de mon blog j’avais un problème sur un module, ce qui faisait que mon first bit donc ce temps de chargement là initial était à 6 secondes, c’est à dire 12 fois plus important que le temps normal qui était de 0,5. Donc là évidement le temps de chargement de ma page est ultra long. Et en fait, c’est très intéressant parce que si vous avez un first bit qui est long, ce n’est pas la peine d’essayer d’optimiser vos images, ce n’est pas la peine d’optimiser votre JavaScript, ce n’est pas la peine d’optimiser votre CSS, ça va rien changer, vous avez un problème soit au niveau de votre serveur, soit au niveau du PHP, soit au niveau de votre base de données. Et le PHP et votre base de données, en règle générale c’est les modules. Alors il faut poser la question à votre hébergeur « pourquoi j’ai un first bit qui est aussi long ». Vous pouvez lui envoyer votre rapport GTmetrix, il sera capable de le lire, du moins en partie. Vous pouvez désactiver des modules et refaire des tests à chaque fois et à un moment vous allez voir « tiens quand je désactive ce module là mon first bit il descend de 2 secondes », c’est super intéressant. Est-ce que ce module là j’en avais besoin ? Est-ce que je le laisse ou est-ce que je l’enlève ? Ou est-ce que je demande à quelqu’un de vérifier quel est le problème ? Après ça peut être dans votre base de données. Alors dans votre base de données, vous pouvez avoir des tables qui sont extrêmement lourdes et donc très longues à scanner pour votre serveur et tout ça, ça va ralentir le first bit donc le temps de chargement initial de votre page. Dans certains cas, ça peut être tout simplement sur Prestashop, par exemple typiquement, c’est les tables de statistiques qui se remplissent indéfiniment et qui deviennent énormes et qu’il faut vider de temps en temps parce que sinon vous allez avoir un temps de chargement initial super long. Donc ça c’est super intéressant parce que quand vous avez un first bit vraiment long, là il est quand même assez long, ça peut venir de l’hébergement donc peut être qu’il faut prendre un meilleur hébergement. Quand on a un first bit assez long, ce n’est pas la peine d’essayer de faire toutes les optimisations qui sont là etc, parce que ça va rien changer, il faut se concentrer sur pourquoi notre serveur met du temps à répondre en fait. Ensuite, ce qui est intéressant, c’est que je vous disais toute à l’heure, on a 10,8 secondes de chargement pour ce site et en fait on va se rendre compte, alors il faut que je cherche un petit peu parce que je le connais pas, voilà. Ce qui est important de comprendre, c’est que certaines choses, le site c’est « kimaya-bijoux-creation.com » et certaines choses ne viennent pas de ce site en fait. Par exemple, on a le « ecjs », il n’est pas très long, il met 33 millisecondes à se charger, ce n’est pas très grave mais c’est pour l’exemple. En fait, il est chargé depuis google-analytics.com donc en fait, ça va se charger en parallèle. Donc c’est intéressant de les optimiser mais ce n’est pas forcément grave. Là par exemple, on va ça qui vient de « fonts.google », ça qui vient de « google analytics« . Là on a « maxcdm » c’est pareil. Tout ça c’est des éléments qui se chargent en parallèle et on le voit bien ici en fait. Là on a des valeurs donc le vert c’est le temps qui met à se connecter, le rouge, on le voit pas dans le graphique, mais c’est le temps d’envoi, le violet c’est le temps d’attente et le gris c’est le temps de réception et c’est là que c’est intéressant c’est qu’en fait les temps d’attente on peut en avoir sur un même navigateur, on peut en avoir entre 4 et 20 si je me trompe pas. Mais par URL, c’est à dire que tout ce qui est appelé depuis le site kimaya-bijoux-creation.com, on pourra avoir que 4 demandes. Si vous avez 4 images, il y en a que 4 qui vont se charger en même temps puis après on attendra les suivantes. Par contre, si vous avez 12 images mais qu’il y en a 4 qui sont chargées depuis kimaya-bijoux-creation, 4 qui sont chargées depuis Google, 4 qui sont chargées depuis un autre site, vous pouvez charger les 12 en même temps et c’est très utile parce que du coup, on va gagner en temps de chargement donc c’est intéressant à connaître quand on voit que le site met 10 secondes à se charger, en fait en règle générale, il sera chargé avant parce qu’on va avoir d’autres éléments qui vont se charger derrière, qui se chargent en parallèle ou qui sont pas forcément important. Par exemple, c’est le cas souvent des plugins facebook qui vont se charger en dernier mais ça va se ressentir dans le temps de chargement que GTmetrix va nous indiquer. Si je reprends ma vidéo de toute à l’heure, comme je vous disais, il y a un moment où la page est déjà chargée et l’utilisateur peut se servir de la page, faire ce qu’il veut mais pour autant il reste du temps de chargement et ça GTmetrix il le prend en compte. Donc si vous avez 10 secondes de chargement, ça ne veut pas dire que votre site n’apparaît pas au bout de 4 secondes donc c’est tout à fait possible que votre site soit utilisable et agréable à utiliser même s’il met 10 secondes à se charger, d’après GTmetrix. Et donc après dans le « Waterfall » ce qu’il faut regarder c’est tout ce qui est rouge, toutes les erreurs qu’on avait repéré avant avec PageSpeed et YSlow. Tout ça il faut le corriger, c’est primordial et après tout ce qui va avoir un long chargement violet. Là on a un long chargement violet, « index controller statistics », ce que je vous disais toute à l’heure et je n’avais pas encore étudié le waterfall. A priori les statistiques prennent du temps sur ce site donc à mon avis soit désactiver les modules soit vider les tables, éventuellement à voir et ça peut avoir en plus en désactivant le module, avoir un impact ici et ça va avoir un impact ici et donc peut être que le site va gagner d’office 4 secondes ou 3. Voilà à tester, en corrigeant ça aussi on va gagner beaucoup de temps parce que ça, ça fait perdre beaucoup de temps et du coup le site va peut être arrivé, là il est actuellement à 10 secondes, il va peut être arrivé à 6, ce qui devient déjà beaucoup mieux en fait.

Voilà, donc voilà comment il faut regarder un petit peu GTmetrix, il faut se concentrer sur les éléments qui paraissent vraiment long à charger et c’est surtout, pas la partie verte, si vous avez beaucoup de choses à charger, c’est normal que vous ayez pas mal de vert, c’est surtout la partie violette qui est intéressante et grise. Plus vous avez de gris, plus vous avez quelque chose de lourd à charger, si vous avez une image très lourde, la partie grise va être très grande et clairement ça veut dire qu’il faut optimiser cette image là par exemple.

Donc j’espère que cette vidéo vous aura plu. N’hésitez pas à me suivre sur ma chaîne Youtube, sur les réseaux sociaux ou sur mon blog ou ma boutique en ligne et vous pouvez, comme toujours, télécharger mon bonus, 41 secrets pour Prestashop.

Merci, à bientôt, au revoir