Skip to main content

How to Calculate Each Stage Value Based on Page Timing Metrics

Navigation Timing provides data that can be used to measure a website's performance. Unlike other JavaScript-based mechanisms used for the same purpose, it can provide more useful and accurate end-to-end latency data. You can measure data that was previously difficult to obtain, such as the time to unload the previous page, time spent on domain name resolution, total time spent executing the load (en-US) event handler, and more.

Field Descriptions​

Initialization Phase​

  • navigationStart: The time when the user completes unloading the previous document.
  • redirectStart: The start time of page redirection (if redirection exists) or 0.
  • redirectEnd: If redirection exists, redirectEnd represents the time when the data from the server's response after the last redirection is completely received; otherwise, it is 0.

Request Phase​

  • fetchStart: When the browser initiates a resource request, if there is a cache, it returns the start time of reading the cache.
  • domainLookupStart: The start time of DNS query. If the request does not initiate a DNS request, such as keep-alive, cache, etc., it returns the time point of fetchStart.
  • domainLookupEnd: The end time of DNS query. If no DNS request is initiated, such as keep-alive, cache, etc., it returns the time point of fetchStart.
  • connectStart: The time when the browser begins to connect to the server. If no connection is established, such as keep-alive, cache, etc., its value is equal to domainLookupEnd.
  • secureConnectionStart: If the page uses HTTPS, its value is the moment before the secure connection handshake. If this property is not available, it returns undefined. If this property is available but HTTPS is not used, it returns 0.
  • connectEnd: The moment when the browser completes establishing a connection with the server. If no connection is established, such as keep-alive, cache, etc., its value is equal to domainLookupEnd.
  • responseStart: The moment when the client receives the first byte of data from the server (or cache, local resource) response.
  • responseEnd: The moment when the client receives the last byte of data from the server (or cache, local resource) response.

Parsing and Rendering Phase​

  • domLoading: The browser is about to start parsing the first batch of received HTML document bytes.
  • domInteractive: The time point when the browser completes parsing all HTML and the DOM construction is complete, which is the time point when the DOM is ready.
  • domContentLoaded: The time point when the DOM is ready and no style sheets are blocking JavaScript execution, construction of the render tree can begin, generally representing the time point when both DOM and CSSOM are ready.
  • domComplete: As the name suggests, all processing is complete, and all resources on the webpage (images, etc.) have been downloaded, meaning the loading spinner has stopped spinning, indicating the time point when the webpage and all its sub-resources are ready.
  • loadEventStart: As the last step in loading each webpage, the browser triggers the onload event to trigger additional application logic.
  • loadEventEnd: The onload event execution is complete. Many JavaScript frameworks wait for the onload event to occur before executing their own logic. Therefore, the browser captures the loadEventStart and loadEventEnd timestamps to track the time spent on execution.

Calculation Formulas for Each Phase​

Through the description of each field above, the following formula can be clearly obtained.

  • Redirect: redirectEnd-redirectStart Evaluation Condition: redirectEnd is not 0 and redirectStart is not 0

  • DNS: domainLookupEnd-domainLookupStart evaluated when domainLookupEnd is not 0 and domainLookup Start is not 0

  • TCP: connectEnd-connectStart evaluation condition: connectEnd is not 0 and connectStart is not 0

  • SSL: secureConnectionStart = 0 ? 0 : connectEnd - secureConnectionStart

  • Request: respons eStart-requestStart evaluation condition: respons eStart is not 0 and requestStart is not 0

  • Response: responseEnd-responseStart evaluation condition: responseEnd is not 0 and respons eStart is not 0

  • DomReady: domContentLoaded-fetchStart evaluation condition: domContentLoaded non-zero and fetchStart non-zero

  • DomParse: domContentLoaded-responseEnd

    evaluation condition: domContentLoaded is not 0 and responseEnd is not 0

  • Processing: domComplete-domLoading evaluation condition: domComplete is not 0 and domLoading is not 0

  • ResourceLoad: domComplete-domContentLoaded evaluation condition: domComplete is not 0 and domContentLoaded is not 0

  • TTFB：responseStart - fetchStart

    Evaluation condition: responseStart is not 0 and fetchStart is not 0