Navigation Timing API performance calculations¶

Navigation Timing API performance calculations involve using the window.performance.timing interface to measure the duration of various phases of the page load lifecycle. These Metrics allow developers to quantify the time spent on network latency, server processing, and browser rendering.^[600-developer__tools__front-end-performance-monitoring.md]

To ensure accuracy, these calculations should typically be executed within the window.onload event, as certain timing values are only finalized after the page has completely loaded.^[600-developer__tools__front-end-performance-monitoring.md]

Key Metrics and Formulas¶

The following calculations can be derived by subtracting specific timestamps from the PerformanceTiming object.

Network and Connection¶

• DNS Query Time: Calculates the duration of the DNS lookup.
  • domainLookupEnd - domainLookupStart^[600-developer__tools__front-end-performance-monitoring.md]
• TCP Connection Time: Measures the time taken to establish a TCP connection.
  • connectEnd - connectStart^[600-developer__tools__front-end-performance-monitoring.md]
• Request Duration: Measures the time spent waiting for the initial response (excluding download time).
  • responseEnd - responseStart^[600-developer__tools__front-end-performance-monitoring.md]
• App Cache Time:
  • Math.max(domainLookupStart - fetchStart, 0)^[600-developer__tools__front-end-performance-monitoring.md]

Rendering and Processing¶

• DOM Parsing Time: The time taken to parse the DOM tree.
  • domComplete - domInteractive^[600-developer__tools__front-end-performance-monitoring.md]
• White Screen Time: The time until the first paint (before DOM loading starts).
  • domLoading - fetchStart^[600-developer__tools__front-end-performance-monitoring.md]
• DOM Ready Time: The time until the DOMContentLoaded event fires.
  • domContentLoadedEventEnd - fetchStart^[600-developer__tools__front-end-performance-monitoring.md]

Overall Timings¶

• Onload Time: The total time until the load event fires.
  • loadEventEnd - fetchStart^[600-developer__tools__front-end-performance-monitoring.md]
• Total Load Time: The complete time from navigation start to load event end.
  • loadEventEnd - navigationStart^[600-developer__tools__front-end-performance-monitoring.md]
• Interactive Time: Time until the DOM is interactive.
  • domInteractive - navigationStart^[600-developer__tools__front-end-performance-monitoring.md]

Related Concepts¶

• Window Performance API
• Front-End Performance Monitoring
• [[W3C Resource Timing]]

Sources¶

• 600-developer__tools__front-end-performance-monitoring.md