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 thefetch() API.
Every resource on a document will be represented by aPerformanceResourceTiming entry (extending thePerformanceEntry interface) with theentryType of"resource".
For eachPerformanceResourceTiming entry, aresource loading timeline will be recorded, withhigh-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.
SeeTypical resource timing metrics in the reference page for thePerformanceResourceTiming 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 thestartTime, DNS timestamps, connection set up times and then various resource download times.
Seetimestamps in the reference page for thePerformanceResourceTiming interface.
Resource size
ThePerformanceResourceTiming interface has three properties that can be used to obtain size data about a resource. ThetransferSize property returns the size (in bytes) of the fetched resource including the response header fields plus the response payload body.
TheencodedBodySize property returns the size (in octets) received from the fetch (HTTP or cache), of thepayload body,before removing any applied content-codings.decodedBodySize returns the size (in octets) received from the fetch (HTTP or cache) of themessage body,after removing any applied content-codings.
Other properties
ThePerformanceResourceTiming interface providesadditional 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 250PerformanceResourceTiming 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 thePerformance.setResourceTimingBufferSize() method, and to clear the browser's performance resource data buffer, use thePerformance.clearResourceTimings() method.
To get notified when the browser's resource timing buffer is full, listen for theresourcetimingbufferfull event.
The following call allows 500"resource" performance entries in the browser's performance timeline.
performance.setResourceTimingBufferSize(500);For more information, see alsoManaging buffer sizes.
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.
For more information on the fields affected, seeCross-origin timing information in the reference page for thePerformanceResourceTiming interface.