PerformanceResourceTiming.serverTiming

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

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

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

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

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

値

PerformanceServerTiming (en-US) 項目の配列です。

例

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

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

ブラウザーに記録された新しい 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}`);
      }
    }
  }
}

オリジン外へのサーバータイミング情報の公開

サーバーのタイミング情報へのアクセスは、同じオリジン内に制限されます。オリジンをまたいでタイミング情報を公開するには、HTTP の Timing-Allow-Origin レスポンスヘッダーを設定する必要があります。

例えば、https://developer.mozilla.org にサーバーのタイミング情報を見ることを許可するには、cross-origin リソースを送信する必要があります。

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

仕様書

Specification
Server Timing
# servertiming-attribute

ブラウザーの互換性

BCD tables only load in the browser

関連情報