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 mobile 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. Ă€ ce moment lĂ , la page est toujours blanche.

Start Render

La première fois que quelque chose apparaĂ®t Ă  l’Ă©cran. À 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Ă©.

Dareboost
Source : Journaldunet.com

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 connu 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.



Hello.
Mon nom est Vincent Ballut, je suis développeur web freelance basé à Paris. J'ai aussi un site pro, un github, et je tweet de temps en temps. Si vous souhaitez me contacter, je réponds plus facilement sur linkedin ou par email.

Ajouter un commentaire

Laisser un commentaire

Hello.
Je m'appelle Vincent Ballut,
développeur web
freelance.

Je publie des articles accessibles et pédagogiques sur tout ce qui touche au développement web et à ses problématiques.

Dans la vraie vie, je suis développeur web freelance basé à Paris, spécialisé dans le développement frontend (Angular, React, VueJS, etc).

J'ai aussi un site pro, un github, et je tweet de temps en temps. Si vous souhaitez me contacter, je réponds plus facilement sur linkedin ou par email.

Derniers articles