Was ist die Navigation Timing API?

Was ist die Navigation Timing API?

Die Navigation Timing API ist eine Browser-Schnittstelle, die meldet, wie lange jede Phase beim Laden einer Seite gedauert hat: Weiterleitungen, Verbindungsaufbau, Anfrage, Antwort, DOM-Verarbeitung und das Load-Ereignis. Heute liest man sie über einen PerformanceNavigationTiming-Eintrag. Das ältere Objekt performance.timing ist veraltet, MDN rät, es in neuen Projekten zu vermeiden.

So funktioniert es

Der Browser legt für das aktuelle Dokument einen Navigationseintrag an, als Teil der Performance Timeline und der übergeordneten Web Performance API. Lesen Sie ihn so aus:

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

Alle Werte sind Millisekunden relativ zum Start der Navigation, startTime ist also immer 0. Nützliche Eigenschaften laut MDN:

• domInteractive: kurz bevor das Dokument interactive wird.
• domContentLoadedEventStart und domContentLoadedEventEnd: die DOMContentLoaded-Handler.
• domComplete, loadEventStart, loadEventEnd: Dokument fertig und load-Handler. duration ist loadEventEnd minus startTime.
• type: navigate, reload oder back_forward.
• redirectCount: Weiterleitungen seit der letzten Navigation ohne Weiterleitung.

Der Eintrag erbt außerdem die Netzwerkphasen von PerformanceResourceTiming, etwa DNS, Verbindung und responseStart.

Beispiel: schnelle Aufschlüsselung der Ladezeit

Führen Sie auf einer langsamen Seite die obige Zeile in der Browser-Konsole aus. Ist responseStart groß, liegt die Wartezeit im Netzwerk oder auf dem Server: Schauen Sie auf die Time to First Byte (TTFB) und den Server-Timing-Header. Ist responseStart klein, aber domContentLoadedEventEnd spät, ist der Browser mit Parsen oder Skripten beschäftigt, also lohnt der Blick auf Ihr JavaScript.

Häufige Fehler

• Das veraltete performance.timing in neuem Code verwenden.
• loadEventEnd zu früh lesen. Der Wert bleibt 0, bis die Load-Handler fertig sind, lesen Sie ihn also nach dem load-Ereignis.
• Erwarten, dass Routenwechsel in Single-Page-Apps auftauchen. Es gibt einen Navigationseintrag pro Dokument, nicht pro Route.
• Mittelwerte als Performance verkaufen. Betrachten Sie Perzentile über viele Besuche.
• Einen einzelnen Labortest für alle Nutzer halten.

Navigation Timing bei Tests und Monitoring

Navigation Timing ist das Rohmaterial für Real User Monitoring: Ein kleines Skript liest den Eintrag und sendet ihn an Ihr Backend, sodass Sie sehen, was echte Besucher erlebt haben. Für die kontrollierte Sicht gibt es Labortools: Die Seitengeschwindigkeits-Überwachung von LoadFocus führt geplante Lighthouse-Audits aus 25 Cloud-Regionen aus und alarmiert, wenn eine Seite langsamer wird; der kostenlose Core-Web-Vitals-Checker zeigt Echtnutzerdaten für eine URL. Mehr dazu in unserem Beitrag über Core Web Vitals überwachen mit Alarmen und Berichten (auf Englisch). Die Spezifikationsdetails stehen in PerformanceNavigationTiming bei MDN.

Häufige Fragen

Ist performance.timing veraltet?

Ja. MDN markiert es als veraltet und durch PerformanceNavigationTiming ersetzt. Nutzen Sie stattdessen performance.getEntriesByType('navigation').

Wie erhalte ich die Seitenladezeit?

Lesen Sie den Navigationseintrag nach dem Load-Ereignis. Seine duration ist loadEventEnd minus startTime, das 0 ist.

Misst Navigation Timing die Core Web Vitals?

Nein. Es liefert Navigationsmarken wie DOMContentLoaded und Load. Metriken wie LCP und CLS stammen aus anderen Performance-Einträgen.

Funktioniert es in allen Browsern?

PerformanceNavigationTiming gilt bei MDN als weit verfügbar und funktioniert seit Oktober 2021 browserübergreifend.