リソースタイミング

リソースタイミングはパフォーマンス API の一部であり、アプリケーションのリソースを読み込む際のネットワークタイミングの詳細データの取得と分析を可能にします。アプリケーションはタイミング指標を使用することで、例えば、fetch() API を使用するなどして、JavaScript から明示的に、またはページ読み込みの一部として暗黙的に、特定のリソース（画像やスクリプトなど）を読み込むのにかかる時間を特定することができます。

文書上のすべてのリソースは、PerformanceResourceTiming（PerformanceEntry インターフェイスを拡張したもの）の項目のうち、entryType が "resource" であるもので表されます。

それぞれの PerformanceResourceTiming 項目には、リソース読み込みのタイムラインが記録され、リダイレクトの開始と終了時間、DNS ルックアップの開始と終了時間、リクエストの開始、応答の開始と終了時間など、ネットワークイベントの高解像度タイムスタンプが記載されます。タイムスタンプの他にも、リソースに関する情報が指定されたプロパティが記載されます。例えば、取得したリソースのサイズや、フェッチを開始したリソースの種類などです。

リソース読み込みタイムスタンプ

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

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

startTime: リソース読み込み処理を開始した直前のタイムスタンプ。
redirectStart: リダイレクトを開始したフェッチのタイムスタンプ。
redirectEnd: 最後のリダイレクトに対するレスポンスの最後のバイトを受信した直後のタイムスタンプ。
workerStart: サービスワーカーのスレッドを起動した直前のタイムスタンプ。
fetchStart: ブラウザーがリソースの取得を始める直前のタイムスタンプ。
domainLookupStart: ブラウザーがリソースのドメイン名検索を始める直前のタイムスタンプ。
domainLookupEnd: ブラウザーがリソースのドメイン名検索を完了した直後のタイムスタンプ。
connectStart: ユーザーエージェントがリソースを取得するためにサーバーへの接続を確立し始める直前のタイムスタンプ。
secureConnectionStart: リソースが安全な接続で読み込まれた場合、ブラウザーが現在の接続を安全にするためにハンドシェイクプロセスを開始した直前のタイムスタンプ。
connectEnd: ブラウザーがサーバーへの接続を完了してリソースを取得した直後のタイムスタンプ。
requestStart: ブラウザーがサーバー、キャッシュ、ローカルリソースからリソースをリクエストし始める直前の時点のタイムスタンプ。
responseStart: ブラウザーがサーバー、キャッシュ、ローカルリソースからレスポンスの最初のバイトを受信した直後のタイムスタンプ。
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 のリファレンスページには、これらすべての指標を測定するためのサンプルコードが格納されています。通常、これらの指標を測定するためのコードは、例えば以下のようなものです。

js
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 がリソースのタイミング情報を確認できるようにするには、オリジン間リソースが送信する必要があります。

http

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

リソースバッファーサイズの管理

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

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

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

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

performance.setResourceTimingBufferSize(500);

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

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2026年4月12日 by MDN contributors.

View this page on GitHub • Report a problem with this content