リソースの優先度によって、リソースが同時にダウンロードされるかが決まる(Chrome)

記事
IT・テクノロジー

1. はじめに

Webページの話です。

「Optimizing resource loading with Priority Hints」という記事を読んで知ったのですが、Chrome ではリソースの優先度によって「複数のリソースが同時にダウンロードされるかどうか」が変わるようです。

これって常識でしょうか?

2. Chrome によるリソースへの優先度付けとダウンロード

「Optimizing resource loading with Priority Hints」に以下の表が載っています(少し加工しています)。

Chromeのリソースの優先順位付け.png

細かい説明は省きますが、この表は 各リソースに対して Chrome がどの優先度を割り振るかを示しています。

例えば、CSS (early)FontXHR (sync) といったリソースは一番高い優先度 (Highest もしくは VeryHigh) が与えられています。

分かりにくいのは、一番上の行にある3つのラベルです。

・Layout-blocking
・Load in layout-blocking phase
・Load one-at-a-time in layout-blocking phase

ここについて自分なりに分かっていることを書いておきます。これがこの記事の目的です。

2021-10-21_table1.png

下2つの状況を、DevTools の [Performance] パネルでの解析結果で表してみます(簡単な実験を行いました)。

まず、Priority (優先度) が High な JavaScript ファイル 3つがダウンロードされる様子が以下です。

JS_Pri_High_Download1a.png
(レンダリング処理がブロックされている間の処理です)

ダウンロード処理が重なっているのが分かります(色の濃い部分がダウンロード中を表しています)。

次は、Priority (優先度) が Low な JavaScript ファイル 3つがダウンロードされる様子です。

JS_Pri_Low_Download1a.png
(レンダリング処理がブロックされている間の処理です)

ダウンロードの部分が重なっていません。

確かにこれだと、優先度が高いリソースが先に読み込まれやすいです。

3. おわりに

「Optimizing resource loading with Priority Hints」には、他にも興味深いことが書いてありましたので、また記事にするかもしれません。

ラボラジアンでは、Webに関するサービスを出品しております。こちらもよろしくお願い致します。

サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す