files/en-us/web/api/performanceresourcetiming/index.md
{{APIRef("Performance API")}}{{AvailableInWorkers}}
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 {{domxref("XMLHttpRequest")}}, {{SVGElement("SVG","SVG element")}}, image, or script.
{{InheritanceDiagram}}
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 {{domxref("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 {{HTTPHeader("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
PerformanceEntryThis interface extends the following {{domxref("PerformanceEntry")}} properties for resource performance entry types by qualifying and constraining them as follows:
"resource".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.
Additionally, this interface exposes the following properties containing more information about a resource:
"blocking" or "non-blocking".PerformanceResourceTiming object.Example using a {{domxref("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 {{domxref("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);
});
{{Specifications}}
{{Compat}}