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

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

関連記事

Google

Google マップの地図をウェブページに埋め込む手順

Google マップの地図を、ウェブページに埋め込む手順について説明します。 手順自体は簡単なのですが、Google マップの仕様が時々変わり、操作手順もその影響を受けることがあるため、現時点(201 …

インターネット上での検索方法

Google 画像検索を表すURL http://images.google.com/search?tbm=isch&q=検索キーワード 執筆中

Web Vitals

Webページ読み込み高速化に対する<script>タグのdefer/async属性について

Webページ読み込み高速化に対する<script>タグのdefer/async属性について書いています。

WordPress

「Build a Custom WordPress User Flow」を試してみました

目次1. はじめにソースコード2. 全体3. Part 1: Replace the Login Page使用している関数アクションフィルタ4. Part 2: New User Registrati …

Chrome

Chrome のローカルオーバーライド機能を使ってWebサイトのファイルをローカルのファイルに置き換える

目次1. Chrome のローカルオーバーライド機能とは?2. 使い方1. この機能で使用するローカル側のフォルダーを指定します2. 置き換えるファイルを指定します3. ファイルを編集します3. Ov …