GTMetrix : Optimiser la vitesse de chargement d’une page web

Optimiser la vitesse de chargement d’une page web est important pour le référencement et l’ergonomie d’un site web. Le meilleur outil que j’ai testé est GTMetrix.

Présentation

GTMetrix est un outil avancé qui offre de bonne fonctionnalités de façon gratuite.

Avec une simple inscription gratuite, vous pouvez comparer plusieurs sites, plusieurs versions d’un même site, le tout testé sous divers conditions. De plus vous avez la possibilité de sauvegarder votre configuration de test.

Accueil GTMetrix
Accueil GTMetrix

Simple comme bonjour, il suffit d’entrer l’adresse de votre page et d’un clic sur le bouton “Analyse”.

General

Je teste donc mon blog. Crée il y a quelques jours et pas encore totalement optimisé. Commençons par le haut de la page, voyez comme mon score est pourri :

Performances GTMetrix
Performances GTMetrix

Bon en réalité cela pourrait être pire, mais on verra cela plus tard.

On a une capture d’écran de votre site pour vérifier que vous avez bien analysé la bonne page, et que GTMetrix n’a pas fait n importe quoi (ce qui ne m’est jamais arrivé).

Un récapitulatif des informations du scan au milieu, la date, la localisation, le navigateur. On a une foule d’options, tel qu’ajouter Adblock, etc.

Pour l’instant on laisse les paramètres de bases. Le test est effectué depuis le canada mais ce n’est pas très gênant. La connexion d’un bon serveur au canada devrait être équivalente à une connexion moyenne en France.

En bas à gauche, vous avez vos Scores, PageSpeed et Yslow, il faut toujours chercher à les maximiser, mais on y reviendra très vite.

En bas à droite, vous avez les caractéristiques utiles de votre page, c’est-à-dire, le temps de chargement, le poids de la page, et le nombre de requêtes. C’est peut être évident, mais c’est bien ces chiffres que l’on va chercher à réduire.

Résultats GTMetrix
Résultats GTMetrix

PageSpeed de GTMetrix

On commence avec l’algorithme PageSpeed, qui est le premier onglet plus bas sur la page GTMetrix.

Cela prend la forme d’une longue liste de points à travailler, avec votre note à maximiser, et une indice de priorité. Travailler d’abord les points avec un indice élevé (HIGH).

PageSpeed GTMetrix
PageSpeed GTMetrix

Vous pouvez avoir plus d’informations sur un point avec un clic sur la petite flèche à gauche, prenons le premier point, l’activation de la compression GZIP. Je ne vais pas aborder tous les points, pour chaque point il suffit de lire le site, ou bien d’une recherche Google pour régler tous les soucis.

GZIP GTMetrix
Il y a du travail

GTMetrix me dis que je peux améliorer la compression de pas mal de mes fichiers statiques de plus de 67%. Il s’agit simplement du protocole GZIP, un simple paramètre à activer sur votre serveur d’hébergement. Je l’ai activé à la va-vite et vous voyez bien qu’il ne compresse pas du tout ce qu’il devrait.

Voilà, j’ai bidouillé mon serveur, et maintenant j’ai la meilleure note et je gagne de précieuses secondes, et donc du référencement.

Résultat GZIP
Résultat GZIP

Le bouton « what’s this mean » vous explique brièvement le point sur lequel vous travaillez, et si vous voulez en savoir plus vous avez ensuite un lien « Read More » qui vous permettra de bien comprendre en détail. Bien sur le tout est en anglais, mais bon, au pire vous lancer un peu de Google Trad.

Résultat

J’ai augmenté le score de quelques pourcents seulement et c’est plus de deux secondes de chargement d’économisé sur le chargement de ma page.

Moments clés GTMetrix
Moments clés GTMetrix

Au final je n’ai pas poussé jusque 100%, car les résultats seront je pense insignifiant par rapport aux manipulations à effectuer. Cela vient surtout du fait que le blog tourne sur une WordPress avec quelques dizaines d’extensions qui chargent chacune leurs dépendances, etc. Je suis déjà assez content de ce score. Passons au deuxième algorithme.

Yslow de GTMetrix

Le deuxième algorithme utilisé est Yslow, qui lui se base sur d’autres critères. Testons tout cela.

Résultat YSlow
Mes résultats YSlow

Je vous passe les détails, c’est exactement comme PageSpeed, les critères ne sont juste pas les mêmes. Sachez juste que si, comme moi, vous êtes sous WordPress vous ne pourrez pas optimiser grand-chose étant donné la structure même du CMS. Il faudrait éviter les extensions, et par le fait perdre le principal avantage de WordPress, dommage donc.

Waterfall

Tous ces chiffres c’est bien, mais comment se représenter le chargement de votre page ? c’est là qu’intervient l’onglet Waterfall.

Il représente le chargement de votre page, étape par étape, fichier par fichier, et surtout qui attend sur qui. C’est très utile pour vérifier que du Lazy loading fonctionne, ou pour vérifier que vos scripts JavaScript peu important s’exécutent en premier.

Souvenez-vous qu’il faut charger ce qui intéresse vraiment l’utilisateur c’est-à-dire, le contenu en premier. Ensuite vous pouvez charger la déco, vos scripts d’analytics, etc. Mais ce n’est pas très grave d’avoir une page qui se charge en 17 s si votre contenu lui se charge intégralement en moins de 0.2 s.

Le Waterfall de mon blog

Sur ce Waterfall, on voit bien que le contenu principal de la page se charge très vite, et qu’ensuite la déco et tous les plugins annexes mettent du temps à se charger. Pourtant, ce n’est donc pas très grave et notre page est pleinement opérationnelle.

Timings

L’onglet timings vous montre les moments-clés de votre chargement de page et vous les explique.

Moments-clés GTMetrix
Les Moments clés GTMetrix

Les trois moments importants sont :

  • TTFB : le temps que met à réagir votre serveur pour envoyer le premier bit de données, il doit être le plus bas possible. Généralement si vous êtes en dessous de 100 ms c’est très bien, Google recommande 200 ms mais la grande partie des sites sont entre 200 et 600ms. Au-delà de 600ms, c’est trop long. On est donc dans la moyenne.
  • Le paint : qui indique à quel moment votre navigateur commence à afficher des trucs. Avant la page est blanche et devrait idéalement être inférieur à 0.3s. Au-delà l’utilisateur remarque un « scintillement » de la page, voir pense que le site est lent quand on est à plus de 1 s comme moi, j’ai donc du travail !
  • Le onload : Moment auquel la page à fini de charger son contenu principal. Doit être inférieur à 1s pour être au top !

Bref, mon blog est pas au top, on va essayer d’arranger cela. Pour cela j’intègre un DNS gratuit (Cloudflare) qui a pour vertu de diminuer le TTFB. De plus, il réplique également une version de mon site un peu partout dans le monde ce qui peut améliorer l’accessibilité des utilisateurs internationaux.

Historique

L’onglet historique vous montre vos derniers test, et vous fais des beaux graphiques. Idéal pour suivre vos progrès.

Des jolies graphiques !

Video

Vous pouvez avoir une vidéo du chargement de votre page, Cela vous permet de vérifier qu’il n y a aucune erreur de chargement. Mais aussi que votre contenu se charge bien en premier, et de façon lisible. 

Vous avez aussi une légende qui vous montre les moments-clés, pratique !

Paramètres de recherche

Paramètres GT-Metrix
Une foule de paramètres

Vous pouvez modifier vos tests en fonctions de vos besoins. Changer la localisation du test ou bien le navigateur. Vous pouvez activer Adblock, ou simuler une connexion plus lente. C’est super intéressant, n’hésitez pas à essayer.

Fichiers HAR

GTMetrix nous donne la possibilité d’exporter des fichiers HAR. HAR = HTTP Archive Format Files = Format de fichiers pour archives HTTP. En gros c’est du JSON qui contient toutes les infos par rapport à l’optimisation de votre site.

Outil d'analyse HAR Google
Outil d’analyse HAR Google

L’intérêt est de l’utiliser dans le Google HAR analyser un outil de Google pour vous aider à optimiser vos sites web

Autres outils

Les autres outils dignes d’être mentionné sont :

Aidez-moi à augmenter la taille de cette liste en commentaire.

Conclusion sur GTMetrix

Nous avons fait le tour de l’outil GTMetrix et optimisé le blog de plus de 50%. L’optimisation de site web est une étape obligatoire pour tout gérant de site web qui se respecte, je vous conseille vivement d’essayer de mettre cela en pratique.

BONUS : GTMetrix ont fait un page spéciale pour l’optimisation de WordPress.

Laisser un commentaire

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