ChromeのPriorityヘッダーについて #Chrome

Chrome 124からHTTPリクエストにPriorityヘッダーが付加されるようになります。

簡単に、Priorityを紹介します。

Priorityヘッダーについて

Priorityヘッダーは『RFC 9218 Extensible Prioritization Scheme for HTTP』で定義されています。

HTTP/2やHTTP/3では一つのコネクション上で複数のHTTPリクエスト・レスポンスをやりとりできます。priorityヘッダーを用いて複数リクエストを投げた中で、どのレスポンスを優先度をサーバにシグナルできるようになります。
(あくまで一つのコネクション内の優先度なので、全部優先度上げたら良いということではない)

Webページをレンダリングする上で早く欲しい物もあればあとからでも良いものもあります。ブラウザが自身が欲しい物にあわせてPriorityを設定することは、First Contentful Paintを改善します。（もちろんサーバ側がPriorityヘッダーをサポートしている場合のみ）

Cloudflareの調査した『Introducing HTTP/3 Prioritization』によると、First Contentful Paintが最大37% 削減へるケースもあったとのことです。

例

priorityヘッダーの例を示します。

Priority: u=1, i

u: Urgency、優先度の指定であり0~7の値をとり、0の方が優先度が高い
i: Incremental、画像のように読み込みながら処理できることを示す。同一優先度でiがつくものへ並列に処理される

Chromeで有効にする

本日時点の、Chrome Canary v124 では起動時にflagを付けることで有効にできる。

--enable-features= PriorityHeader --flag-switches-end

(なお起動バイナリの場所はChromeで chrome://version/ にアクセスすると分かる)

FetchPriority属性をつけたときの挙動

基本的にはブラウザが自動でpriorityヘッダーを付与するので、デベロッパーが意識することは多くないはずです。

自前で優先度を制御する際はFetchPriority属性を付与することで、プロトコルレイヤの優先度も合わせて設定されめます。

  <img src="https://example.com?/1" fetchpriority="low">    // u=3
  <img src="https://example.com?/2" fetchpriority="auto">   // u=2
  <img src="https://example.com?/3" fetchpriority="high">   // u=1

また、JavaScriptでFetchする際は自前でヘッダつければコントロールできますね！