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​

Based on the explanations of each field above, the following formulas can be clearly derived.

  • Redirect: redirectEnd - redirectStart Calculation condition: redirectEnd is non-zero and redirectStart is non-zero

  • DNS: domainLookupEnd - domainLookupStart Calculation condition: domainLookupEnd is non-zero and domainLookupStart is non-zero

  • TCP: connectEnd - connectStart Calculation condition: connectEnd is non-zero and connectStart is non-zero

  • SSL: connectEnd - secureConnectionStart Calculation condition: connectEnd is non-zero and secureConnectionStart is non-zero

  • Request: responseStart - requestStart Calculation condition: responseStart is non-zero and requestStart is non-zero

  • Response: responseEnd - responseStart Calculation condition: responseEnd is non-zero and responseStart is non-zero

  • Load: loadEventEnd - navigationStart Calculation condition: loadEventEnd is non-zero and navigationStart is non-zero The total time for the page to fully load, which is the time from the NavigationStart event to the LoadEventEnd event

  • DomReady: domContentLoaded - fetchStart Calculation condition: domContentLoaded is non-zero and fetchStart is non-zero

  • DomParse: domInteractive - responseEnd Calculation condition: domInteractive is non-zero and responseEnd is non-zero

  • Processing: domComplete - domLoading Calculation condition: domComplete is non-zero and domLoading is non-zero

  • resourceLoad: loadEventStart - domContentLoaded Calculation condition: loadEventStart is non-zero and domContentLoaded is non-zero

  • TTFB: responseStart - navigationStart

    The total time from sending the page request to receiving the first byte of response data, which includes DNS resolution time, TCP connection time, HTTP request sending time, and time to receive the first byte of the response message. Calculation condition: responseStart is non-zero and navigationStart is non-zero

    Note: The starting point is chosen as navigationStart to maintain consistency with the web-vitals specification.