Mesurer le temps de chargement du site web

3 outils qui te permettent de mesurer correctement le temps de chargement de tes pages

À quelle vitesse mon site 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.

Il existe sur le web quelques superbes articles de synthèse sur des outils permettant à tout utilisateur de mesurer très facilement et surtout gratuitement la performance et le temps de chargement de son propre site web. Ces aperçus sont très utiles, mais 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 d'effectuer des comparaisons de performances avec des données totalement inadapté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 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 tels que Google PageSpeed Insights et YSlow de Yahoo. Ces outils indiquent dans quelle mesure le site web testé remplit les conditions pour un chargement rapide des pages. Les deux fournissent ainsi d'excellentes données pour l'optimisation on-page. De tels tests ne mesurent toutefois pas explicitement le temps de chargement de ton site web.

La plupart du temps, c'est pourtant ce que tu veux savoir : Combien de temps faut-il à mon site pour se construire, 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'y a que trois outils gratuits qui fournissent de bonnes données :

C'est pourquoi, dans cet article et dans deux autres, je vais te montrer ce que peuvent faire les trois outils de mesure, comment tu dois les utiliser et comment interpréter les données afin de tirer le meilleur parti de tes 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 possibilités de réglage
  • être éditées à 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 d'indications 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". Il est bien sûr encore mieux d'utiliser des termes uniformisé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. Pour toi, en tant qu'utilisateur final, ces avantages présentent toutefois un inconvénient de taille : 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 de se pencher sur ce type de diagramme.

Dans ce billet, je vais d'abord expliquer Pingdom plus en détail. Il s'agit d'un outil qui peut fournir rapidement des informations très intéressantes sur ton site et qui mesure également le temps de chargement de ton site web.

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

Pingdom montre particulièrement bien l'ordre dans lequel ta page est construite et la taille des différents éléments.

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 pouvoir comprendre comment et à quelle vitesse ton site s'affiche pour les clients de différentes régions. Lors de tels tests, l'emplacement du serveur indique l'endroit à partir duquel ton site web est appelé pour la mesure de la vitesse.

Veille à toujours utiliser le même site de serveur, surtout lors de comparaisons de performances. C'est le seul moyen de comparer les résultats. En effet, si le temps de chargement de ton site web est mesuré une fois depuis les Etats-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
Possibilités de choix pour le serveur de test du test Pingdom.

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

  1. Aperçu et résultat de l'analyse du potentiel
  2. Ventilation détaillée de la page
  3. Diagramme de la cascade

Dès le début, les trois données de référence les plus importantes pour la compréhension de la performance de ton site sont données :

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

L'évaluation se réfère soi-disant à Google PageSpeed Insights. Or, dans tous nos tests, cette valeur était jusqu'à présent faussée (dans le cas concret, 15 points en dessous de l'évaluation originale et aussi nettement en dessous de l'évaluation pour les appareils mobiles) et donc inutilisable.

Le temps de chargement (2) de la page est la grandeur centrale qui permet par exemple de faire des comparaisons de performance. C'est la réponse directe à la question : à quelle vitesse ma page se charge-t-elle ? 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, il indique que raidboxes.de est plus rapide que 75% des autres sites testés par pingdom. Cette information peut être utilisée pour une localisation approximative. Si, par exemple, il t'est indiqué que ta page se charge plus rapidement que 95% des autres pages, c'est déjà un premier indice que ta page 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. Tout comme les outils de Google ou de Yahoo. Ce qui est important pour la compréhension : ici, ce n'est pas le temps de chargement du site qui a été mesuré, mais le potentiel d'optimisation du temps de chargement.

Pingdom Pontezialanalyse Mesurer le temps de chargement du site web
En tant que deuxième partie de la mesure du temps de chargement, pingdom fournit également cette analyse de potentiel.

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

Dans la zone que tu vois ci-dessous, tu obtiendrais par exemple toutes les erreurs 404 de ta page. 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 ta page sont ventilés par type et par source. Tu peux ainsi rapidement voir 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 génèrent de nombreuses requêtes. (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 également constater : 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 de la page en fonction des requêtes et de la taille des paquets de données.

Le diagramme en cascade te montre en détail dans quel ordre les requêtes se déroulent et combien de temps elles mettent à se charger. Cela signifie que le diagramme en cascade est une vue détaillée du temps de chargement de ton site web.

En outre, tu trouveras tout à la fin des résultats de test une légende qui t'expliquera la signification des symboles et des couleurs.

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

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

Pingdom offre également la possibilité d'afficher exactement les parties d'une requête et leur durée de chargement. Il est ainsi possible de déterminer par exemple 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 trouver à partir des valeurs individuelles.

Prenons un exemple : Si tu observes la première requête de notre site, tu constates qu'elle dure au total 129 millisecondes. Elle se compose d'une recherche DNS qui s'effectue en moins d'une milliseconde, d'une poignée de main SSL qui dure 29 millisecondes, de l'établissement de la connexion entre le navigateur et le 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 hébergeurs.

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

Avantages : Pingdom fournit très rapidement des données pertinentes, avec une valeur informative élevée

Dans l'ensemble, pingdom est un bon outil pour mesurer le temps de chargement d'un site web. Tu détectes rapidement avec pingdom

  • la vitesse de chargement d'une page
  • 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

Inconvénients : L'indication du temps de chargement en particulier est très imprécise

L'outil présente toutefois deux limites importantes : d'une part, très peu de sites de serveurs sont disponibles pour le test. Ce n'est certes 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 précisément ce à quoi tu dois veiller lors de l'utilisation. De même, tu devrais choisir un site de serveur qui se trouve si possible à proximité de ton groupe de visiteurs principal.

D'autre part, le temps de chargement de la page n'est indiqué que de manière 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 diagramme en cascade. De plus, aucune distinction n'est faite entre la version mise en cache et la version non mise en cache de la page.

Le plus grand inconvénient de Pingdom est probablement le fait que tu ne peux pas connaître le temps de chargement perçu. En effet, il se peut que ta page se charge en dix, douze ou treize secondes, mais qu'elle donne l'impression d'être complètement chargée après seulement trois secondes. Ta page serait donc perçue comme nettement plus rapide qu'elle ne l'est en réalité. Pingdom n'offre cependant pas la possibilité d'afficher ce temps de chargement perçu (dans la variante gratuite, bien entendu). GTmetrix et webpagetest.org le font mieux.

Pingdom peut répondre rapidement à la question souvent la plus importante : À quelle vitesse mon site 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 vais m'intéresser de plus près à GTmetrix. Ce test fournit encore plus de données et peut surtout convaincre grâce à une fonction vidéo et une analyse de séries chronologiques du temps de chargement de tes pages.

Avec quels outils as-tu fait jusqu'à présent les meilleures expériences 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.