More than 3 years have passed since last update.

レンダリングブロックを考慮したリソースの読み込み（レンダリングの基本）

Last updated at 2021-05-14Posted at 2021-05-04

はじめに

CSSやJavaScriptなどのリソースを読み込む際、記述によってはレンダリングを妨げ表示速度を低下させてしまうことがあります。
このような所謂レンダリングブロックの対策について備忘録も兼ねて残しておこうと思います。

レンダリングブロック対策の基本はHTMLをとにかく速く出力することです。
この前提をもとに、対策となる記述方法についてまとめます。

ブラウザにおけるレンダリングのプロセスは大まかに以下のようになります。

HTMLをパース。
- DOMツリーを構築する。
- CSSのマークアップからCSSOM（DOMのCSS版のようなもの）を構築する。
- JavaScriptを実行する。
DOMとCSSOMを組み合わせてレンダリングツリーを構成する。
各ノードのビューポート内での正確な位置とサイズをレイアウトする。
各ノードを画面に描画する。

ページにアクセスしてからデータを読み込んで描画するまでの処理手順をクリティカルレンダリングパスといいます。このフローを最適化することがレンダリングブロックへの対策となり、リソースの読み込み方ひとつで最適化できます。

では具体的にどういった記述をすれば良いのか、CSSとJavaScriptに分けてとまとめたいと思います。