Skip to content

Resource Timing API

The Resource Timing API is a web standard that provides detailed network timing data for resources loaded by a page^[600-developer-tools-front-end-performance-monitoring.md]. It is part of the broader [[Performance API]] and allows developers to analyze the performance characteristics of individual resources^[600-developer-tools-front-end-performance-monitoring.md].

Core Object

The API is primarily accessed through the window.performance interface^[600-developer-tools-front-end-performance-monitoring.md].

Performance Metrics

The API provides access to various timestamps and attributes defined in the PerformanceNavigationTiming interface^[600-developer-tools-front-end-performance-monitoring.md]. Using these attributes, developers can calculate specific performance metrics^[600-developer-tools-front-end-performance-monitoring.md]:

  • DNS Query Time: Calculated as domainLookupEnd - domainLookupStart.
  • TCP Connection Time: Calculated as connectEnd - connectStart.
  • Request Duration: Calculated as responseEnd - responseStart.
  • DOM Parsing Time: Calculated as domComplete - domInteractive.
  • White Screen Time: Calculated as domLoading - fetchStart.
  • DOM Ready Time: Calculated as domContentLoadedEventEnd - fetchStart.
  • Onload Time: Calculated as loadEventEnd - fetchStart.

More granular calculations can also be performed for specific lifecycle phases, such as redirections (redirectEnd - redirectStart), app cache usage, total network interaction time, and rendering processing times^[600-developer-tools-front-end-performance-monitoring.md].

Usage

To accurately compute performance values, the API typically requires that the page be fully loaded^[600-developer-tools-front-end-performance-monitoring.md]. A common approach is to read the necessary data within the window.onload event, as many attributes rely on the completion of the page loading process^[600-developer-tools-front-end-performance-monitoring.md].

Sources

^[600-developer-tools-front-end-performance-monitoring.md]

  • [[window.performance]]
  • [[Performance API]]