PerformanceResourceTiming

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.

* Some parts of this feature may have varying levels of support.

メモ: この機能はウェブワーカー内で利用可能です。

PerformanceResourceTiming インターフェイスは、アプリケーションのリソースの読み込みに関する詳細なネットワークタイミングデータの取得と分析を可能にします。アプリケーションはタイミングメトリックを使用して、XMLHttpRequest、<SVG>、画像、スクリプトなどの特定のリソースを取得するのにかかる時間を判断できます。

解説

このインターフェイスのプロパティは、リダイレクトの開始時刻と終了時刻、フェッチの開始時刻、DNS ルックアップの開始時刻と終了時刻、レスポンスの開始時刻と終了時刻などのネットワークイベントに対する高解像度タイムスタンプを含むリソース読み込みタイムラインを作成します。さらに、このインターフェイスは、取得したリソースのサイズや取得を開始したリソースの種類に関するデータを提供する他のプロパティを使用して PerformanceEntry を拡張します。

PerformanceEntry PerformanceResourceTiming

一般的なリソースタイミングメトリクス

このインターフェイスのプロパティを使用すると、特定のリソースタイミングメトリックスを計算することができます。一般的な使用される用途は次のとおりです。

  • TCP ハンドシェイク時間の計測 (connectEnd - connectStart)
  • DNS ルックアップ時間の計測 (domainLookupEnd - domainLookupStart)
  • リダイレクト時間の計測 (redirectEnd - redirectStart)
  • リクエスト時間の計測 (responseStart - requestStart)
  • TLS ネゴシエーション時間の計測 (requestStart - secureConnectionStart)
  • フェッチ時間の計測（リダイレクトなし） (responseEnd - fetchStart)
  • サービスワーカー処理時間の計測 (fetchStart - workerStart)
  • コンテンツが圧縮されていたかのチェック (decodedBodySize が encodedBodySize と同じにならない)
  • ローカルキャッシュがヒットしたかどうかのチェック (transferSize が 0 になる)
  • 最新の高速プロトコルが使用されているかどうかのチェック (nextHopProtocol が HTTP/2 または HTTP/3)
  • リソースがレンダーブロッキングであることのチェック (renderBlockingStatus)

インスタンスプロパティ

PerformanceEntry からの継承

このインターフェイスは、以下のように修飾し制約することによって、リソースパフォーマンス項目型の PerformanceEntry プロパティを拡張します。

PerformanceEntry.duration 読取専用

timestamp プロパティで responseEnd と startTime の差を返します。

PerformanceEntry.entryType 読取専用

"resource" を返します。

PerformanceEntry.name 読取専用

このリソースの URL を返します。

PerformanceEntry.startTime 読取専用

リソースのフェッチを始めた時刻の timestamp を返します。この値は PerformanceResourceTiming.fetchStart と等価です。

タイムスタンプ

このインターフェイスは、以下のタイムスタンププロパティに対応しています。図に示すように、リソースのフェッチに記録される順番で掲載されています。アルファベット順の一覧は、左のナビゲーションに掲載されています。

リソースのフェッチに記録された順にタイムスタンプを掲載しているタイムスタンプ図

PerformanceResourceTiming.redirectStart 読取専用

リダイレクトを開始するフェッチの開始時刻を表す DOMHighResTimeStamp です。

PerformanceResourceTiming.redirectEnd 読取専用

最後のリダイレクトのレスポンスの最後のバイトを受信した直後の DOMHighResTimeStamp です。

PerformanceResourceTiming.workerStart 読取専用

サービスワーカースレッドが既に実行されている場合は FetchEvent を配信する直前、実行されていない場合はサービスワーカースレッドを始める直前の DOMHighResTimeStamp を返します。リソースがサービスワーカーに介入されない場合、このプロパティは常に 0 を返します。

PerformanceResourceTiming.fetchStart 読取専用

ブラウザーがリソースのフェッチを始める直前の DOMHighResTimeStamp です。

PerformanceResourceTiming.domainLookupStart 読取専用

ブラウザーがリソースのドメイン名検索を始める直前の DOMHighResTimeStamp です。

PerformanceResourceTiming.domainLookupEnd 読取専用

ブラウザーがリソースのドメイン名検索を完了した直後の時刻を表す DOMHighResTimeStamp です。

PerformanceResourceTiming.connectStart 読取専用

ブラウザーがリソースを取得するためにサーバーとの接続を始める直前の DOMHighResTimeStamp です。

PerformanceResourceTiming.secureConnectionStart 読取専用

ブラウザーが現在の接続を保護するためにハンドシェイク処理を開始する直前の DOMHighResTimeStamp です。

PerformanceResourceTiming.connectEnd 読取専用

ブラウザーがリソースを取得するためにサーバーとの接続を完了した直後の DOMHighResTimeStamp です。

PerformanceResourceTiming.requestStart 読取専用

ブラウザーがサーバーからリソースのリクエストを始める直前の DOMHighResTimeStamp です。

PerformanceResourceTiming.responseStart 読取専用

ブラウザーがサーバーからレスポンスの最初のバイトを受け取った直後の DOMHighResTimeStamp です。

PerformanceResourceTiming.responseEnd 読取専用

ブラウザーがリソースの最後のバイトを受信した直後、またはトランスポート接続が閉じられる直前の、どちらか早い方の DOMHighResTimeStamp です。

追加のリソース情報

さらに、このインターフェイスは、リソースに関するより詳細な情報を含む以下のプロパティを公開します。

PerformanceResourceTiming.decodedBodySize 読取専用

メッセージ本体のフェッチ（HTTPまたはキャッシュ）から受け取ったサイズ（オクテット単位）を表す数値で、適用されたコンテンツエンコーディングを削除した後の値です。

PerformanceResourceTiming.encodedBodySize 読取専用

フェッチ（HTTP またはキャッシュ）から受け取ったペイロード本体のサイズ（オクテット単位）を表す数値で、適用されたコンテンツエンコーディングを削除する前のものです。

PerformanceResourceTiming.initiatorType 読取専用

文字列で、パフォーマンス項目を開始したウェブプラットフォーム機能を表します。

PerformanceResourceTiming.nextHopProtocol 読取専用

文字列で、 ALPN プロトコル ID (RFC7301) によって識別される、リソースを取得するために使用されたネットワークプロトコルを表します。

PerformanceResourceTiming.renderBlockingStatus 読取専用

レンダーブロッキングの状態を表す文字列。"blocking" または "non-blocking" のどちらかです。

PerformanceResourceTiming.responseStatus 読取専用

リソースのフェッチ時に返される HTTP レスポンスステータスコードを表す数値です。

PerformanceResourceTiming.transferSize 読取専用

フェッチされたリソースのサイズ （オクテット単位）を表す数値。このサイズには、レスポンスヘッダーフィールドとレスポンスのペイロード本体が含まれます。

PerformanceResourceTiming.serverTiming 読取専用

サーバーのタイミングメトリクスを格納した PerformanceServerTiming 項目の配列です。

インスタンスメソッド

PerformanceResourceTiming.toJSON()

この PerformanceResourceTiming オブジェクトの JSON 表現を返します。

例

リソースのタイミング情報のログ出力

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

js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
  });
});

observer.observe({ type: "resource", buffered: true });

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

js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  console.log(entry);
});

セキュリティ要件

オリジン間のタイミング情報

リソースタイミングプロパティの多くは、リソースがオリジン間リクエストであった場合に 0 または空文字列を返すよう制約されています。オリジン間のタイミング情報を見るためには、HTTP の Timing-Allow-Origin レスポンスヘッダーを設定する必要があります。

例えば、https://developer.mozilla.org にタイミングリソースを見ることを許可するには、オリジン間リソースで次のものを送信する必要があります。

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

仕様書

Specification
Resource Timing
# resources-included-in-the-performanceresourcetiming-interface

ブラウザーの互換性

関連情報