PerformanceServerTiming

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨March 2023⁩.

Note: This feature is available inWeb Workers.

Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.

ThePerformanceServerTiming interface surfaces server metrics that are sent with the response in theServer-Timing HTTP header.

This interface is restricted to the same origin, but you can use theTiming-Allow-Origin header to specify the domains that are allowed to access the server metrics. Note that this interface is only available in secure contexts (HTTPS) in some browsers.

Instance properties

PerformanceServerTiming.descriptionRead only: A string value of the server-specified metric description, or an empty string.
PerformanceServerTiming.durationRead only: A double that contains the server-specified metric duration, or value0.0.
PerformanceServerTiming.nameRead only: A string value of the server-specified metric name.

Instance methods

PerformanceServerTiming.toJSON(): Returns a JSON representation of thePerformanceServerTiming object.

Example

Given a server that sends theServer-Timing header, for example a Node.js server like this:

const http = require("http");function requestHandler(request, response) {  const headers = {    "Server-Timing": `      cache;desc="Cache Read";dur=23.2,      db;dur=53,      app;dur=47.2    `.replace(/\n/g, ""),  };  response.writeHead(200, headers);  response.write("");  return setTimeout(() => {    response.end();  }, 1000);}http.createServer(requestHandler).listen(3000).on("error", console.error);

ThePerformanceServerTiming entries are now observable from JavaScript via thePerformanceResourceTiming.serverTiming property and live onnavigation andresource entries.

Example using aPerformanceObserver, which notifies of newnavigation andresource performance entries as they are recorded in the browser's performance timeline. Use thebuffered option to access entries from before the observer creation.

const observer = new PerformanceObserver((list) => {  list.getEntries().forEach((entry) => {    entry.serverTiming.forEach((serverEntry) => {      console.log(        `${serverEntry.name} (${serverEntry.description}) duration: ${serverEntry.duration}`,      );      // Logs "cache (Cache Read) duration: 23.2"      // Logs "db () duration: 53"      // Logs "app () duration: 47.2"    });  });});["navigation", "resource"].forEach((type) =>  observer.observe({ type, buffered: true }),);

Example usingPerformance.getEntriesByType(), which only showsnavigation andresource 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, description, duration } of serverTiming) {        console.log(`${name} (${description}) duration: ${duration}`);        // Logs "cache (Cache Read) duration: 23.2"        // Logs "db () duration: 53"        // Logs "app () duration: 47.2"      }    }  }}