PerformanceResourceTiming.serverTiming

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The serverTiming read-only property returns an array of PerformanceServerTiming entries containing server timing metrics.

Server timing metrics require the server to send the Server-Timing header. For example:

Server-Timing: cache;desc="Cache Read";dur=23.2

Value

An array of PerformanceServerTiming entries.

Examples

Logging server timing entries

You can use a PerformanceObserver to watch for PerformanceServerTiming entries. Each server entry's duration is logged to the console.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    entry.serverTiming.forEach((serverEntry) => {
      console.log(`${serverEntry.name} duration: ${serverEntry.duration}`);
    });
  });
});

observer.observe({ entryTypes: ["resource", "navigation"] });

Alternatively, you can use Performance.getEntriesByType() to get performance entries present in the browser's performance timeline at the time you call this method:

for (const entryType of ["navigation", "resource"]) {
  for (const { name: url, serverTiming } of performance.getEntriesByType(
    entryType
  )) {
    if (serverTiming) {
      for (const { name, duration } of serverTiming) {
        console.log(`${url}: ${name} duration: ${duration}`);
      }
    }
  }
}

Cross-origin server timing information

Access to server timing information is restricted to the same origin. To expose cross-origin timing information, the Timing-Allow-Origin HTTP response header needs to be set.

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

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

Specifications

Specification
Server Timing
# servertiming-attribute

Browser compatibility

BCD tables only load in the browser

See also