Firefox Tomorrow

web api interface

PerformanceResourceTiming

View on MDN ↗

Available in workers

The PerformanceResourceTiming interface enables retrieval and analysis of detailed network timing data regarding the loading of an application’s resources. An application can use the timing metrics to determine, for example, the length of time it takes to fetch a specific resource, such as an XMLHttpRequest, <SVG element>, image, or script.

Description

The interface’s properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, fetch start, DNS lookup start and end times, response start and end times, and more. Additionally, the interface extends PerformanceEntry with other properties which provide data about the size of the fetched resource as well as the type of resource that initiated the fetch.

Typical resource timing metrics

The properties of this interface allow you to calculate certain resource timing metrics. Common use cases include:

  • Measuring TCP handshake time (connectEnd - connectStart)
  • Measuring DNS lookup time (domainLookupEnd - domainLookupStart)
  • Measuring redirection time (redirectEnd - redirectStart)
  • Measuring interim request time (firstInterimResponseStart - finalResponseHeadersStart)
  • Measuring request time (responseStart - requestStart)
  • Measuring document request time (finalResponseHeadersStart - requestStart)
  • Measuring TLS negotiation time (requestStart - secureConnectionStart)
  • Measuring time to fetch (without redirects) (responseEnd - fetchStart)
  • Measuring ServiceWorker processing time (fetchStart - workerStart)
  • Checking if content was compressed (decodedBodySize should not be encodedBodySize)
  • Checking if local caches were hit (transferSize should be 0)
  • Checking if modern and fast protocols are used (nextHopProtocol should be HTTP/2 or HTTP/3)
  • Checking if the correct resources are render-blocking (renderBlockingStatus)

Managing resource buffer sizes

By default only 250 resource timing entries are buffered. For more information see the resource buffer sizes of the Resource Timing guide.

Cross-origin timing information

Many of the resource timing properties are restricted to return 0 or an empty string when the resource is a cross-origin request. To expose cross-origin timing information, the Timing-Allow-Origin HTTP response header needs to be set.

The properties which are returned as 0 by default when loading a resource from an origin other than the one of the web page itself: redirectStart, redirectEnd, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart, and responseStart.

For example, to allow https://developer.mozilla.org to see resource timing information, the cross-origin resource should send:

Timing-Allow-Origin: https://developer.mozilla.org

Instance properties

Inherited from PerformanceEntry

This interface extends the following PerformanceEntry properties for resource performance entry types by qualifying and constraining them as follows:

Timestamps

The interface supports the following timestamp properties which you can see in the diagram and are listed in the order in which they are recorded for the fetching of a resource. An alphabetical listing is shown in the navigation, at left.

Timestamp diagram listing timestamps in the order in which they are recorded for the fetching of a resource

Additional resource information

Additionally, this interface exposes the following properties containing more information about a resource:

  • contentType Read only
    • : A string representing a minimized and standardized version of the MIME-type of the fetched resource.
  • decodedBodySize Read only
    • : A number that is the size (in octets) received from the fetch (HTTP or cache) of the message body, after removing any applied content encoding.
  • deliveryType Read only
    • : Indicates how the resource was delivered — for example from the cache or from a navigational prefetch.
  • encodedBodySize Read only
    • : A number representing the size (in octets) received from the fetch (HTTP or cache), of the payload body, before removing any applied content encodings.
  • initiatorType Read only
    • : A string representing the web platform feature that initiated the performance entry.
  • nextHopProtocol Read only
  • renderBlockingStatus Read only
    • : A string representing the render-blocking status. Either "blocking" or "non-blocking".
  • responseStatus Read only
    • : A number representing the HTTP response status code returned when fetching the resource.
  • transferSize Read only
    • : A number representing the size (in octets) of the fetched resource. The size includes the response header fields plus the response payload body.
  • serverTiming Read only

Instance methods

  • toJSON()
    • : Returns a JSON representation of the PerformanceResourceTiming object.

Examples

Logging resource timing information

Example using a PerformanceObserver, which notifies of new resource performance entries as they are recorded in the browser’s performance timeline. Use the buffered option to access entries from before the observer creation.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
  });
});

observer.observe({ type: "resource", buffered: true });

Example using getEntriesByType(), which only shows resource performance entries present in the browser’s performance timeline at the time you call this method:

const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  console.log(entry);
});

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also