用語集 › 🕸️ Web › クリティカルレンダリングパス
【くりてぃかるれんだりんぐぱす】

クリティカルレンダリングパス とは？

💡 Webページが表示されるまでの「最短ルート」を知れば、表示速度は劇的に変わる
📌 このページのポイント
クリティカルレンダリングパス — 5つのステップ DOM構築 HTML → DOM → CSSOM構築 CSS → CSSOM → レンダーツリー DOM + CSSOM → レイアウト 位置・サイズ計算 → ペイント 画面に描画 ⚠ レンダーブロッキング CSSはCSSOM完成まで描画をブロック JSはDOM構築を一時停止させる ✓ 最適化のポイント クリティカルCSSをインライン化 JSにdefer/asyncを付与 開始 FCP 完了
クリティカルレンダリングパスの5ステップ
ひよこ ひよこ

URLを入力してからページが表示されるまで、ブラウザの中で何が起きてるの？

ペンギン先生 ペンギン先生

大きく5つのステップがあるよ。まずHTMLをパースしてDOM（文書の構造）を作る。次にCSSを読み込んでCSSOM（スタイルの構造）を作る。この2つを合体させてレンダーツリーを作り、レイアウト計算をして、最後にペイント（描画）するんだ

ひよこ ひよこ

なんでこれを知る必要があるの？

ペンギン先生 ペンギン先生

この仕組みを知ると、ページ表示が遅い原因がわかるようになるんだ。例えばCSSファイルが大きすぎるとCSSOM構築に時間がかかるし、JavaScriptがhead内にあるとDOM構築が止まっちゃう。ボトルネックを特定して改善できるよ

ひよこ ひよこ

JavaScriptがDOM構築を止めるってどういうこと？

ペンギン先生 ペンギン先生

ブラウザはJavaScriptに出会うと「このスクリプトがDOMを変更するかもしれない」と思って、スクリプトの実行が終わるまでDOM構築を一時停止するんだ。これをレンダーブロッキングと呼ぶよ。asyncやdeferを使えばブロックを避けられるね

ひよこ ひよこ

具体的にどうすれば速くなるの？

ペンギン先生 ペンギン先生

CSSはhead内で早めに読み込み、JavaScriptにはdeferを付ける。クリティカルCSSはインライン化して外部ファイルの読み込み待ちをなくす。First Contentful PaintやLargest Contentful Paintの数値が目に見えて改善するよ

ペンギン
まとめ：ざっくりこれだけ覚えればOK！
「クリティカルレンダリングパス」って出てきたら「ブラウザが画面を描くまでの必須工程」と思えればだいたいOK！
📖 おまけ：英語の意味
「Critical Rendering Path」 ＝ 重要なレンダリング経路
💬 Critical（重要な）Rendering（描画）Path（経路）で、ページ表示に絶対必要な処理の道筋のことだよ
🔗 あわせて読みたい
← 用語集にもどる