プログラミング

Resource Timing API を使って、リソースの読み込みに掛かった時間を計測する

投稿日:2020年12月23日 更新日:

1. Resource Timing API について

Resource Timing Level 2 というAPIを使うと、特定のリソースの読み込みに掛かった時間を計測することができます。

このAPIを使ったサンプルコードを紹介します。

2. サンプルコード

このサンプルコードでは、Webページがロードされた直後の時点で読み込まれている各リソースを表す PerformanceResourceTiming オブジェクトを、開発者ツールの Console パネルに出力しています。但し、画像リソースについては、それらの情報を分かりやすく加工したものも出力します。

JavaScript

function resourceTiming() {
  let resourceList = window.performance.getEntriesByType("resource"),
       p;
  for (i = 0; i < resourceList.length; i++) {
    p = resourceList[i];
    console.log("= Resource entry[" + i + "]");
    if (p.initiatorType == "img") {
      console.log("initiatorType: " + p.initiatorType);
      console.log("name: " + p.name);
      // いろいろな掛かった時間
      console.log("Domain Lookup に掛かった時間 = " + (p.domainLookupEnd - p.domainLookupStart));
      console.log("Connect に掛かった時間       = " + (p.connectEnd - p.connectStart));
      console.log("Response を受け取るのに掛かった時間 = " + (p.responseEnd - p.responseStart));
      // 以下は = duration でもある。
      console.log("Total で掛かった時間         = " + (p.responseEnd - p.startTime));

      console.table(p.toJSON());
     }
     console.log(p);
  }
}
  • window.performance.getEntriesByType("resource") を実行すると、その時点で読み込まれているリソース毎に作成された PerformanceResourceTiming オブジェクトの配列になって返ってきます。このオブジェクトは、読み込みに掛かった時間などの情報がプロパティとしてセットされています。
  • そして、ここでは PerformanceResourceTiming インターフェイスのプロパティを出力しているわけですが、各プロパティについての情報は後述します。
  • MDN に載っていたコードを参考にしたのですが、元のページが分からなくなってしまいました。例えば、Using the Resource Timing API – Web API | MDN にもサンプルコードが載っています。

HTML

<body onload="resourceTiming()">

例えば、こんな感じに出力されます。

結果の例
結果の例

3. PerformanceResourceTiming インターフェイス

サンプルコードでは、PerformanceResourceTiming インターフェイスのプロパティを出力しています。

[Exposed=(Window,Worker)]
interface PerformanceResourceTiming : PerformanceEntry {
    readonly        attribute DOMString           initiatorType;
    readonly        attribute DOMString           nextHopProtocol;
    readonly        attribute DOMHighResTimeStamp workerStart;
    readonly        attribute DOMHighResTimeStamp redirectStart;
    readonly        attribute DOMHighResTimeStamp redirectEnd;
    readonly        attribute DOMHighResTimeStamp fetchStart;
    readonly        attribute DOMHighResTimeStamp domainLookupStart;
    readonly        attribute DOMHighResTimeStamp domainLookupEnd;
    readonly        attribute DOMHighResTimeStamp connectStart;
    readonly        attribute DOMHighResTimeStamp connectEnd;
    readonly        attribute DOMHighResTimeStamp secureConnectionStart;
    readonly        attribute DOMHighResTimeStamp requestStart;
    readonly        attribute DOMHighResTimeStamp responseStart;
    readonly        attribute DOMHighResTimeStamp responseEnd;
    readonly        attribute unsigned long long  transferSize;
    readonly        attribute unsigned long long  encodedBodySize;
    readonly        attribute unsigned long long  decodedBodySize;
    [Default] object toJSON();
};

DOMHighResTimeStamp 型のプロパティは、時刻がセットされます。ここで定義されている順番が、そのまま発生する順番になっているようです。○○Start と ○○End というペアの名前のプロパティは、○○End から ○○Start を引けば、○○に掛かった時間が分かります。

各プロパティの情報元

各プロパティが何を測定しているのかについては、Using the Resource Timing API – Web APIs | MDN に分かりやすい図が載っています。

Resource timing properties
Resource timing properties

また、このインターフェイスは、PerformanceEntry インターフェイスを拡張しているため、PerformanceEntry インターフェイスのプロパティも持っています。

[Exposed=(Window,Worker)]
interface PerformanceEntry {
  readonly    attribute DOMString           name;
  readonly    attribute DOMString           entryType;
  readonly    attribute DOMHighResTimeStamp startTime;
  readonly    attribute DOMHighResTimeStamp duration;
  [Default] object toJSON();
};

4. デモページ

5. 参考

仕様

MDN

ブラウザの対応状況

📂-プログラミング

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web Components

Web Components の Slot について

Web Components の Slot について説明します。

Web Workers API を使ったサンプル

Web Workers API を使ったサンプルページです。 目次1. デモページ2. 画面イメージ3. ソースコード4. 参考 1. デモページ デモページ 🔗 Web Worker …

web development

Layout Instability API を使ってレイアウト・シフトを検出する

目次1. Layout Instability API について2. サンプルコード3. インターフェイス情報PerformanceObserver interfaceLayoutShift inte …

時間とともに風景画像の色を変化させるサンプルページを作りました

時間とともに風景画像の色を変化させるサンプルページを作りました。 夕方や夜に変化する効果を狙っています。 目次1. スクリーンショット2. デモ3. ソースコード4. メモ 1. スクリーンショット …

Bootstrap

ボタンを押した直後に BootstrapのTooltipを数秒間表示する方法

ウェブページ上のボタンを押した直後に、Bootstrap の Tooltip を一定時間だけ表示する方法を紹介します。 スポンサードリンク 目次1. はじめに2. 参考になる情報3. プログラムの書き …