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 ヘッダーを送信する必要があります。
Server-Timing: cache;desc="Cache Read";dur=23.2
serverTiming の項目は、 navigation と resource の項目で使用することができます。
値
PerformanceServerTiming 項目の配列です。
例
サーバータイミング項目のログ出力
PerformanceObserver を使用して、 PerformanceServerTiming 項目を監視することができます。各サーバー項目の時間は、コンソールにログ出力されます。
ブラウザーに記録された新しい resource パフォーマンス項目を通知する PerformanceObserver を使用した例です。オブザーバーが作成される前の項目にアクセスするには buffered オプションを使用します。
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 パフォーマンス項目のみを表示します。
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 リソースを送信する必要があります。
Timing-Allow-Origin: https://developer.mozilla.org
仕様書
| Specification |
|---|
| Server Timing # servertiming-attribute |
ブラウザーの互換性
Loading…