パーサーブロックとレンダリングブロックの違いについて解説

止まれ
サイト表示速度の高速化についてある程度調べたりしていると、「パーサーブロック」や「レンダリングブロック」という用語に必ずぶち当たる時が来るでしょう。
これらを理解しないと表示高速化の道は歩めない。

「パーサーブロック」と「レンダリングブロック」の違いは何か?
この点について検索してもわかりやすく解説してあるページが見つからなかったので、このページではこれらについて詳しく解説していきます。

Webの知識のない一般の方からすると理解できない内容になるかもしれませんが、このページにたどり着く人はページ表示速度の高速化に興味のある人でしょうから、それなりの知識があるものだと期待しています。

Webブラウザがページを画面に表示させるまでの流れ

事前に知っておくと良い知識として、先に解説しておきます。

Webブラウザがページを画面に表示させるためには、内部的に以下のような処理を行う必要があります。(以下の画像はDeciphering the Critical Rendering Pathより引用)
ブラウザの処理の流れ
この画像の内容を解説すると、

  1. HTMLを解析してDOMを構築する。
  2. CSSを解析してCSSOMを構築する。
  3. DOMとCSSOMからレンダリングツリーを構築する。
  4. レンダリングツリーを基に、画面表示のためのレイアウト計算をする。
  5. 画面上に描画(Paint)する。

というような処理があって、初めて画面上にページが表示されるのです。
補足説明:DOMやCSSOMが具体的にどのようなものなのかは、ここでは詳しく知る必要はありません。

この流れを知ったうえで以下からの解説を読んでいくと、その内容がわかりやすくなるでしょう。

パーサーブロックとは何か?


Webブラウザがページを表示させる時、一番最初にダウンロード・読み込みをするのはHTMLファイルです。

WordPressの場合であれば静的なHTMLファイルというものは存在しませんが、動的にHTMLファイルが生成されているので同じです。
この辺りの仕組みについて詳しく知りたい方は「なぜWordPressのサイトは表示速度が遅くなるのか?その原因を解説」のページを参考にしてください。

一番最初にHTMLファイルをダウンロードし、以下のような処理の流れになります。

  1. HTMLファイルをダウンロードする。
  2. その内容を1行目から順番に解析(パース)していく。
  3. DOMを構築する。

上記2の解析処理を途中でストップさせてしまうものがパーサーブロックの要素になります
パース(解析)をブロックするから「パーサーブロック」です。

例えば、HTMLの中に以下のようなインライン形式のJSのコードがあったり、

<script>
ここにJSのコード。
</script>

または、以下のような外部JSファイルの読み込みコードがあったりすると、

<script src="ここに外部JSファイルへのパス"></script>

その時点でHTMLの解析は一時中断され、そのJSの内容を解析・実行をした後に再開されることになります
外部JSファイルの場合はそのファイルのダウンロードの時間も必要になるので、HTMLの解析が中断されている時間がさらに長くなります。

「Webブラウザがページを画面に表示させるまでの流れ」の画像の通り、HTMLを解析してDOMを構築しないと次の処理(レンダリングツリーの構築)に進めませんので、ここで中断してしまうとページが表示されるのがその分遅くなります。

レンダリングブロックとは何か?


HTMLを1行目から順に解析していく中で、以下のようなインライン形式でのCSSコードがあったり、

<style>
ここにCSSのコード
</style>

または、以下のような外部CSSファイルの読み込みコードがあった時は、

<link rel="stylesheet" href="ここに外部CSSファイルへのパス" />

その時点でそのCSSの解析が開始され、CSSOMの構築が行われていきます。
外部CSSファイルの場合はそのファイルのダウンロードの時間も発生します。

しかし、これらのCSSはパーサーブロック要素ではありません
つまり、これらがあったとしてもHTMLの解析は中断されず、その後の行が継続して解析されていきます。
CSSOMの構築はHTMLの解析やDOMの構築と並行して行われます。

しかし、これらのCSSはレンダリングブロックの要素になります。
「Webブラウザがページを画面に表示させるまでの流れ」の画像の通り、CSSを解析してCSSOMを構築しないと次の処理(レンダリングツリーの構築)に進めないからです。
レンダリングをブロックするから「レンダリングブロック」なのです。

パーサーブロックとレンダリングブロックのまとめ


パーサーブロックとレンダリングブロックをまとめると以下のようになります。

パーサーブロック レンダリングブロック
原因 インラインのJS
外部JSファイル
インラインのCSS
外部CSSファイル
問題点 DOMの構築が遅くなる レンダリングツリーの構築が遅くなる

上記のように、パーサーブロック要素はDOMの構築を遅らせるわけですが、DOMの構築が完了しないとその後のレンダリングツリーの構築ができないので、間接的にはレンダリングブロック要素であると言えるかもしれません。

要するに、レンダリングブロック要素よりもパーサーブロックの要素のほうがより根本的なと言うか、大きな問題点だと言えます。

現在のPCやスマホの性能からすれば、CSSやJSの解析にはほとんど時間はかかりません。
それに比べると、1つのファイルをダウンロードするほうがその何倍もの時間がかかります。
それはつまり、インラインで記述されているものはそれほど問題にはならないが、外部ファイルのダウンロードが必要になると明らかに遅延が大きくなる。ということです。

表示速度を速めるために、「ファーストビューに関するCSSだけをインラインで記述し、それ以外のCSSファイルは遅延読み込みさせると良い」と言われたりするのは、そのような理由になります。

補足説明:遅延読み込みさせたCSSはレンダリングブロックの要素ではなくなります。