Web

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

投稿日:2021年10月21日 更新日:

1. はじめに

Webページの話です。

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

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

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

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

Chrome がリソースに優先度を付けます

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

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

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

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

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

ラベル 説明
Layout-blocking
  • 優先度「Highest」(DevToolsでの表示)なリソースが、ここに該当する。
  • 優先度が「Highest」なリソースをダウンロードする間は、レンダリング処理がブロックされる。
Load in layout-blocking phase
  • 優先度「High」(DevToolsでの表示)なリソースが、ここに該当する。
  • レンダリング処理がブロックされている間、優先度が「High」なリソースは同時に複数ダウンロード可能。
Load one-at-a-time in layout-blocking phase
  • 優先度「Medium」「Low」「Lowest」(DevToolsでの表示)なリソースが、ここに該当する。
  • レンダリング処理がブロックされている間、これらの優先度を持つリソースは、1つずつしかダウンロードされない。

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

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

Priority が High の場合(レンダリング処理がブロックされている間)

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

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

Priority が Low の場合(レンダリング処理がブロックされている間)

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

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

3. おわりに

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

4. 参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Chrome

Chrome 77 デベロッパーツールの新機能

目次1. はじめに2. 主な新機能要素のスタイルをコピーするレイアウトシフト (layouts shifts) を表示する使い方Audits パネルの Lighthouse 5.1[Performan …

Web

【HTML】picture 要素について

目次1. <picture> 要素とは?2. 仕様3. <source> 要素4. 利用例5. 実際に使用された画像がどれかを JavaScript で取得する6. 注意点7. …

Web

URLリダイレクトの動作

URLリダイレクトの動きについて説明します。

Web

sizes属性のデフォルト値は 100vw である

sizes属性のデフォルト値は 100vw です。

Web

ツールを公開するWebサイトを作っています

いろいろなツール(Webページ上で提供できるツールに限ります)を公開するサイトを作っています。 Tools on Web https://tools.laboradian.com/ 載せているツールは …