Resource timing
Resource Timing is part of the Performance API and enables retrieving and analyzing detailed network timing data for 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 load a specific resource (such as an image or a script) either implicitly as part of page load or explicitly from JavaScript, for example using the fetch() API.
Every resource on a document will be represented by a PerformanceResourceTiming entry (extending the PerformanceEntry interface) with the entryType of "resource".
For each PerformanceResourceTiming entry, a resource loading timeline will be recorded, with high-resolution timestamps for network events such as redirect start and end times, DNS lookup start and end times, request start, response start and end times, and so on. Besides the timestamps, other properties that provide information about the resource are included as well, such the size of the fetched resource, or the type of resource that initiated the fetch.
See Typical resource timing metrics in the reference page for the PerformanceResourceTiming interface.
Resource loading timestamps
Figure 1. Resource loading timestamps (source).
An application can get timestamps for the various stages used to load a resource. For example the startTime, DNS timestamps, connection set up times and then various resource download times.
See timestamps in the reference page for the PerformanceResourceTiming interface.
Resource size
The PerformanceResourceTiming interface has three properties that can be used to obtain size data about a resource. The transferSize property returns the size (in bytes) of the fetched resource including the response header fields plus the response payload body.
The encodedBodySize property returns the size (in octets) received from the fetch (HTTP or cache), of the payload body, before removing any applied content-codings. decodedBodySize returns the size (in octets) received from the fetch (HTTP or cache) of the message body, after removing any applied content-codings.
Other properties
The PerformanceResourceTiming interface provides additional resources information. Consult the reference docs for the full list of properties.
Managing resource buffer sizes
If your website or application fetches more than 250 resources and you want to record more than 250 PerformanceResourceTiming entries, you need to increase the size of the resource timing buffer.
To set the size of the browser's performance resource data buffer, use the Performance.setResourceTimingBufferSize() method, and to clear the browser's performance resource data buffer, use the Performance.clearResourceTimings() method.
To get notified when the browser's resource timing buffer is full, listen for the resourcetimingbufferfull event.
The following call allows 500 "resource" performance entries in the browser's performance timeline.
performance.setResourceTimingBufferSize(500);
For more information, see also Managing buffer sizes.
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.
For more information on the fields affected, see Cross-origin timing information in the reference page for the PerformanceResourceTiming interface.