Comment tester les performances de son site internet ?

fibre-optique

Votre site internet doit être agréable, tant dans son design que dans sa navigation. Cet article aborde seulement la partie performances techniques, c’est-à-dire, plus clairement, que les tests proposés ne tiennent absolument pas compte de l’esthétique ni de la qualité des contenus (en ce compris les informations légales dont vous devez contrôler la présence obligatoire).

Il s’agit, pour vous, et en totale autonomie, de tester seulement les capacités « techniques » de votre site telles que, entre autres :

  • La compatibilité avec tous les supports (ordinateur, smartphone, tablette) et tous les navigateurs (Google Chrome, Mozilla Firefox, Safari, Internet Explorer, etc.)
  • La rapidité du temps de chargement de la page testée

Chez Netalys, nous travaillons principalement avec Pingdom Tools, mais il existe plusieurs sites qui se révèlent fiables quant aux résultats obtenus :

Chaque site utilise une méthode de test spécifique et donne donc lieu à des résultats différents, qui se combinent et se complètent.

Également, il ne faut pas se contenter de lancer le test une seule fois (sur un même site). En effet, le système de cache (technologie qui enregistre la page sous forme de fichiers temporaires sur l’ordinateur afin de la resservir lors d’une prochaine visite, sans avoir à attendre la réponse du serveur) permet de diminuer les données à transférer donc le temps de chargement.

C’est une moyenne de plusieurs tests qu’il faut analyser et décrypter.

Lancer les tests et les interpréter

Nous allons maintenant vous expliquer comment procéder à ces tests et surtout comment en comprendre les résultats.

Pour illustrer un exemple concret, testons la page d’accueil de Google sur le site de test Pingdom.

page_accueil_pingdom

Dans la partie dédiée au lien URL, vous saisissez l’adresse du site à tester. Attention ! Les tests n’autorisent à tester qu’une seule page à la fois. En priorité, nous vous conseillons de vous intéresser à la page d’accueil qui est la plus importante : c’est la première qui s’affiche quand on arrive sur le site.

Vous choisissez ensuite de quel endroit est lancé le test (de quel pays/ville du monde).

De préférence, pour se faire une idée la plus fiable, il vaut mieux tester à partir d’une ville (ou pays) la plus proche possible du serveur (là où est hébergé le site internet).

Lançons le test… Relançons-le une deuxième fois…

Les résultats sont là : regardons cela de plus près.

resultats_google_ pingdom
  • Performance grade : c’est la note globale attribuée par le site test et propre à ce test-là : elle prend en compte tous les critères techniques (poids de la page, temps de chargement, réponse du serveur, etc.)
  • Page size : c’est le poids total de la page (avec images, vidéos, animations, contenus textuels, etc.)
  • Load time : votre page d’accueil (en priorité) doit être particulièrement rapide à charger : à l’heure de la fibre optique et de la 5G, les internautes sont de plus en plus exigeants. En effet, les études à ce sujet ont démontré qu’un temps de chargement supérieur à 3 secondes dissuade les visiteurs, qui ont donc tendance à s’impatienter, fermer la page et se rendre sur un site concurrent. Cette rapidité, aujourd’hui, est synonyme de performance, donc un gage de qualité.
  • Requests : il s’agit là du nombre de fichiers - de requêtes - qui sont téléchargés pour la totalité de la page.

Cependant, les résultats sont à interpréter de façons variables en fonction des sites testés : dans le cas d’un site e-commerce, par exemple.

Cela s’explique par la nature du site en lui-même et la quantité, entre autres choses, des informations, produits et données qui sont transmis lors du chargement de la page.

Pour illustrer cet exemple, nous avons testé pour vous le site commerçant d'Amazon et la vitesse de chargement est nettement satisfaisante malgré tous les éléments à charger et le poids de la page :

resultats_amazon_pingdom

Faisons un autre test, avec le site Netalys, mais cette fois sur le site gtmetrix.com.

resultats_netalys_gtmetrix

Ces données se révèlent un atout majeur pour les professionnels pour cibler de façon rapide et juste les éléments qui ralentissent considérablement la page.

Dans la partie gauche "GTmetrix Grade", il s'agit d'une évaluation réalisée à partir de caractéristiques et paramètres propres à ce testeur. Ces valeurs mesurent la vitesse de chargement, les optimisations des éléments et la qualité de la construction du code HTML.

Dans la partie droite "Web Vitals", il s'agit de données qui sont jugées selon les critères de Google. La couleur varie du vert "très bon" au rouge "très mauvais".

  • Largest Contentful Paint : temps de chargement de l'élément le plus lourd de la page
  • Total Blocking Time : temps de blocage du site par les scripts. Un temps proche de 0 correspond à un site bien optimisé
  • Cumulative Layout Shift : mesure la stabilité de la page pendant son chargement - les déplacements intempestifs des visuels.

En complément de ce tableau récapitulatif, regardons d'autres mesures dans l'onglet "Performance".

performance_gtmetrix
  • First Contentful Paint : temps de chargement de la partie de la page visible en premier
  • Speed Index : rapidité du chargement complet de la partie visible de la page
  • Time to Interactive : laps de temps avant que l'internaute ne puisse interagir sur le site (lien hypertexte, carrousel, etc.). Dans l'idéal, cette mesure doit être égale au First Contentful Paint

Examinons maintenant l'onglet "Waterfall"

waterfall_gtmetrix

Il s’agit du détail de chargement des requêtes de la page. Certaines données se chargent en premier et d’autres ne peuvent pas se charger ou s’afficher tant que d’autres ne le sont pas avant.

C’est la raison de cette cascade de couleur qui indique en outre, pour chaque requête, le cheminement exact des données entre le moment où vous cliquez sur un lien et le moment où les éléments s’affichent à l’écran.

En résumé, les éléments qui ralentissent une page sont les suivants :

  • Images et vidéos non adaptées et/ou non optimisées
  • Données externes qui ne sont pas directement sur le site (réseaux sociaux, maps, police de caractères, statistiques, etc.)
  • Hébergement/serveur trop lent

L’agence Netalys vous invite à suivre ces quelques conseils, qu’elle applique dans toutes ses réalisations :

  • Faire le choix d’un hébergement de qualité, ce coût étant vite rentabilisé par la rapidité et la satisfaction lors de la navigation
  • Avoir un système de cache (mise en mémoire de la page) pour resservir les fichiers plus rapidement
  • Dans le cas où l’hébergement le supporte, opter pour un site en https qui allie sécurité et performance et user en priorité de la technologie http/2 : cela permet de charger les fichiers en simultané et non les uns après les autres et éviter ainsi les temps « morts »
  • Optimiser le rendu de la partie visible (partie qui s’affiche à l’écran en tout premier) : cela évite une page blanche ou l’apparition en saccadé d’un contenu (texte, photo ou vidéo)
  • Placer les scripts en bas de page : ce sont les éléments les plus lourds et qui doivent se charger en dernier (en arrière-plan) au risque de bloquer l’affichage d’éléments plus importants (sur la partie haute).

Ces optimisations sont très techniques et doivent être réalisées par un professionnel du web au risque de mettre votre site hors service.

Conclusion

Ces séries de tests vous permettent de vous faire une idée globale de la rapidité de votre site.

Le temps de chargement est une composante dans le référencement naturel du site par les moteurs de recherche qui affectionnent tout particulièrement les sites performants.

En complément de cet article, et si les résultats étaient sujets à interprétation plus poussée, nous vous recommandons de solliciter un avis professionnel plus complet.

L’agence Netalys se tient à votre disposition pour établir un audit approfondi qui couvrira, en plus de cet aspect technique, les points forts et faibles de votre site internet, à tous les niveaux – contenus, optimisation, design, etc. – ainsi que les propositions d’amélioration.

Retour en haut