PerformanceResourceTiming.encodedBodySize

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.

encodedBodySize は読み取り専用プロパティで、適用されたコンテンツコーディング(gzip や Brotli など)を削除する前の、ペイロード本体のフェッチ(HTTP またはキャッシュ)から受信したサイズ(オクテット単位)を表します。リソースがアプリケーションキャッシュまたはローカルリソースから取得された場合は、適用されたコンテンツコーディングを削除する前にペイロードボディのサイズを返す必要があります。

encodedBodySize プロパティは、以下の値を取ります。

  • フェッチ(HTTP またはキャッシュ)から受け取ったペイロード本体のサイズ(オクテット単位)を表す数値で、適用されたエンコーディングを削除する前のものです。
  • リソースがオリジン間リクエストで、HTTP の Timing-Allow-Origin ヘッダーが使用されていない場合は 0

コンテンツが圧縮されているかどうかのチェック

もし encodedBodySizedecodedBodySize プロパティが null でなく異なっていれば、コンテンツは(例えば gzip や Brotli などの)圧縮されたものです。

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

js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const uncompressed =
      entry.decodedBodySize && entry.decodedBodySize === entry.encodedBodySize;
    if (uncompressed) {
      console.log(`${entry.name} was not compressed!`);
    }
  });
});

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

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

js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const uncompressed =
    entry.decodedBodySize && entry.decodedBodySize === entry.encodedBodySize;
  if (uncompressed) {
    console.log(`${entry.name} was not compressed!`);
  }
});

オリジン間のコンテンツサイズ情報

encodedBodySize プロパティの値が 0 である場合、そのリソースはオリジン間リクエストである可能性があります。オリジン間のタイミング情報を見るためには、HTTP の Timing-Allow-Origin レスポンスヘッダーを設定する必要があります。

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

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

仕様書

Specification
Resource Timing
# dom-performanceresourcetiming-encodedbodysize

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
encodedBodySize

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Has more compatibility info.

関連情報