Skip to content

W3C Resource Timing API

The W3C Resource Timing API is a web standard interface that provides detailed network timing data for the resources loaded by a document, such as stylesheets, scripts, and images^[600-developer__tools__front-end-performance-monitoring.md]. It extends the capabilities of the window.performance object, specifically focusing on the granular measurement of resource loading phases^[600-developer__tools__front-end-performance-monitoring.md].

This API allows developers to collect precise Metrics on the duration of various network operations, which is essential for in-depth performance analysis and optimization^[600-developer__tools__front-end-performance-monitoring.md].

Key Metrics

The API exposes several distinct timestamps that allow for the calculation of specific duration costs involved in loading a resource^[600-developer__tools__front-end-performance-monitoring.md]. Common Metrics derived from these timestamps include:

  • DNS Query Time: The time taken to resolve the domain name^[600-developer__tools__front-end-performance-monitoring.md].
  • TCP Connection Time: The time taken to establish a TCP connection to the server^[600-developer__tools__front-end-performance-monitoring.md].
  • Request Time: The time elapsed from the start of the request to the beginning of the response^[600-developer__tools__front-end-performance-monitoring.md].
  • Response Time: The time taken to download the response content^[600-developer__tools__front-end-performance-monitoring.md].

Additionally, when analyzing the overall document lifecycle, this timing data is often used alongside [[Navigation Timing]] attributes to calculate Metrics like: * Total Network Time: The duration from the start of navigation until the resource download is complete^[600-developer__tools__front-end-performance-monitoring.md]. * Processing Time: The time spent rendering or processing the DOM^[600-developer__tools__front-end-performance-monitoring.md]. * Time to Interactive: The timestamp when the user can first interact with the page^[600-developer__tools__front-end-performance-monitoring.md].

Data Access and Calculation

To utilize the Resource Timing API, developers typically access the performance.timing interface^[600-developer__tools__front-end-performance-monitoring.md].

Accurate calculation often requires that the page be fully loaded; therefore, it is standard practice to execute performance monitoring scripts within the window.onload event^[600-developer__tools__front-end-performance-monitoring.md]. This ensures that timing attributes which are only populated after the load event completes are available for calculation^[600-developer__tools__front-end-performance-monitoring.md].

Data gathered via this API is frequently structured into formats like JSON for ingestion by analytics platforms such as Elasticsearch or visualization tools like Kibana^[600-developer__tools__front-end-performance-monitoring.md].

Sources

^[600-developer__tools__front-end-performance-monitoring.md]