リソースタイミング

図 1 リソース読み込みタイムスタンプ（引用元）

アプリケーションは、リソースを読み込む際に使用するさまざまな段階のタイムスタンプを取得することができます。この API が提供するタイムスタンプは以下の通りです。

1. startTime: リソース読み込み処理を開始した直前のタイムスタンプ。
2. redirectStart: リダイレクトを開始したフェッチのタイムスタンプ。
3. redirectEnd: 最後のリダイレクトに対するレスポンスの最後のバイトを受信した直後のタイムスタンプ。
4. workerStart: サービスワーカーのスレッドを起動した直前のタイムスタンプ。
5. fetchStart: ブラウザーがリソースの取得を始める直前のタイムスタンプ。
6. domainLookupStart: ブラウザーがリソースのドメイン名検索を始める直前のタイムスタンプ。
7. domainLookupEnd: ブラウザーがリソースのドメイン名検索を完了した直後のタイムスタンプ。
8. connectStart: ユーザーエージェントがリソースを取得するためにサーバーへの接続を確立し始める直前のタイムスタンプ。
9. secureConnectionStart: リソースが安全な接続で読み込まれた場合、ブラウザーが現在の接続を安全にするためにハンドシェイクプロセスを開始した直前のタイムスタンプ。
10. connectEnd: ブラウザーがサーバーへの接続を完了してリソースを取得した直後のタイムスタンプ。
11. requestStart: ブラウザーがサーバー、キャッシュ、ローカルリソースからリソースをリクエストし始める直前の時点のタイムスタンプ。
12. responseStart: ブラウザーがサーバー、キャッシュ、ローカルリソースからレスポンスの最初のバイトを受信した直後のタイムスタンプ。
13. responseEnd: ブラウザーがリソースの最後のバイトを受信した直後、またはトランスポート接続が閉じられた直前にタイムスタンプが記録されます。どちらが最初のイベントになるかは決まっていません。

PerformanceResourceTiming インターフェイスには、リソースのサイズデータを取得するために使用できる 3 つのプロパティがあります。transferSize プロパティは、取得したリソースのサイズをバイト単位で返します。このサイズには、レスポンスヘッダーフィールドに加え、レスポンス内容本体も含みます。

encodedBodySize プロパティは、適用されたコンテンツエンコーディングが除去される前の、HTTP またはキャッシュから取得した内容本体のサイズをオクテット単位でを返します。decodedBodySize は、適用されたコンテンツエンコーディングが除去された後の、HTTP またはキャッシュから取得したメッセージ本体のサイズをオクテット単位で返します。

PerformanceResourceTiming インターフェイスは、追加のリソース情報を提供します。プロパティの全リストについては、リファレンスドキュメントを参照してください。

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)

PerformanceResourceTiming のリファレンスページには、これらすべての指標を測定するためのサンプルコードが格納されています。 通常、これらの指標を測定するためのコードは、例えば以下のようなものです。

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const request = entry.responseStart - entry.requestStart;
    if (request > 0) {
      console.log(`${entry.name}: Request time: ${request}ms`);
    }
  });
});

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

CORS が有効な場合、サーバーのアクセスポリシーがこれらの値の共有を許可しない限り、タイミングプロパティの値の多くはゼロとして返されます。このため、リソースを指定されたサーバーは、制限付きのタイムスタンプ値を取得することが許可されたオリジンの値を指定した、HTTP の Timing-Allow-Origin レスポンスヘッダーを送信する必要があります。

ウェブページ自体のオリジン以外からリソースを読み込む際に、既定では 0 を返すプロパティとあしては、redirectStart、redirectEnd、domainLookupStart、domainLookupEnd、connectStart、connectEnd、secureConnectionStart、requestStart、responseStart があります。

例えば、https://developer.mozilla.org がリソースのタイミング情報を確認できるようにするには、オリジン間リソースが送信する必要があります。

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

ウェブサイトまたはアプリケーションで 250 以上のリソースを取得し、250 以上の PerformanceResourceTiming 項目を記録したい場合は、リソースタイミングバッファーのサイズを大きくする必要があります。

ブラウザーのパフォーマンスリソースデータバッファーのサイズを設定するには、Performance.setResourceTimingBufferSize() メソッドを使用し、ブラウザーのパフォーマンスリソースデータバッファーをクリアするには、Performance.clearResourceTimings() メソッドを使用します。

ブラウザーのリソースタイミングバッファーが満杯になったことを通知してもらうには、 resourcetimingbufferfull イベントを待ち受けしてください。

次の呼び出しでは、ブラウザーのパフォーマンスタイムラインに 500 件の "resource" パフォーマンス項目が追加されます。

performance.setResourceTimingBufferSize(500);

詳しくは、バッファーサイズの管理も参照してください。

• PerformanceResourceTiming
• Timing-Allow-Origin
• Performance.setResourceTimingBufferSize()
• Performance.clearResourceTimings()