PerformanceResourceTiming: serverTiming property

An array of PerformanceServerTiming entries.

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

Example using a 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) => {
    entry.serverTiming.forEach((serverEntry) => {
      console.log(`${serverEntry.name} duration: ${serverEntry.duration}`);
    });
  });
});

["navigation", "resource"].forEach((type) =>
  observer.observe({ type, buffered: true })
);

Example using Performance.getEntriesByType(), which only shows resource 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}`);
      }
    }
  }
}

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

• PerformanceServerTiming
• Server-Timing