定義
「ページを開くとなぜすぐ見えず、少しの間まっ白な画面が出るのか」「何を減らせば最初の画面がもっと速く出るのか」を理解して改善したいときに使う概念である。
Critical Rendering Path（CRP、クリティカルレンダリングパス）は、ブラウザが受け取った HTML・CSS・JavaScript を画面上の実際のピクセルに変えるまでに必ず通る最小限の段階の順序だ。この経路に時間のかかる作業（レンダーブロッキングリソース）が挟まると、その分だけ最初の画面が遅く出る。
なぜ必要か
同じページなのに、開いた途端に内容が出るサイトもあれば、数秒間まっ白な画面だけが見えるサイトもある。この違いは、たいていブラウザが最初のピクセルを描く前に待たされるリソースがどれだけ多いかから来る。
ブラウザは CSS をすべて受け取って解釈する前は画面を描かず（スタイルが確定しないと誤って描くことになるため）、<head> 内の通常の <script> に出会うと、そのスクリプトを受け取って実行し終えるまで HTML のパースを止める。そのため「どのリソースが最初の画面を押さえているか」を CRP の段階で突き止めてこそ、何を遅延させ・インライン化し・先読みするかを判断できる。
動作原理
ブラウザはおおむね次の順序を通る。
- DOM（Document Object Model、HTML をブラウザが扱えるツリー構造に変えたもの）の構築 — HTML をパースしてノードツリーを作る。
- CSSOM（CSS Object Model、CSS をツリー構造に変えたもの）の構築 — CSS をパースして各要素に適用されるスタイル規則のツリーを作る。
- Render Tree（レンダーツリー）の構築 — DOM と CSSOM を合わせ、実際に画面に見える要素だけ（例:
display: noneは除外）をスタイルとともに集める。 - Layout（レイアウト、リフローとも呼ばれる） — 各要素が画面で占める正確な位置と大きさを計算する。
- Paint（ペイント） — 計算された要素をピクセル（色・テキスト・画像）で塗る。複数のレイヤーを合わせる Composite（合成）段階が続くこともある。
肝心なのは順序があるという点だ。CSSOM が完成する前に Render Tree は作れず、Render Tree なしには Layout・Paint に進めない。そのため CSS は基本的にレンダーブロッキング（render-blocking）リソース（受け取り終えるまで画面を描かせないリソース）として扱われる。通常の <script> はパースを止める**パーサーブロッキング（parser-blocking）**リソースだ。
実務での適用
- 最初の画面に本当に必要な CSS だけを優先的に確保する。残りの CSS・JS は遅延ロードする。
<script>には状況に応じてdefer（HTML パースを止めず、文書パース完了後に順番に実行）やasync（止めずに受け取り次第実行）を付けて、パーサーブロッキングを避ける。- 最初の画面（above-the-fold、スクロールなしで最初に見える領域）に使うヒーロー画像・主要フォントだけを先読み（preload）する。
- 最初の画面に必ずしも必要ない大きなライブラリは動的 import で切り分け、あとから読み込む。
トレードオフ
- CSS をインラインで入れるとリクエストが一つ減って first paint が速くなりうるが、ファイルキャッシュの再利用を諦めることになる — 最初の画面用の最小 CSS だけに適用するのが無難だ。
asyncスクリプトは速く実行されるが、実行順序が保証されない。順序が重要ならdeferを使う。- リソースを多く preload すると、肝心の重要リソースの帯域を奪いうるので、先読みは本当に最初の画面に必要なものだけを選ぶべきだ。
使ってはいけない場合
- CRP 最適化は「最初の画面表示速度」を狙った作業だ。すでに最初の画面が十分速く、ボトルネックがデータ要求やランタイムの JavaScript 側にあるなら、CRP の段階をさらに手を入れるより、そちらを見るべきだ。
- 最初の画面のコンテンツが本質的にクライアントデータに依存して遅く埋まる場合、CSS/JS のブロッキングだけ減らしても体感が大きく変わらないことがある。
よくある間違い
- すべての CSS を
<head>で一度に読み込み、最初の画面と無関係なスタイルまでレンダーを止めさせる。 <head>の通常の<script>からdefer/asyncを外し、スクリプトを受け取る間に HTML パースが止まるのに気づかない。- Layout が繰り返し再計算される（レイアウトスラッシング）パターンを作り、first paint 以降もレンダーが遅くなる。
関連概念
- largest-contentful-paint — CRP が短いほど有利な代表的指標（最も大きな要素が描かれる時点）