Mesurer le temps de chargement du site web

3 outils qui te permettent de mesurer vraiment correctement le temps de chargement de ton site web

A quelle vitesse mon site web se charge-t-il ? C'est l'une des questions centrales de l'optimisation des performances, de l'UX et des moteurs de recherche. Pour répondre à cette question, tu dois t'appuyer sur les bons outils. Car seuls quelques outils fournissent vraiment de bonnes données. Je te présente aujourd'hui les trois plus performants et te montre comment utiliser l'un d'entre eux, Pingdom.

Sur le web, il existe de superbes articles de synthèse sur les outils qui permettent à tout utilisateur de mesurer très facilement et surtout gratuitement la performance et le temps de chargement de son site web. Ces aperçus sont très utiles, mais ils commettent souvent une erreur qui peut conduire les utilisateurs à plus de confusion que de clarté. Ils comparent en effet deux ou trois types d'outils complètement différents et n'expliquent pas toujours les différences de manière suffisamment détaillée.

Cela peut alors conduire les utilisateurs à essayer de faire des comparaisons de performances avec des données totalement inappropriées. C'est dommage, car ceux qui mesurent avec les bons outils s'épargnent beaucoup de temps et d'ennuis.

Il y a une différence que tout utilisateur qui souhaite mesurer la performance de son site web devrait connaître : la différence entre les analyses de potentiel et les outils qui mesurent le temps de chargement d'un site web. Le premier groupe comprend des tests comme Google PageSpeed Insights et YSlow de Yahoo. Ces outils indiquent à quel point le site testé remplit les conditions pour un chargement rapide des pages. Les deux fournissent donc d'excellentes informations pour l'optimisation on-page. Cependant, ces tests ne mesurent pas explicitement le temps de chargement de ton site web.

Mais la plupart du temps, c'est ce que tu veux savoir : Combien de temps faut-il à mon site web pour être construit, pour que le client puisse interagir avec lui, pour que je gagne de l'argent ? Et c'est là que le bât blesse : à notre connaissance, il n'existe que trois outils gratuits qui fournissent de bonnes données :

C'est pourquoi, dans cet article et deux autres, je vais montrer ce que les trois outils de mesure peuvent faire, comment tu dois les utiliser et comment interpréter les données afin de tirer le maximum de ces mesures.

Trois caractéristiques rendent un outil de mesure particulièrement précieux : les possibilités de réglage, le niveau de détail de la mesure et la diversité des données.

Si les outils que j'ai mentionnés sont si bons, c'est parce qu'ils fournissent des données particulièrement précieuses. Cela signifie que les résultats des mesures

  • Pouvoir être adapté grâce à différentes options de réglage.
  • Être édité avec un niveau de détail élevé.
  • Consister en des résultats de plusieurs méthodes de mesure qui peuvent être comparées.

En pratique, cela signifie qu'avec un bon outil de mesure, tu peux régler la manière dont il mesure le temps de chargement du site web. Il s'agit généralement du choix du serveur de test et de son emplacement, et parfois aussi du choix du navigateur de test.

Le niveau de détail des données signifie qu'il ne s'agit pas simplement de données de temps, mais d'une description détaillée de ce qui a été mesuré. Deux outils peuvent comprendre quelque chose de différent par "temps de chargement". Bien sûr, il est encore mieux d'utiliser des termes unifiés, comme Time to First Byte.

Enfin, il est bon de ne pas se contenter de mesurer le temps de chargement de ton site Web, mais de fournir également des informations sur le nombre de requêtes HTTP, la taille des paquets de données chargés ou encore les résultats des analyses de potentiel. Tu peux ainsi voir rapidement quels sont les leviers sur lesquels tu peux agir pour optimiser le temps de chargement.

D'autres outils que nous connaissons n'offrent que des possibilités limitées, voire pas du tout, et peuvent donc entraîner des problèmes de compréhension et donc d'interprétation. Mais pour toi, en tant qu'utilisateur final, ces avantages présentent un inconvénient majeur : les données sont loin d'être aussi faciles à comprendre que les résultats de Google PageSpeed Insights par exemple.

Les données de mesure ne sont pas toujours faciles à lire - mais avec quelques bases, elles sont toujours compréhensibles.

La partie la plus rebutante est certainement le diagramme en cascade. Pourtant, il fournit des données particulièrement importantes. Il vaut donc la peine d'étudier ce type de diagramme.

Dans ce post, je vais d'abord t'expliquer Pingdom. Un outil qui peut fournir rapidement des informations très intéressantes sur ton site web et qui mesure également le temps de chargement de ton site web.

Mesurer le temps de chargement du site web avec Pingdom. Voici le masque de saisie.
Masque de saisie de Pingdom. Cet outil est l'un des trois qui, selon nous, donne vraiment de bons résultats et, surtout, mesure le temps de chargement de ton site.

Pingdom montre particulièrement bien l'ordre dans lequel ton site web est construit et la taille des différents modules.

Pingdom est rapide et très facile à utiliser. En principe, tu n'as que deux choses à faire :

  • tout d'abord, tu saisis le domaine à tester
  • ensuite, tu choisis l'emplacement du serveur

L'emplacement du serveur est - avec le choix du navigateur à tester - l'un des paramètres les plus importants pour comprendre comment et à quelle vitesse ton site web se construit pour les clients de différentes régions. Pour de tels tests, l'emplacement du serveur indique depuis quel endroit ton site Web est appelé pour la mesure de la vitesse.

Veille à toujours utiliser le même emplacement de serveur, surtout lors de comparaisons de performances. C'est la seule façon de comparer les résultats. En effet, si le temps de chargement de ton site est mesuré une fois depuis les États-Unis et une fois depuis Francfort, les temps de chargement seront nettement différents pour un visiteur venant d'Allemagne.

Mesurer le temps de chargement du site web Pingdom Choix pour le serveur de test
Options de sélection pour le serveur de test du test Pingdom.

Lorsque tu démarres le test, après quelques instants, trois gros paquets de données sont éjectés :

  1. Aperçu et résultat de l'analyse du potentiel
  2. Répartition détaillée du site web
  3. Diagramme de la cascade

Dès le début, les trois données de base les plus importantes pour comprendre la performance de ton site web sont données :

  • la note de l'analyse de potentiel (1)
  • le temps de chargement du site web (2)
  • le nombre de requêtes HTTP (3)
Mesurer le temps de chargement du site web Résultat de l'aperçu Pingdom
Résultat d'ensemble de Staging

Le classement se réfère soi-disant à Google PageSpeed Insights. Mais dans tous nos tests jusqu'à présent, cette valeur a été faussée (dans le cas concret, 15 points en dessous du classement original et aussi nettement en dessous du classement pour les appareils mobiles) et donc inutilisable.

Le temps de chargement (2) du site web est la mesure centrale avec laquelle il est possible de faire des comparaisons de performance, par exemple. C'est la réponse directe à la question : à quelle vitesse mon site web se charge-t-il ? Le nombre de requêtes HTTP (3) se prête également bien à de telles comparaisons. La règle est la suivante : moins il y a de requêtes HTTP, mieux c'est.

Le composant "Faster than" (4) est un ajout sympathique. Dans notre cas, elle indique que raidboxes.fr est plus rapide que 75% des autres sites testés sur pingdom. Cette information peut servir à te situer approximativement. Si tu vois par exemple que ton site se charge plus rapidement que 95% des autres sites, c'est déjà un premier indice que ton site est sacrément rapide.

La section "Performance Insights" fait également partie de l'aperçu. Ici, tu reçois des évaluations et des propositions de solutions pour différents aspects de la performance de ton site web - comme pour les outils de Google ou de Yahoo. Ce qui est important pour la compréhension, c'est que le temps de chargement du site n'est pas mesuré ici, mais le potentiel d'optimisation du temps de chargement.

Pingdom analyse pontique mesurer le temps de chargement du site web
Comme deuxième partie de la mesure du temps de chargement, pingdom donne aussi cette analyse de potentiel.

La deuxième section est la ventilation détaillée du site. Ici, tu obtiens principalement des informations sur deux caractéristiques centrales : Le fonctionnement des pages individuelles et la composition du site.

Dans la zone que tu vois ci-dessous, tu obtiendrais par exemple toutes les erreurs 404 de ton site. Dans notre cas de test, tu peux voir ici que 69 réponses du serveur au navigateur ont eu lieu normalement. Deux de ces demandes ont été transmises.

Pingdom Redirections Mesurer le temps de chargement du site web
Pingdom vérifie également combien de redirections, d'erreurs 400 et 500 sont produites par ton site.

Dans les sections ci-dessous, les requêtes HTTP et le contenu de ton site sont répartis par type et par source. Tu peux ainsi voir rapidement si un certain type de contenu, par exemple les images, consomme particulièrement beaucoup d'espace ou produit un nombre particulièrement élevé de requêtes, ralentissant ainsi ton site.

Dans notre cas, les scripts prennent particulièrement de la place et provoquent de nombreuses demandes. (1+2) Cela est principalement dû à notre outil d'assistance, à Intercom, au badge Trusted Shops et aux demandes du site lui-même. (3) En interaction avec les requêtes, on peut aussi voir : Les demandes envoyées par intercom se rapportent à des paquets de données particulièrement volumineux. (4)

Pingdom Paquets de données Mesurer le temps de chargement du site web
Répartition du site web en fonction des requêtes et de la taille des paquets de données.

Le graphique en cascade te montre en détail l'ordre dans lequel les demandes se déroulent et combien de temps elles prennent pour se charger. Cela signifie que le diagramme en cascade est une vue détaillée du temps de chargement de ton site web.

De plus, tu trouveras une légende à la fin des résultats du test qui t'expliquera ce que signifient les symboles et les couleurs.

Dans notre cas, tu vois tout en haut la redirection de http vers https (1), puis le premier contact avec le serveur (2), puis les temps de chargement des différents scripts (3).

Diagramme en cascade pingdom Mesurer le temps de chargement du site web
Le graphique en cascade de pingdom.

Pingdom offre aussi la possibilité d'afficher exactement quelles parties d'une demande sont chargées et combien de temps. Par exemple, il est possible de calculer le Time to First Byte (c'est-à-dire le temps nécessaire au serveur pour envoyer le premier paquet de données), mais tu dois le calculer à partir des valeurs individuelles.

Prenons un exemple : Si tu regardes la première requête de notre site Web, tu verras qu'elle dure 129 millisecondes au total. Elle se compose d'une recherche DNS qui se fait en moins d'une milliseconde, d'une poignée de main SSL qui dure 29 millisecondes, de la connexion du navigateur au serveur qui dure 52 millisecondes, de l'envoi des données du navigateur au serveur, d'un temps d'attente de 47 millisecondes et enfin de la réception des premières données.

Diagramme en cascade Vue détaillée Mesurer le temps de chargement du site web
Vue détaillée du diagramme en cascade. Si tu veux mesurer le temps de chargement de ton site web, tu peux voir ici exactement combien de temps certains paquets de données mettent pour se charger.

Pendant le temps d'attente indiqué, le serveur calcule tous les processus PHP nécessaires. Cette valeur est donc bien adaptée si tu veux comparer deux fournisseurs d'hébergement.

De cette façon, tu peux voir chaque requête et la comparer à une autre mesure. Tu peux ainsi déterminer si le temps de chargement de ton site web s'est amélioré après une mesure d'optimisation et, si oui, de quel facteur.

Les avantages : Pingdom fournit rapidement des données pertinentes et de grande valeur informative.

Dans l'ensemble, pingdom est un bon outil pour mesurer le temps de chargement d'un site web. Avec pingdom, tu te rends compte rapidement

  • à quelle vitesse un site web se charge
  • quelle est sa taille
  • où elle a encore un potentiel d'optimisation
  • comment exploiter ce potentiel
  • comment se déroule la construction de ton site web

Les inconvénients : L'indication du temps de chargement, en particulier, est très imprécise.

L'outil a cependant deux limites importantes : d'une part, il n'y a que très peu d'emplacements de serveurs disponibles pour le test. Ce n'est pas un inconvénient en soi, car si l'on mesure toujours avec le même serveur, les résultats sont parfaitement comparables. Mais c'est exactement ce à quoi tu dois veiller lors de l'utilisation. Tu dois également choisir un emplacement de serveur qui se trouve le plus près possible de ton groupe de visiteurs principal.

D'autre part, le temps de chargement du site web n'est donné que sous forme agrégée. Cela signifie que tu ne peux pas savoir à quelle valeur se réfèrent les 1,84 secondes de l'exemple sans regarder le graphique en cascade. Il n'y a pas non plus de distinction entre la version mise en cache et la version non mise en cache du site Web.

Mais le plus grand inconvénient de Pingdom est probablement que tu ne peux pas voir le temps de chargement ressenti. Il se peut que ton site se charge en dix, douze ou treize secondes, mais qu'il donne l'impression d'être complètement chargé au bout de trois secondes. Ton site web est donc perçu comme beaucoup plus rapide qu'il ne l'est en réalité. Pingdom n'offre cependant pas la possibilité d'afficher ce temps de chargement perçu (dans la version gratuite, bien sûr). GTmetrix et webpagetest.org le font mieux.

Pingdom peut rapidement répondre à la question souvent la plus importante pour toi : A quelle vitesse mon site web se charge-t-il ? De plus, l'outil en dit long sur la structure de ton site. Mais il y a encore mieux ! Dans la prochaine partie de cette série, je parlerai plus en détail de GTmetrix. Ce test fournit encore plus de données et convainc surtout par sa fonction vidéo et l'analyse des séries chronologiques du temps de chargement de ton site web.

Quels sont les outils avec lesquels tu as eu les meilleures expériences jusqu'à présent en matière d'analyse de performance ?

As-tu aimé cet article ?

Tes évaluations nous permettent d'améliorer encore plus notre contenu.

Laisse un commentaire

Ton adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués d'un *.