PerformanceResourceTiming.nextHopProtocol

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

• リソースを取得するために使用されるネットワークプロトコルを表す ALPN プロトコル ID (RFC7301) で識別される文字列。よくある値は次の通りです。
  • "http/0.9"
  • "http/1.0"
  • "http/1.1"
  • "h2"
  • "h2c"
  • "h3"
• リソースがオリジン間リクエストで、HTTP の Timing-Allow-Origin ヘッダーが使用されていない場合は空文字列。

nextHopProtocol プロパティを使用すると、HTTP/2 や HTTP/3 プロトコルを使用しないリソースを確認することができます。

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

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const protocol = entry.nextHopProtocol;
    if (protocol && !(protocol === "h2" || protocol === "h3")) {
      console.log(`${entry.name} uses ${protocol}.`);
    }
  });
});

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

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

const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const protocol = entry.nextHopProtocol;
  if (protocol && !(protocol === "h2" || protocol === "h3")) {
    console.log(`${entry.name} uses ${protocol}.`);
  }
});

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

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

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

• Timing-Allow-Origin
• HTTP/2
• HTTP/3