Les marqueurs et mesures de temps d'utilisation sont deux fonctionnalités liées aux performances, disponibles dans la plupart des navigateurs modernes. Elles permettent de collecter des données sur l'utilisation de votre page web ou application par vos utilisateurs, ce qui contribue à optimiser les performances de votre site web.
Les marqueurs de temps utilisateur permettent de repérer des points précis dans votre code, qui peuvent ensuite être mesurés par l'outil de mesure du temps utilisateur. Cela permet d'identifier les goulots d'étranglement dans votre code. Par exemple, vous pouvez utiliser un marqueur de temps utilisateur pour indiquer le début d'un JavaScript , puis utiliser l'outil de mesure du temps utilisateur pour connaître le temps de chargement de ce fichier.
Les mesures de temps utilisateur enregistrent le temps écoulé entre deux points de mesure. Cela permet d'évaluer les performances de portions de code spécifiques. Par exemple, vous pouvez utiliser une mesure de temps utilisateur pour déterminer la durée AJAX d'exécution d'une requête
Vous pouvez en savoir plus sur les marques et mesures de temps utilisateur sur le site web du W3C.
Que sont les marques de temps utilisateur ?
Ces deux indicateurs, les marques et mesures de temps utilisateur, sont des métriques de performance permettant d'identifier les problèmes et d'optimiser les applications web. Les marques de temps utilisateur mesurent le temps écoulé entre deux événements ou le temps nécessaire à la réalisation d'un événement. Les mesures de temps utilisateur mesurent la durée d'un événement ou le nombre d'événements survenant dans un laps de temps donné.
Comment ajouter des marques de temps utilisateur ?
L'ajout de marqueurs et de mesures de temps d'interaction utilisateur est un excellent moyen d'analyser les performances de vos pages web. Ces marqueurs vous permettent de suivre la durée de certaines actions sur vos pages, comme le clic d'un utilisateur sur un bouton ou un lien.
Pour ajouter des repères et des mesures de temps utilisateur, vous devrez d'abord créer un nouveau fichier JavaScript. Ensuite, vous devrez inclure le code suivant dans votre fichier :
var startTime = Date.now();
fonction faireQuelqueChose() {
var endTime = Date.now();
var timeTaken = endTime – startTime ;
console.log('Il a fallu ' + timeTaken + ' ms pour que la fonction doSomething s'exécute.');
}
Le code ci-dessus vous permet de mesurer le temps d'exécution de la fonction « do Something ». Vous pouvez également utiliser cette technique pour suivre d'autres événements sur votre page. Pour ce faire, remplacez le nom de la fonction dans le code ci-dessus par le nom de l'événement que vous souhaitez suivre.
Conseils pour marquer le temps dans votre code
1. Pour mesurer le temps d'exécution d'une action dans votre code, vous pouvez utiliser la `performance.now()` . Celle-ci vous fournira un horodatage précis au millième de milliseconde.
2. Vous pouvez également utiliser la méthode Date.now() si vous n'avez pas besoin d'une telle précision.
3. Si vous souhaitez mesurer la durée d'une opération dans des unités spécifiques (par exemple, secondes, minutes, etc.), vous pouvez utiliser les méthodes performance.mark() et performance.measure().
4. Enfin, si vous souhaitez obtenir des informations détaillées sur ce qui se passe dans votre code et sur le temps d'exécution de chaque partie, vous pouvez utiliser les méthodes mark() et measure() de l'API User Timing.
Conclusion
L'API User Timing est idéale pour analyser l'interaction de vos utilisateurs avec vos applications web. Grâce aux marqueurs et aux mesures, vous pouvez suivre des événements spécifiques et des informations de temps afin d'identifier les éventuels goulots d'étranglement ou problèmes. De plus, l'API User Timing permet de collecter des données de performance pour améliorer l'expérience utilisateur globale.
