Skip to content

Navigation Timing API

The Navigation Timing API is a W3C standard interface that provides detailed timing information regarding the lifecycle of a page navigation^[600-developer-tools-front-end-performance-monitoring.md]. It exposes granular metrics for network latency, request processing, and browser rendering stages via the window.performance object^[600-developer-tools-front-end-performance-monitoring.md].

Core Interfaces

The API is primarily accessed through the window.performance object^[600-developer-tools-front-end-performance-monitoring.md]. This object contains several properties, with window.performance.timing being the most significant for navigation metrics^[600-developer-tools-front-end-performance-monitoring.md].

  • window.performance.timing: A PerformanceTiming object containing DOMHighResTimestamps for various events in the page load process^[600-developer-tools-front-end-performance-monitoring.md].
  • window.performance.navigation: An object that provides information about the navigation type and the number of redirects^[600-developer-tools-front-end-performance-monitoring.md].

Key Metrics and Calculations

Performance metrics are calculated by determining the difference between specific timestamps recorded in the timing object^[600-developer-tools-front-end-performance-monitoring.md].

Network Latency

These metrics measure the time spent establishing the connection to the server^[600-developer-tools-front-end-performance-monitoring.md]:

  • DNS Query Time: domainLookupEnd - domainLookupStart^[600-developer-tools-front-end-performance-monitoring.md]
  • TCP Connection Time: connectEnd - connectStart^[600-developer-tools-front-end-performance-monitoring.md]
  • Request Response Time: responseEnd - responseStart^[600-developer-tools-front-end-performance-monitoring.md]

DOM Processing and Rendering

These metrics focus on browser-side performance and the user's visual experience^[600-developer-tools-front-end-performance-monitoring.md]:

  • DOM Parsing Time: domComplete - domInteractive^[600-developer-tools-front-end-performance-monitoring.md]
  • White Screen Time: domLoading - fetchStart^[600-developer-tools-front-end-performance-monitoring.md]
  • DOM Ready Time: domContentLoadedEventEnd - fetchStart^[600-developer-tools-front-end-performance-monitoring.md]

Total Load Times

These metrics represent the overall duration of the loading process^[600-developer-tools-front-end-performance-monitoring.md]:

  • Onload Time: loadEventEnd - fetchStart^[600-developer-tools-front-end-performance-monitoring.md]
  • Total Duration: (timing.loadEventEnd || timing.loadEventStart || timing.domComplete || timing.domLoading) - timing.navigationStart^[600-developer-tools-front-end-performance-monitoring.md]

Usage Considerations

The Navigation Timing API requires the page load process to complete before certain values become available^[600-developer-tools-front-end-performance-monitoring.md]. Consequently, it is recommended to access the timing data within the window.onload event handler^[600-developer-tools-front-end-performance-monitoring.md]. This ensures that timestamps such as loadEventEnd have been populated^[600-developer-tools-front-end-performance-monitoring.md].

Additionally, metrics that rely on server response times may be affected by caching; specifically, calculations for request duration should account for the possibility that resources are served from cache^[600-developer-tools-front-end-performance-monitoring.md].

Sources

  • 600-developer-tools-front-end-performance-monitoring.md