Skip to content

Performance Metrics Calculation

Performance Metrics Calculation involves using the browser's window.performance API, specifically the PerformanceTiming interface, to quantify the speed and efficiency of a web page load process.^[600-developer__tools__front-end-performance-monitoring.md] By analyzing the timestamps recorded at various stages of the navigation lifecycle, developers can identify bottlenecks in the network, server response, or rendering pipeline.

Calculation Formulas

The following formulas are derived from the window.performance.timing interface to calculate specific durations.^[600-developer__tools__front-end-performance-monitoring.md] These calculations should typically be executed after the page has fully loaded, such as within the window.onload event, to ensure all necessary timestamp data is available.^[600-developer__tools__front-end-performance-monitoring.md]

Network and Connection Metrics

  • 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 Duration: responseEnd - responseStart^[600-developer__tools__front-end-performance-monitoring.md]
  • Total Network Time: Measures the duration from the start of the navigation to the completion of the response download.
    • Formula: responseEnd - navigationStart^[600-developer__tools__front-end-performance-monitoring.md]

Rendering and Processing Metrics

  • DOM Parsing Time: Measures the time taken to parse the DOM tree.
    • Formula: domComplete - domInteractive^[600-developer__tools__front-end-performance-monitoring.md]
  • White Screen Time: The time elapsed before the user sees any visual content.
    • Formula: domLoading - fetchStart^[600-developer__tools__front-end-performance-monitoring.md]
  • DOM Ready Time: The time until the DOM is fully loaded and parsed.
    • Formula: domContentLoadedEventEnd - fetchStart^[600-developer__tools__front-end-performance-monitoring.md]
  • Onload Time: The total time until the load event is fired.
    • Formula: loadEventEnd - fetchStart^[600-developer__tools__front-end-performance-monitoring.md]

Detailed Breakdown (T0, T1, T3)

Specific milestones in the loading process can be calculated relative to navigationStart:

  • T0 (Request Response): Time to initial response.
    • Formula: responseStart - navigationStart^[600-developer__tools__front-end-performance-monitoring.md]
  • T1 (First Paint / Content): Time when DOM loading begins.
    • Formula: domLoading - navigationStart^[600-developer__tools__front-end-performance-monitoring.md]
  • T3 (Load Complete): Time when the load event ends.
    • Formula: loadEventEnd - navigationStart^[600-developer__tools__front-end-performance-monitoring.md]

Implementation Notes

  • Redirection: Redirect time is calculated as timing.redirectEnd - timing.redirectStart, and the count of redirects is available via navigation.redirectCount.^[600-developer__tools__front-end-performance-monitoring.md]
  • App Cache: Application cache time can be derived by calculating the difference between the domain lookup start and the initial fetch start.^[600-developer__tools__front-end-performance-monitoring.md]
  • Total Duration: The overall time spent is calculated from the start of navigation to the end of the load event or DOM completion.^[600-developer__tools__front-end-performance-monitoring.md]

Sources