Note: This feature is available in Web 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>, image, or script.
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.
The properties of this interface allow you to calculate certain resource timing metrics. Common use cases include:
connectEnd - connectStart)domainLookupEnd - domainLookupStart)redirectEnd - redirectStart)firstInterimResponseStart - finalResponseHeadersStart)responseStart - requestStart)finalResponseHeadersStart - requestStart)requestStart - secureConnectionStart)responseEnd - fetchStart)fetchStart - workerStart)decodedBodySize should not be encodedBodySize)transferSize should be 0)nextHopProtocol should be HTTP/2 or HTTP/3)renderBlockingStatus)By default only 250 resource timing entries are buffered. For more information see the resource buffer sizes of the Resource Timing guide.
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.orgPerformanceEntryThis interface extends the following PerformanceEntry properties for resource performance entry types by qualifying and constraining them as follows:
PerformanceEntry.duration Read onlyReturns a timestamp that is the difference between the responseEnd and the startTime properties.
PerformanceEntry.entryType Read onlyReturns "resource".
PerformanceEntry.name Read onlyReturns the resource's URL.
PerformanceEntry.startTime Read onlyReturns the timestamp for the time a resource fetch started. This value is equivalent to PerformanceResourceTiming.fetchStart.
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.redirectStart Read onlyA DOMHighResTimeStamp that represents the start time of the fetch which initiates the redirect.
PerformanceResourceTiming.redirectEnd Read onlyA DOMHighResTimeStamp immediately after receiving the last byte of the response of the last redirect.
PerformanceResourceTiming.workerStart Read onlyReturns a DOMHighResTimeStamp immediately before dispatching the FetchEvent 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.fetchStart Read onlyA DOMHighResTimeStamp immediately before the browser starts to fetch the resource.
PerformanceResourceTiming.domainLookupStart Read onlyA DOMHighResTimeStamp immediately before the browser starts the domain name lookup for the resource.
PerformanceResourceTiming.domainLookupEnd Read onlyA DOMHighResTimeStamp representing the time immediately after the browser finishes the domain name lookup for the resource.
PerformanceResourceTiming.connectStart Read onlyA DOMHighResTimeStamp immediately before the browser starts to establish the connection to the server to retrieve the resource.
PerformanceResourceTiming.secureConnectionStart Read onlyA DOMHighResTimeStamp immediately before the browser starts the handshake process to secure the current connection.
PerformanceResourceTiming.connectEnd Read onlyA DOMHighResTimeStamp immediately after the browser finishes establishing the connection to the server to retrieve the resource.
PerformanceResourceTiming.requestStart Read onlyA DOMHighResTimeStamp immediately before the browser starts requesting the resource from the server.
PerformanceResourceTiming.firstInterimResponseStart Read onlyA DOMHighResTimeStamp that represents the interim response time (for example, 100 Continue or 103 Early Hints).
PerformanceResourceTiming.responseStart Read onlyA DOMHighResTimeStamp immediately after the browser receives the first byte of the response from the server (which may be an interim response).
PerformanceResourceTiming.finalResponseHeadersStart Read onlyA DOMHighResTimeStamp that represents the final headers response time (for example, 200 Success), after any interim response time.
PerformanceResourceTiming.responseEnd Read onlyA DOMHighResTimeStamp immediately after the browser receives the last byte of the resource or immediately before the transport connection is closed, whichever comes first.
Additionally, this interface exposes the following properties containing more information about a resource:
PerformanceResourceTiming.contentType Read onlyA string representing a minimized and standardized version of the MIME-type of the fetched resource.
PerformanceResourceTiming.decodedBodySize Read onlyA 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.deliveryType Read onlyIndicates how the resource was delivered — for example from the cache or from a navigational prefetch.
PerformanceResourceTiming.encodedBodySize Read onlyA number representing the size (in octets) received from the fetch (HTTP or cache), of the payload body, before removing any applied content encodings.
PerformanceResourceTiming.initiatorType Read onlyA string representing the web platform feature that initiated the performance entry.
PerformanceResourceTiming.nextHopProtocol Read onlyA string representing the network protocol used to fetch the resource, as identified by the ALPN Protocol ID (RFC7301).
PerformanceResourceTiming.renderBlockingStatus Read onlyA string representing the render-blocking status. Either "blocking" or "non-blocking".
PerformanceResourceTiming.responseStatus Read onlyA number representing the HTTP response status code returned when fetching the resource.
PerformanceResourceTiming.transferSize Read onlyA number representing the size (in octets) of the fetched resource. The size includes the response header fields plus the response payload body.
PerformanceResourceTiming.serverTiming Read onlyAn array of PerformanceServerTiming entries containing server timing metrics.
PerformanceResourceTiming.toJSON()Returns a JSON representation of the PerformanceResourceTiming object.
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 Performance.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);
});