ThePerformanceResourceTiming 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 anXMLHttpRequest,<SVG>, 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 extendsPerformanceEntry 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 beencodedBodySize)
• Checking if local caches were hit (transferSize should be0)
• 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 theresource buffer sizes of the Resource Timing guide.

Cross-origin timing information

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

The properties which are returned as0 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, andresponseStart.

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

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

Instance properties

Inherited fromPerformanceEntry

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

PerformanceEntry.durationRead only

Returns atimestamp that is the difference between theresponseEnd and thestartTime properties.

PerformanceEntry.entryTypeRead only

Returns"resource".

PerformanceEntry.nameRead only

Returns the resource's URL.

PerformanceEntry.startTimeRead only

Returns thetimestamp for the time a resource fetch started. This value is equivalent toPerformanceResourceTiming.fetchStart.

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.

PerformanceResourceTiming.redirectStartRead only

ADOMHighResTimeStamp that represents the start time of the fetch which initiates the redirect.

PerformanceResourceTiming.redirectEndRead only

ADOMHighResTimeStamp immediately after receiving the last byte of the response of the last redirect.

PerformanceResourceTiming.workerStartRead only

Returns aDOMHighResTimeStamp immediately before dispatching theFetchEvent if a Service Worker thread is already running, or immediately before starting the Service Worker thread if it is not already running. If the resource is not intercepted by a Service Worker the property will always return 0.

PerformanceResourceTiming.fetchStartRead only

ADOMHighResTimeStamp immediately before the browser starts to fetch the resource.

PerformanceResourceTiming.domainLookupStartRead only

ADOMHighResTimeStamp immediately before the browser starts the domain name lookup for the resource.

PerformanceResourceTiming.domainLookupEndRead only

ADOMHighResTimeStamp representing the time immediately after the browser finishes the domain name lookup for the resource.

PerformanceResourceTiming.connectStartRead only

ADOMHighResTimeStamp immediately before the browser starts to establish the connection to the server to retrieve the resource.

PerformanceResourceTiming.secureConnectionStartRead only

ADOMHighResTimeStamp immediately before the browser starts the handshake process to secure the current connection.

PerformanceResourceTiming.connectEndRead only

ADOMHighResTimeStamp immediately after the browser finishes establishing the connection to the server to retrieve the resource.

PerformanceResourceTiming.requestStartRead only

ADOMHighResTimeStamp immediately before the browser starts requesting the resource from the server.

PerformanceResourceTiming.firstInterimResponseStartExperimentalRead only

ADOMHighResTimeStamp that represents the interim response time (for example, 100 Continue or 103 Early Hints).

PerformanceResourceTiming.responseStartRead only

ADOMHighResTimeStamp immediately after the browser receives the first byte of the response from the server (which may be an interim response).

PerformanceResourceTiming.finalResponseHeadersStartExperimentalRead only

ADOMHighResTimeStamp that represents the final headers response time (for example, 200 Success), after any interim response time.

PerformanceResourceTiming.responseEndRead only

ADOMHighResTimeStamp immediately after the browser receives the last byte of the resource or immediately before the transport connection is closed, whichever comes first.

Additional resource information

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

PerformanceResourceTiming.contentTypeRead onlyExperimental

A string representing a minimized and standardized version of the MIME-type of the fetched resource.

PerformanceResourceTiming.decodedBodySizeRead 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.

PerformanceResourceTiming.deliveryTypeExperimentalRead only

Indicates how the resource was delivered — for example from the cache or from a navigational prefetch.

PerformanceResourceTiming.encodedBodySizeRead 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.

PerformanceResourceTiming.initiatorTypeRead only

A string representing the web platform feature that initiated the performance entry.

PerformanceResourceTiming.nextHopProtocolRead only

A string representing the network protocol used to fetch the resource, as identified by theALPN Protocol ID (RFC7301).

PerformanceResourceTiming.renderBlockingStatusRead only

A string representing the render-blocking status. Either"blocking" or"non-blocking".

PerformanceResourceTiming.responseStatusRead only

A number representing the HTTP response status code returned when fetching the resource.

PerformanceResourceTiming.transferSizeRead only

A number representing the size (in octets) of the fetched resource. The size includes the response header fields plus the response payload body.

PerformanceResourceTiming.serverTimingRead only

An array ofPerformanceServerTiming entries containing server timing metrics.

Instance methods

PerformanceResourceTiming.toJSON()

Returns a JSON representation of thePerformanceResourceTiming object.

Examples

Logging resource timing information

Example using aPerformanceObserver, which notifies of newresource performance entries as they are recorded in the browser's performance timeline. Use thebuffered 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 usingPerformance.getEntriesByType(), which only showsresource 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

Browser compatibility

See also

• Resource timing (Overview)