Nouveaux indicateurs pour vos tests et monitoring performance : Custom Timings

Spread the love

Les custom timings (API User Timing), viennent de débarquer sur Dareboost. Cette nouvelle famille d’indicateurs de performance vient enrichir et donner une nouvelle dimension à vos analyses et surveillances de pages web. Et ce n’est pas tout : d’autres indicateurs avancés comme le DomContentLoaded ou le Onload font aussi leur arrivée dans les données de vos surveillances… Examinons en détail comment ces nouveaux indicateurs de performance s’intègrent dans notre outil.

Les Custom Timings dans les analyses Dareboost

Nous vous présentions il y a peu l’API User Timing et l’intérêt de mettre en place des Custom Timings. Les Custom Timings sont un moyen très simple de renforcer le suivi des performances, en créant des indicateurs spécifiques qui répondront au mieux aux enjeux de vos pages (et sans avoir à installer un javascript supplémentaire sur vos pages, c’est une interface standard).

Dareboost collecte automatiquement ces “mark” mises en place par vos développeurs et développeuses et leur visualisation dans Dareboost ne vous demandera aucun effort !

Comme le montre l’image ci-dessous, Dareboost collecte systématiquement, pour chaque analyse réalisée, l’ensemble des marqueurs que vous avez définis sur vos pages en utilisant l’API User Timing.

Collecte cutom timings - analyses Dareboost

Le rapport d’analyse indique alors le nombre de Custom Timings collectés, quelque soit leur type, c’est à dire les “marks” (marques ponctuelles) et les “measures” (durées calculées entre deux “marks” donnés).
En cliquant sur cette zone vous accédez à la liste complète des custom timings récupérés, avec leur valeur (exprimée en millisecondes).

liste Custom timings sur rapport d'analyse Dareboost

L’illustration prise pour exemple montre que Dareboost a collecté 27 custom timings différents sur la page Youtube analysée… Indiquant que le site de vidéos utilise l’API User Timing de manière assez intensive. Dans un premier temps, peut-être préférerez-vous vous focaliser sur la mesure de quelques repères personnalisés, choisis pour signaler le chargement d’éléments stratégiques dans votre contexte (la “Hero image”, Le lancement d’une vidéo, le chargement d’un script externe ou de l’insertion publicitaire, etc.).

Quelque soit le nombre de timings que vous aurez choisi de créer, leur collecte par Dareboost est automatique et ne nécessite aucune configuration de votre part. L’occasion toutefois d’attirer votre attention sur un point important : le nommage de vos Custom Timings. Prenez soin de définir en amont une charte de nommage pour vos “marks” et autres “measures”. Un effort initial qui vous fera gagner en temps et en efficacité pour l’analyse de vos données !

Surveillance enrichies

Les surveillances automatiques Dareboost profitent aussi de cette évolution pour s’enrichir sensiblement. La liste des indicateurs de performance qu’elles permettent de suivre s’étend en effet à 7 nouveaux timings ! A savoir :

Fin de réception du code HTML
Vous connaissez déjà le délai avant réception du premier octet (Time to First Byte). Cet indicateur en est étroitement dépendant. Il prend en compte un délai supplémentaire : celui de la réception du reste de la réponse, c’est à dire le délai nécessaire pour récupérer l’intégralité du code HTML de la page.

DOM Interactive
Cet événement indique que le navigateur a terminé d’analyser l’ensemble du code HTML et que la construction du DOM est terminée. Attention à son nom trompeur, cela ne signifie en aucun cas que la page est interactive. Au moment où le DOM devient interactif, vous n’avez aucune garantie non plus que la page soit affichée (par exemple dans le cas d’un script bloquant ou d’une feuille de style.)

DOM Content Loaded Event Start
Indique l’instant où le navigateur déclenche l’événement DOMContentLoaded. Quand cet événement est déclenché, vous avez la garantie que les scripts synchrones et ceux déclarés en defer ont été exécutés. Il en va de même pour les feuilles de styles chargées de manière synchrone.
Cet événement est très utilisé pour déclencher des traitements asynchrones. De nombreux frameworks javascripts se basent par exemple sur cet événement.

DOM Content Loaded Event End
L’événement DOMContentLoaded est achevé. La durée entre le début et la fin du DOM Content Loaded peut être un excellent indicateur pour jauger de l’impact sur vos performances du chargement des composants se déclenchant lors de l’événement DOM Content Loaded.

DOM Complete
Tous les scripts présents dans le DOM, y compris ceux avec l’attribut async, ont été exécutés. Toutes les ressources de la page définies dans le DOM sont chargées (images, iframes, etc.)

Load Event Start
Il est dans la plupart des cas équivalent au DOM Complete. Le seul délai supplémentaire qui pourrait être introduit serait causé par des traitements basés sur un onReadyStateChange déclenché sur le DOM Complete.

Load Event End
Indique le moment où l’événement Load du document est achevé. La durée de cet événement va dépendre des traitements déclenchés au onLoad (chargement de nouvelles ressources, etc.).

Au total donc, les monitorings Dareboost permettent dorénavant de suivre l’évolution de 13 indicateurs de performance… au minimum. Car à ces métriques s’ajoutent potentiellement les Custom Timings utilisés sur la page surveillée !

Pour vous permettre d’examiner et comparer l’évolution de tous ces indicateurs comme bon vous semble, Nous avons fait évoluer le graphe principal de vos monitorings, comme l’illustre le screenshot ci-dessous :

monitoring graphe modifier affichage

En cliquant sur le bouton “Changer les indicateurs affichés”, Dareboost vous permet de sélectionner les indicateurs à afficher sur le graphe.

monitoring graphe modifier affichage

La fenêtre de configuration rassemble tous les indicateurs à votre disposition : les “standards”, les “avancés” ainsi que tous les Custom Timings de type “mark” que Dareboost a pu collecter sur la période de la surveillance. Il vous suffit alors de cocher ceux que vous voulez afficher.
NB : la collecte des Custom Timings et de certains indicateurs avancés par Dareboost a démarré le 02/04/2018.

Grâce à cette évolution, Dareboost devient un outil encore plus puissant pour l’analyse de vos données de performance, vous permettant de vous focaliser sur des temps très techniques, des indicateurs au plus proche de l’UX comme le Speed Index, mais aussi vos propres indicateurs métiers avec les Custom Timings. Et bien sûr, nous vous encourageons à les explorer sous différents angles qui seront sans nul doute source de nouveaux apprentissages !
Evidemment, la fonctionnalité d’export disponible sur chacune de vos surveillances “hérite” de cet enrichissement : tous ces nouveaux indicateurs sont également disponibles dans les fichiers CSV que vous exportez.

Indicateurs avancés dans les groupes de surveillance

Les groupes de surveillances profitent eux aussi de ces nouveaux indicateurs avancés. Vous pouvez désormais comparer l’évolution de 13 indicateurs de performance pour les pages que vous aurez choisi de regrouper !

groupe monitoring dareboost

Et pour les surveillances de scénarios ?

Cet enrichissement n’est pas encore disponible pour notre outil de monitoring des parcours utilisateurs. Mais n’hésitez pas à nous contacter dès à présent si vous souhaitez faire partie des tout premiers informés de ce prochain déploiement !

À vous de jouer !

En conclusion, l’intégration des Custom Timings – et des indicateurs avancés – à l’outil Dareboost représente un élargissement considérable des possibilités en matière de suivi de vos performances web et d’analyse.
Comme indiqué plus haut, cette évolution vous permet désormais de croiser une palette de données de performance génériques déjà très large à des indicateurs personnalisés pour une analyse encore plus pertinente des performances de vos pages web.
Il ne vous reste plus qu’à mettre en place vos custom timings, pour que le suivi des éléments les plus critiques de vos pages démarre sur le champ via Dareboost…

 

N’hésitez pas à poursuivre votre lecture avec cet article : [Use Case] Quand Dareboost utilise les Custom Timings pour son propre site web


Spread the love