Navigationstiming

Navigationstiming erleichtert das Messen der tatsächlichen Geschwindigkeit und der Leistung von Websites sowie das Auffinden von Problembereichen mit Optimierungsbedarf. Navigationstiming kann beispielsweise beim Auffinden von Problemen mit der Wartezeit helfen, da sie damit die Navigation des Kunden auf der Webseite präzise überwachen und den zeitlichen Ablauf der Benutzeraktivitäten nachverfolgen können. Sie können Leistungsengpässe einfacher erkennen und effektive Lösungen finden, um die Wartezeit zu reduzieren und die Geschwindigkeit und Effizienz der Website zu verbessern. Das alte System der Leistungsmessung konnte die Wartezeit nicht vollständig abbilden, wie es das Navigationstiming ermöglicht.

Windows Internet Explorer 9 und Internet Explorer 10 unterstützen die Navigation Timing API, wie in den W3C Web Performance Working Group-Spezifikationen für Navigation Timing definiert.

Messen des Navigationstimings

Es gibt verschiedene Möglichkeiten, das Navigationstiming zu messen. Im Folgenden werden drei Möglichkeiten beschrieben.

Messen des Anzeigenstarts

Das folgende Skript berechnet die Ende-zu-Ende-Latenz auf der Seite des Clients der zuletzt durchgeführten Seitennavigation.


<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>


Mit dem JavaScript-Abschnitt in der Kopfzeile wird ein Ereignishandler für das Load-Ereignis eingerichtet. Wenn der Browser das Load-Ereignis auslöst, wird die loadTime-Funktion aufgerufen. Die loadTime-Funktion ruft zunächst mithilfe der JavaScript-Methode getTime die aktuelle Uhrzeit ab. Als Nächstes gibt die performance.timing.navigationStart-Methode die Uhrzeit zurück, direkt nachdem der Benutzer das Auffordern zum Entladen des vorherigen Dokuments abschließt. Die Differenz zwischen diesen beiden Zeitstempeln ist die vom Benutzer wahrgenommene Ende-zu-Ende-Latenz beim Laden von Seiten. Diese Differenz wird in der Konsole angezeigt, wenn F12-Tools ausgeführt werden.

Messen der unterschiedlichen Zeiten der Navigationssubsysteme

Eine typische Seitennavigation durchläuft mehrere Phasen, bevor die Seiten dem Benutzer angezeigt wird. Mithilfe des Navigationstimings können Sie diese Subsysteme getrennt voneinander messen und so Engpässe leichter aufspüren. Mit dem folgenden Code wird die Zeit gemessen, die zum Herstellen einer Verbindung benötigt wird.


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);
  }
}

Dieser JavaScript-Code verwendet die performancetiming-API, um die Anfangs- und Endzeiten einer Verbindung zu messen, und das navigation-Objekt, um zu ermitteln, ob es sich um eine Seitennavigation handelt. Das Skript überprüft, ob die Eigenschaften connectStart und connectEnd beide größer als null sind, um zwischen einer neuen oder zwischengespeicherten Ressource zu unterscheiden. Dann wird connectStart von connectEnd subtrahiert, um die Verbindungszeit zu ermitteln. Schließlich wird überprüft, ob der Navigationstyp durch eine Benutzeranforderung generiert wurde. Die Differenz wird in der Konsole angezeigt, wenn F12-Tools ausgeführt werden. Diese Differenz ist die Zeit, die benötigt wurde, um zum Laden der Ressource eine Verbindung mit dem Server herzustellen.

Verwenden von JSON

Mithilfe des Navigationstimings können Sie nicht nur Ihre Seiten testen, sondern auch Daten aus den Erfahrungen Ihrer Benutzer erfassen und im Hinblick auf Trends analysieren. Mithilfe von JSON (JavaScript Object Notation) können Sie Ihre Ergebnisse wie im folgenden Beispiel in Textform bringen und zur Analyse an den Server senden:


JSON.stringify(window.performance.timing);

Navigationstiming-API

Das Navigationstiming stellt Objekte und Eigenschaften bereit, mit deren Hilfe Sie zahlreiche Aspekte der Seitennavigation messen können. Es stellt folgende Objekte bereit:

ObjektBeschreibung

PerformanceNavigation

Gibt Informationen zum Navigationsstatus an.

PerformanceTiming

Gibt Informationen zum Navigationstiming an.

 

Das Navigationstiming gibt folgende Eigenschaften an:

EigenschaftBeschreibung

connectEnd

Uhrzeit, zu der die Verbindung hergestellt ist

connectStart

Uhrzeit kurz vor Beginn der Serververbindung

domComplete

Uhrzeit kurz vor Herstellung der Dokumentbereitschaft

domContentLoadedEventEnd

Uhrzeit nach Abschluss des DOMContentLoaded-Ereignisses

domContentLoadedEventStart

Uhrzeit kurz vor Beginn von DOMContentLoaded

domInteractive

Uhrzeit, kurz bevor die Bereitschaft auf interactive festgelegt wird

domLoading

Uhrzeit, kurz bevor die Bereitschaft auf loading festgelegt wird

domainLookupEnd

Uhrzeit nach Abfrage des Domänennamens

domainLookupStart

Uhrzeit kurz vor Abfrage des Domänennamens

fetchStart

Uhrzeit, zu der der Abruf der Ressource beginnt

loadEventEnd

Uhrzeit, zu der das Load-Ereignis abgeschlossen ist

loadEventStart

Uhrzeit kurz vor dem Auslösen des Load-Ereignisses

navigationStart

Uhrzeit, nach der das Entladen des vorherigen Dokuments begonnen wird

redirectCount

Anzahl der Umleitungen seit der letzten Nicht-Umleitung

redirectEnd

Uhrzeit, nach der die letzte Umleitungsantwort endet

redirectStart

Uhrzeit des Abrufs, der eine Umleitung initiiert hat

requestStart

Uhrzeit kurz vor einer Serveranforderung

responseEnd

Uhrzeit nach dem Ende einer Antwort oder Verbindung

responseStart

Uhrzeit kurz vor dem Start einer Antwort

timing

Verweis auf ein Leistungstimingobjekt

navigation

Verweis auf ein Leistungsnavigationsobjekt

performance

Verweis auf ein Leistungsobjekt für ein Fenster

type

Typ des letzten Nicht-Umleitungsnavigationsereignisses

unloadEventEnd

Uhrzeit, nach der das vorherige Dokument entladen ist

unloadEventStart

Uhrzeit kurz vor dem Auslösen des Unload-Ereignisses

 

API-Referenz

PerformanceNavigation
PerformanceTiming

Demos für die Internet Explorer-Testversion

Navigationstiming

IEBlog-Beiträge

W3C-Webleistung: Weitere Investitionen in die Leistung
Webleistung: Wenn selbst eine Millisekundenauflösung nicht ausreicht
Webleistungs-APIs wurden schnell zu W3C-Empfehlungskandidaten
Das Jahr im Rückblick: W3C-Arbeitsgruppe "Web Performance"
Schneller Aufstieg zum Webstandard: W3C-Navigationstiming erreicht Empfehlungskandidatenstatus
Webseitenleistung auf eine standardkonforme und interoperable Methode
Messen der Webseitenleistung

Spezifikation

Navigationstiming

 

 

Anzeigen: