Navigation Timing API

Navigation Timing API est une interface de programmation qui permet d'accéder à des informations sur les performances de navigation d'un site Web, générées par le navigateur. Cela correspond à peu près aux informations que l'on trouve dans l'onglet Performance des devtools mais avec un accès "programmatique" plutôt que visuel. Ainsi on peut mesurer les temps de chargement et de rendu, non seulement sur son propre poste mais aussi sur celui des internautes et récupérer l'information. Différents événements sont monitorés et retournés en plus du temps de chargement total de la page. Le support est très bon sur tous les navigateurs depuis environ 2014.

☝ En réalité cette API profite d'un interface déjà décrite dans une autre spécification : Performance Timeline qui elle-même étend les pouvoirs déjà offerts par High Resolution Time.

Voici un exemple de code qui utilise l'API Navigation Timing pour mesurer le temps total :

// Récupération de l'objet de performance de navigation
const perf = window.performance;

// Récupération de l'événement de chargement de la page
const loadEvent = perf.timing.loadEventEnd;

// Récupération du temps actuel
const now = perf.now();

// Calcul du temps total de chargement (en millisecondes)
const pageLoadTime = now - loadEvent;

// Affichage du temps total de chargement de la page
console.log("Temps total de chargement : " + pageLoadTime + " ms");

Ici on se concentre sur loadEventEnd mais il existe bien d'autres propriété intéressantes spécifiques à cette API :

• startTime : temps (en ms) auquel la navigation a commencé, c'est-à-dire lorsque l'internaute a cliqué sur un lien ou saisi une URL dans la barre d'adresse.
• loadEventStart et loadEventEnd : temps (en ms) auquel l'événement load de la page a été déclenché et s'est terminé.
• domInteractive : temps (en ms) auquel le navigateur a terminé le parsing du document HTML et a commencé à traiter les scripts et les ressources externes de la page.
• domContentLoadedEventStart et domContentLoadedEventEnd : temps (en ms) auxquels le navigateur a démarré puis terminé le chargement de la partie "non-bloquante" de la page (c'est-à-dire les éléments qui ne sont pas nécessaires au chargement initial de la page, comme les images et les scripts en mode asynchrone).
• domComplete : temps (en ms) auquel le navigateur a terminé le chargement de tous les éléments de la page, y compris les ressources bloquantes (comme les scripts JavaScript qui doivent être chargés et exécutés avant que la page soit rendue).

Et des propriété héritées des interfaces déjà mentionnées dans d'autres API :

• redirectStart et redirectEnd : temps (en ms) auquel la redirection a commencé et s'est terminée, si la navigation a été redirigée vers une autre URL.
• fetchStart : temps (en ms) auquel la requête HTTP a été envoyée pour récupérer le document HTML de la page.
• domainLookupStart et domainLookupEnd : temps (en ms) auquel la résolution de nom de domaine a commencé et s'est terminée.
• connectStart et connectEnd : temps (en ms) auquel la connexion au serveur a commencé et s'est terminée.
• requestStart : temps (en ms) auquel la requête HTTP pour le document HTML de la page a été envoyée au serveur.
• responseStart et responseEnd : temps (en ms) auquel la réponse du serveur a été reçue et la réception du document HTML de la page a été terminée.
• domLoading : temps (en ms) auquel le navigateur a commencé à parser le document HTML de la page.

À noter que certaines clés sont préservées pour raisons de compatibilité avec la version 1 de l'API mais dépréciées dans la dernière à jour.

Ces propriétés associées ensemble peuvent être utilisées pour mesurer différentes étapes du processus de chargement et identifier les goulots d'étranglement à améliorer.

Vous pouvez également examiner tout ceci en entrant window.performance.timing dans la Console du navigateur.

Usage pour statistiques

Voici un exemple de code qui utilise la Navigation Timing API pour mesurer le temps total de chargement d'une page Web et envoyer cette information à une API de statistiques :

// Récupération de l'objet de performance de navigation
const perf = window.performance;

// Récupération de l'événement de chargement de la page
const loadEvent = perf.timing.loadEventEnd;

// Récupération du timing actuel
const now = perf.now();

// Calcul du temps total de chargement (en millisecondes)
const pageLoadTime = now - loadEvent;

// préparation de l'objet à envoyer à l'API de statistiques
const statsData = {
  pageLoadTime: pageLoadTime
};

// envoi des données à l'API de statistiques sous forme JSON
fetch("https://example.com/stats", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(statsData)
})
  .then(function(response) {
    console.log("Données envoyées à l'API de statistiques :", response);
  })
  .catch(function(error) {
    console.error("Erreur lors de l'envoi des données à l'API de statistiques :", error);
  });

Notez que cet exemple est simplifié et ne prend pas en compte tous les cas possibles par exemple, si la requête à l'API de statistiques échoue (dans ce cas il faudrait traiter l'erreur renvoyée) ou si la page est redirigée avant que les données puissent être envoyées (dans ce cas il faut décider si on ignore ou si on stocke l'information temporairement dans sessionStorage pour tenter un nouvel envoi sur une page suivante).