Comment mesurer les performances d’une page web ?
J’ai assisté le mois dernier à un évènement dédié au SEO, organisé par Search Foresight (ils organisent régulièrement ce type d’évènement, c’est gratuit et ouvert à tous, si ça vous intéresse c’est par ici).
Parmi les conférences, toutes de grande qualité, une m’a particulièrement intéressé : “Le temps de chargement n’existe pas”, par Damien Jubeau, CEO de Dareboost. Cet article en est largement inspiré.
Tout part du constat suivant :
53% des visites sur mobiles sont abandonnées si le temps de chargement excède les 3 secondes.
Etude Doubleclick
Mais de quoi parle-t’on exactement ? Comment mesurer le temps de chargement d’une page ? Et quand considère-t’on qu’une page est chargée ?
Page chargée ? Temps de chargement ?
Il existe de nombreux indicateurs : Time to First Byte, évènement onload, Dom Complete, Start Render, Visually Complete… Chacun correspond à une étape différente du chargement d’une page, et faut comprendre ces indicateurs pour savoir de quoi on parle.
Time to First Byte
Délai avant réception du premier octet de la réponse HTTP. C’est le temps de réponse du serveur, le temps que met le serveur à produire la page. A ce moment là, la page est toujours blanche.
Start Render
La première fois que quelque chose apparait à l’écran. A ce moment là, la page n’est plus blanche. C’est un bon indicateur, mais ça ne suffit pas pour dire que la page a terminé son chargement. Elle est loin d’être complète et utilisable.
Visually complete
Le dernier changement visuel de la page. C’est le chargement final de la page, au dessus de la ligne de flottaison. Ce n’est toujours pas suffisant, car une page peut être prête et utilisable à 90% bien avant.
TTFB et Start Render arrivent trop tôt, alors que Visually Complete arrive trop tard.
Speed Index
Graphe de la progression visuelle de la page au cours du temps. C’est le délai moyen d’affichage des éléments de la page, pour traduire la progressivité de l’affichage.
A l’inverse de toutes les autres mesures que vous pourrez rencontrer, le Speed Index n’est pas un nouveau jalon à poser sur la timeline du chargement de vos pages web. Bien que généralement exprimé en millisecondes, c’est le résultat d’un calcul. Avec un objectif : retranscrire la vitesse moyenne d’affichage de la page web dans toute sa progressivité.
Le Speed Index varie selon le contexte (Wifi, 4g, 3g, bande passante, résolution d’écran, puissance CPU, extensions installées, cookies…). Il n’y a pas un indicateur, mais plus plusieurs selon les contextes.
Pour suivre les performances d’un site, il faut faire attention à conserver un contexte stable.
Les outils pour mesurer le temps de chargement
Nous avons vu comment se mesure le temps de chargement d’une page, il nous manque à voir comment effectuer cette mesure, dans la pratique.
Il existe de nombreux outils, dont une grande partie mis à disposition par Google. Voyons comment ils fonctionnent, et lesquels utiliser.
Web Page Test
C’est l’outil de référence, qui existe depuis très longtemps, et utilisé par beaucoup d’autres outils. Web Page Test permet de faire beaucoup de choses, et sa prise en main peut être assez longue. Si vous débutez ou si vous avez besoin de faire un test rapide, utilisez plutôt un des outils plus accessibles cités ci-dessous.
Test my site
Un joli outil, très facile à utiliser, qui se base sur Web Page Test et sur le Speed Index. Notons un gros manque de transparence sur la façon dont sont collectées les données.
Google Analytics
Parmi la foison de données collectées par Google Analytics, on trouve un indicateur de performance basé sur l’évènement onload de JavaScript. Ce n’est pas du tout le même indicateur que sur Test my site. Google Analytics fait la moyenne des temps de chargement sur votre trafic, dans tous les contextes. L’outil donne la possibilité de segmenter pour cibler une population homogène, mais le trafic est déjà segmenté sur 1% de vos visiteurs. Ce n’est pas une mesure particulièrement fiable et pertinente.
Google Lighthouse
Cet outil, initialement disponible via une extension Chrome, est maintenant embarqué dans les outils pour développeur de Chrome via l’onglet Audit. C’est une mesure effectuée depuis votre ordinateur, donc affectée par votre contexte. Lighthouse calcule un score de performance basé sur divers indicateurs.
Google Pagespeed Insights
Cet outil, plutôt ancien, a connue une refonte récente, et utilise désormais Lighthouse et son score de performance. La différence : le test est déclenché sur les infrastructures de Google, donc beaucoup plus stable. Les résultats comprennent également des données venant des statistiques récoltées sur le web.
Conclusion
A l’heure actuelle, l’outil qui coche le plus de cases me semble être Google Pagespeed Insight. Côté indicateurs, si vous ne devez n’en prendre en compte qu’un seul, le plus pertinent est le Speed Index.
