Navigation Timing

Chronométrage de la navigation

Le chronométrage de la navigation facilite la mesure de la vitesse et des performances réelles des sites Web et la recherche des zones présentant des problèmes qui doivent être résolus. Ainsi, le chronométrage de la navigation vous aide à rechercher les problèmes de latence en contrôlant avec précision la navigation de l’utilisateur dans des pages Web et en effectuant le suivi du chronométrage des activités de l’utilisateur. Vous pouvez ensuite identifier plus facilement les goulets d’étranglement des performances et rechercher des solutions efficaces pour réduire la latence et améliorer la vitesse et l’efficacité de votre site Web. L’ancien système de mesure des performances ne fournissait pas l’image de latence de bout en bout complète que permet le chronométrage de la navigation.

Windows Internet Explorer 9 et Internet Explorer 10 prennent en charge l’API de chronométrage de la navigation tel que la définit le W3C Web Performance Working Group dans la spécification Navigation Timing.

Mesure du chronométrage de la navigation

Vous pouvez mesurer le chronométrage de la navigation de différentes manières. Dans cette rubrique nous examinons trois d’entre elles.

Mesure du démarrage de l’affichage

Le script suivant calcule la latence de bout en bout côté client de la navigation sur une page la plus récente.


<html>
<head>
<script type="text/javascript">
// Add load event listener.
window.addEventListener("load", loadTime, false);

function loadTime() {
  // Get current time.
  var now = new Date().getTime();
  // Calculate page load time.
  var page_load_time = now - performance.timing.navigationStart;
  // Write the load time to the F12 console.
  if (window.console) console.log(page_load_time);
}
 </script>
</head><body>
<!- Main page body is here. -->
</body>
</html>


La section JavaScript dans l’en-tête configure un gestionnaire d’événements pour l’événement de chargement « load ». Lorsque le navigateur déclenche l’événement load, la fonction loadTime est appelée. La fonction loadTime obtient d’abord l’heure actuelle avec la méthode getTime JavaScript. Ensuite, la méthode performance.timing.navigationStart retourne l’heure immédiatement après que l’agent de l’utilisateur a indiqué de décharger le document précédent. La différence entre les deux horodateurs est que l’utilisateur a perçu la latence de chargement de bout en bout. Cette différence est affichée dans la console, si les outils F12 sont exécutés.

Mesure de la durée sur les différents sous-systèmes de navigation

Une navigation type sur une page passe par plusieurs phases avant que la page soit affichée. Le chronométrage de navigation vous permet de mesurer chacun de ces sous-systèmes séparément afin de détecter plus facilement les goulets d’étranglement. Le code suivant mesure le temps nécessaire pour établir une connexion.


var t = performance.timing;
var n = performance.navigation;
if (t.connectEnd > 0 && t.connectStart > 0) {
  var connection_time = t.connectEnd - t.connectStart;
  if (n.type == n.TYPE_NAVIGATE) {
   if (window.console) console.log(connection_time);
  }
}

Ce code JavaScript utilise l’API performancetiming pour mesurer la durée de connexion du début à la fin et l’objet navigation pour déterminer s’il s’agissait d’une navigation sur une page. Le script vérifie si les propriétés connectStart et connectEnd sont supérieures à zéro pour différentier une ressource nouvelle ou mise en cache. Puis, la propriété connectStart est soustraite de la propriété connectEnd pour déterminer la durée de la connexion. Enfin, une vérification est effectuée pour déterminer si le type de navigation a bien été généré par la demande de l’utilisateur. La différence est affichée dans la console, si les outils F12 sont exécutés. Cette différence est le temps consacré à établir une connexion avec le serveur pour charger votre ressource.

Utilisation de JSON

En plus d’utiliser le chronométrage de navigation pour tester vos pages, vous pouvez également recueillir des données à partir des opérations effectuées par les utilisateurs afin de les analyser et de définir des tendances. Vous pouvez utiliser JSON (JavaScript Object Notation) pour convertir vos résultats sous forme de chaîne, comme dans l’exemple ci-dessous, et d’envoyer celle-ci au serveur à des fins d’analyse :


JSON.stringify(window.performance.timing);

API de chronométrage de la navigation

Le chronométrage de la navigation fournit un ensemble d’objets et de propriétés que vous pouvez utiliser pour mesurer de nombreux aspects de la navigation. Il expose les objets suivants :

ObjetDescription

PerformanceNavigation

Fournit des informations sur l’état de la navigation.

PerformanceTiming

Fournit des informations sur le chronométrage de la navigation.

 

Le chronométrage de navigation expose les propriétés suivantes :

PropriétéDescription

connectEnd

Heure de fin de la connexion au serveur.

connectStart

Heure juste avant le début de la connexion au serveur.

domComplete

Heure juste avant la fin de la disponibilité du document.

domContentLoadedEventEnd

Heure après l’exécution de l’événement DOMContentLoaded.

domContentLoadedEventStart

Heure juste avant l’exécution de l’événement DOMContentLoaded.

domInteractive

Heure juste avant que la disponibilité soit définie sur interactive.

domLoading

Heure juste avant que la disponibilité soit définie sur loading.

domainLookupEnd

Heure après la recherche du nom de domaine.

domainLookupStart

Heure juste avant la recherche du nom de domaine.

fetchStart

Heure de début de la recherche de la ressource.

loadEventEnd

Heure de fin d’exécution de l’événement de chargement « load ».

loadEventStart

Heure juste avant le déclenchement de l’événement de chargement « load ».

navigationStart

Heure après le début du déchargement du document précédent.

redirectCount

Nombre de redirections depuis la dernière non-redirection.

redirectEnd

Heure après la fin de la dernière réponse de redirection.

redirectStart

Heure de recherche qui a initié une redirection.

requestStart

Heure juste avant une demande du serveur.

responseEnd

Heure après la fin d’une réponse ou d’une connexion.

responseStart

Heure juste avant le début d’une réponse.

timing

Référence à un objet de chronométrage des performances.

navigation

Référence à un objet des performances de navigation.

performance

Référence à un objet des performances pour une fenêtre.

type

Type du dernier événement de non redirection de navigation.

unloadEventEnd

Heure après le déchargement du document précédent.

unloadEventStart

Heure juste avant le déclenchement de l’événement de déchargement « unload ».

 

Informations de référence sur les API

PerformanceNavigation
PerformanceTiming

Démonstrations du site Internet Explorer Test Drive

Chronométrage de la navigation

Billets IEBlog

Performances Web W3C : Poursuite des investissements dans les performances
Performances Web : Quand la résolution en milliseconde n’est pas suffisante
Les API Web Performance accèdent rapidement au statut « Candidate Recommendation » du W3C
Revue de l’année : Groupe de travail W3C Web Performance
Vite une norme Web : Le minutage de la navigation W3C atteint le statut « Candidate Recommendation »
Performances des pages Web : conformité aux normes et interopérabilité
Mesure des performances de page Web

Spécification

Chronométrage de la navigation

 

 

Afficher:
© 2016 Microsoft