Qu'est-ce que l'API Navigation Timing ?

Qu'est-ce que l'API Navigation Timing ?

L'API Navigation Timing est une interface du navigateur qui indique la durée de chaque étape du chargement d'une page : redirections, connexion, requête, réponse, traitement du DOM et événement load. On la lit aujourd'hui via une entrée PerformanceNavigationTiming. L'ancien objet performance.timing est obsolète et MDN conseille de l'éviter dans les nouveaux projets.

Comment ça fonctionne

Le navigateur crée une entrée de navigation pour le document courant, dans la Performance Timeline et plus largement la Web Performance API. Lecture :

const [nav] = performance.getEntriesByType('navigation');

Toutes les valeurs sont en millisecondes relatives au début de la navigation : startTime vaut toujours 0. Propriétés utiles, selon MDN :

• domInteractive : juste avant que le document passe à interactive.
• domContentLoadedEventStart et domContentLoadedEventEnd : les gestionnaires de DOMContentLoaded.
• domComplete, loadEventStart, loadEventEnd : document terminé et gestionnaires de load. duration vaut loadEventEnd moins startTime.
• type : navigate, reload ou back_forward.
• redirectCount : redirections depuis la dernière navigation sans redirection.

L'entrée hérite aussi des phases réseau de PerformanceResourceTiming, comme le DNS, la connexion et responseStart.

Exemple : décomposer rapidement un chargement

Sur une page lente, exécutez la ligne ci-dessus dans la console. Si responseStart est élevé, l'attente vient du réseau ou du serveur : regardez le temps jusqu'au premier octet (TTFB) et l'en-tête Server-Timing. Si responseStart est faible mais domContentLoadedEventEnd tardif, le navigateur est occupé à analyser ou exécuter des scripts : regardez votre JavaScript.

Erreurs fréquentes

• Utiliser l'obsolète performance.timing dans du code neuf.
• Lire loadEventEnd trop tôt : il reste à 0 tant que les gestionnaires de load ne sont pas terminés, lisez-le après l'événement load.
• Attendre que les changements de route d'une application monopage apparaissent : il y a une entrée par document, pas par route.
• Raisonner sur des moyennes plutôt que sur des percentiles issus de nombreuses visites.
• Prendre un seul test de laboratoire pour la vérité de tous les utilisateurs.

Navigation Timing dans les tests et la supervision

C'est la matière première de la surveillance des utilisateurs réels : un petit script lit l'entrée et l'envoie à votre backend. En complément en laboratoire, la surveillance de la vitesse de page de LoadFocus lance des audits Lighthouse planifiés depuis 25 régions cloud et vous alerte quand une page ralentit ; le vérificateur Core Web Vitals gratuit affiche les données d'utilisateurs réels d'une URL. Voir aussi notre guide (en anglais) pour surveiller les Core Web Vitals avec alertes et rapports. Détails de la spécification : PerformanceNavigationTiming sur MDN.

Questions fréquentes

performance.timing est-il obsolète ?

Oui. MDN le marque comme obsolète et remplacé par PerformanceNavigationTiming. Utilisez performance.getEntriesByType('navigation').

Comment obtenir le temps de chargement de la page ?

Lisez l'entrée de navigation après l'événement load. Sa duration vaut loadEventEnd moins startTime, qui est 0.

Navigation Timing mesure-t-il les Core Web Vitals ?

Non. Il fournit des jalons de navigation comme DOMContentLoaded et load. LCP et CLS viennent d'autres entrées de performance.

Fonctionne-t-il dans tous les navigateurs ?

PerformanceNavigationTiming est indiqué comme largement disponible sur MDN et fonctionne dans tous les navigateurs depuis octobre 2021.