Mesurer facilement le temps de chargement d’une page web — console web

Un temps de chargement trop long ou un écran qui rame et l’utilisateur va automatiquement quitter le site aussi vite qu’il est venu (on estime à 4 secondes le temps d’attente maximum pour un utilisateur web). Mais avant même que l’utilisateur arrive sur votre page il faut qu’il la trouve et les robots comme Google bots auront tendance à mieux référencer les sites se chargeant en moins de 2 secondes.
Il est donc très important de prendre en compte le temps de chargement d’une page web.

Il existe différentes façon de mesurer le temps de chargement d’un page web.
On retrouve:

• la console navigateur
• des outils en lignes
• des plugins
• un outil de tir de performance

Le site exemple va tout simplement être le site framasoft qui effectue la promotion de logiciel libre Framasoft

Dans cet article il va être question de la première méthode “la console navigateur”, les autres exemples seront détaillés dans d’autres articles.

Cet outil très puissant (mais aussi usine à gaz) permet d’avoir une mesure très précise du temps de chargement d’une page Web en détaillant chacun des appels de la page. (Incluant Javascript).
Pour cela on va se plonger dans les navigateurs Chrome/Firefox/Edge et leur console.
De plus je suis sur un réseau fibré donc mon temps de chargement sera plus rapide que sur un téléphone en EDGE par exemple.

• Chrome

Pour accéder à la console il suffit d’ouvrir Chrome puis de cliquer sur F12. La console ci-jointe devrait s’ouvrir

Ensuite il faut cliquer sur Network, cocher le cache “disable cache” puis lancer la recherche de la page cible; l’ensemble des données de l’image se charge.
Vous devriez avoir une image comme celle-ci.
L’information recherchée se situe en bas de l’écran soit “Load : 1.96 s” en rouge, cette donnée correspond au temps de chargement de la page.

Simple non ?

• Firefox

C’est le même principe que pour Chrome, on accède à la console développeur via le bouton F12

Ensuite il faut cliquer sur Réseau et là on remarque qu’il n’est pas possible de vider le cache comme sur Chrome. Quand on effectue la mesure du temps de chargement d’une page web, il faut à tout prix vider son cache pour ne pas avoir de donnée restantes, ce qui pourrait fausser les temps de chargement (notamment si votre page contient des images). Une des solutions est de passer en navigateur privée.
Après être passé en navigation privée on rouvre la console puis on va sur l’onglet Réseau, ensuite on effectue la recherche de la page cible, l’ensemble des données de l’image se charge.

Vous devriez avoir un résultat proche de celui-ci:

L’information recherchée se situe en haut de l’écran il est noté “1.40s”, cette donnée correspond au temps de chargement de la page. On constate que le navigateur Firefox a chargé plus rapidement la page web (25% plus vite).

Pour montrer l’importance du cache voici la même page rechargée (donc avec des données dans le cache)

0.9s avec le cache contre 1.4s sans le cache le gain ici est de plus 35% mais va aussi beaucoup fausser vos résultats.

• Edge

On reste sur le même schéma. On clique sur F12 et l’écran ci-joint devrait apparaître

Ensuite il suffit de cliquer sur Réseau puis de ne pas oublier de vider le cache en cliquant sur le bouton ci joint

puis d’effectuer la recherche de la page cible, l’ensemble des données de l’image se charge.
Vous devriez avoir une image comme celle-ci.

L’information recherchée se situe en bas de l’écran il est noté “Load : 1.63 s”, cette donnée correspond au temps de chargement de la page.

• Conclusion

L’utilisation de la console pour mesurer le temps de chargement des pages webs est une des méthodes les plus précises. Elle permet de bien distinguer les différents éléments qui compose une page web notamment les données JS qui sont de plus en plus présentes dans les sites d’aujourd’hui avec une démocratisation du material design.

• Pour aller plus loin

Comment mesurer le temps de chargement depuis la console Google