Skip to content

window.performance API

window.performance is a browser API that provides access to performance-related information for the current document^[600-developer__tools__front-end-performance-monitoring.md]. It serves as the primary interface for gathering Metrics regarding page load times, network latency, and resource rendering, enabling the creation of Frontend Performance Monitoring tools^[600-developer__tools__front-end-performance-monitoring.md].

Key Interfaces

The window.performance object encompasses several specific sub-interfaces, each focusing on different aspects of the browser's lifecycle^[600-developer__tools__front-end-performance-monitoring.md]:

  • performance.memory: Provides access to memory usage information (Note: support is primarily specific to certain browsers like Chrome).
  • performance.navigation: Contains attributes describing the navigation type (e.g., whether the page was loaded via a link, reload, or history traversal) and the number of redirects.
  • performance.timing: The most commonly used interface, it contains a complete timeline of the browser's performance Metrics, from the initial navigation start to the completion of the load event.

Calculating Performance Metrics

To analyze web performance, developers calculate the duration of specific phases by subtracting startTime attributes from endTime attributes found in the performance.timing object^[600-developer__tools__front-end-performance-monitoring.md].

It is recommended to access these APIs only after the page has fully loaded, typically within the window.onload event, as many values are not available until loading completes^[600-developer__tools__front-end-performance-monitoring.md].

Common Metrics

Based on the W3C Navigation Timing specification, the following calculations are standard for evaluating different stages of the request lifecycle^[600-developer__tools__front-end-performance-monitoring.md]:

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

Detailed Metrics

More granular calculations allow for the inspection of specific bottlenecks, such as redirects, caching, and network latency^[600-developer__tools__front-end-performance-monitoring.md]:

  • Redirects: timing.redirectEnd - timing.redirectStart
  • App Cache: Math.max(timing.domainLookupStart - timing.fetchStart, 0)
  • Network Latency (T0): timing.responseStart - timing.navigationStart
  • First Content (T1): timing.domLoading - timing.navigationStart
  • Total Time: timing.loadEventEnd - timing.navigationStart

Data Usage and Monitoring

The data extracted from window.performance can be formatted into JSON^[600-developer__tools__front-end-performance-monitoring.md]. This structured data is frequently used in observability pipelines, such as sending Metrics directly to Elasticsearch or passing them through middleware for visualization and statistical analysis in tools like Kibana^[600-developer__tools__front-end-performance-monitoring.md].

  • [[W3C Resource Timing]]
  • [[Chrome DevTools]]
  • [[Performance Metrics]]

Sources

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