PerformanceResourceTiming.serverTiming

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2023年3月.

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

serverTiming は読み取り専用プロパティで、サーバーのタイミング測定が入った PerformanceServerTiming 項目の配列を返します。

サーバーのタイミング測定では、サーバーが次のような Server-Timing ヘッダーを送信する必要があります。

http

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

serverTiming の項目は、 navigation と resource の項目で使用することができます。

値

PerformanceServerTiming 項目の配列です。

例

サーバータイミング項目のログ出力

PerformanceObserver を使用して、 PerformanceServerTiming 項目を監視することができます。各サーバー項目の時間は、コンソールにログ出力されます。

ブラウザーに記録された新しい resource パフォーマンス項目を通知する PerformanceObserver を使用した例です。オブザーバーが作成される前の項目にアクセスするには buffered オプションを使用します。

js
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 }),
);

Performance.getEntriesByType() を使用した例です。このメソッドを呼び出した時点でブラウザー上のパフォーマンスタイムラインに存在する resource パフォーマンス項目のみを表示します。

js
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}`);
      }
    }
  }
}