Webフロントエンド - 基礎

クリティカルレンダリングパスくりてぃかるれんだりんぐぱす

レンダリングDOMCSSOMページ表示速度パフォーマンス最適化ブラウザ

クリティカルレンダリングパスについて教えて

簡単に言うとこんな感じ！

ブラウザがWebページを画面に表示するまでの「必須の作業手順」のことだよ！料理に例えると、食材を切って→炒めて→盛り付けるみたいに、HTMLを読んで→デザイン情報を解析して→画面に描く、っていう一連の流れのこと。この手順を短くすることが「表示を速くする」ってことなんだ！

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

クリティカルレンダリングパス（Critical Rendering Path / CRP）とは、ブラウザがHTMLファイルを受け取ってから、実際にユーザーの画面にページを描画（レンダリング）するまでに実行しなければならない一連の処理ステップのことです。「クリティカル（重要・必須）」と呼ばれる理由は、このパスを通らないとページが一切表示されないからです。

ブラウザはHTMLを受け取ると、まずその内容を解析してDOM（Document Object Model）というデータ構造を作り、次にCSSを解析してCSSOM（CSS Object Model）を作ります。この二つを組み合わせてレンダーツリーを生成し、各要素の位置・サイズを計算（レイアウト）し、最後に実際の画素として描画（ペイント）します。この流れがすべて完了して、はじめてユーザーの目に見える画面が生まれます。

Webサイトの「表示が遅い」と感じる原因の多くはこのCRPのどこかがボトルネックになっています。システム発注や外注先の評価の場面でも、ページ表示速度はビジネス成果（直帰率・CVR）に直結するため、開発チームがCRPを正しく理解・最適化しているかどうかは重要な確認ポイントです。

クリティカルレンダリングパスの6ステップ

ブラウザがページを表示するまでの処理は、大きく6つのステップに分かれます。

ステップ	名称	内容
①	HTMLの解析 → DOM構築	HTMLタグを読み込み、要素の木構造（DOM）を作る
②	CSSの解析 → CSSOM構築	スタイルシートを読み込み、デザイン情報の木構造（CSSOM）を作る
③	レンダーツリーの生成	DOMとCSSOMを合体させ、実際に画面に表示する要素だけを抽出した木を作る
④	レイアウト（リフロー）	各要素の位置・サイズを計算する
⑤	ペイント	計算結果をもとにピクセルとして描画する
⑥	コンポジット	複数のレイヤーを重ねて最終的な画面を合成する

覚え方：「DOMとCSSOMが合体してレイアウトしてペイント」

「ドンとシゅっと合わせてレイアウトペイント」→ ド・シ・合・レ・ペ と覚えると順番が頭に入りやすいです！

CRPを遅くする「レンダリングブロッキング」とは

<head> 内に書かれたCSSや、async/defer 属性のない <script> タグは、ブラウザの処理を一時停止させるレンダリングブロッキングリソースになります。これらが多いほどCRPが長くなり、ページ表示が遅くなります。

リソース種別	デフォルトの挙動	対策
CSS	レンダリングをブロック	メディアクエリで必要分だけ読み込む
`<script>`	HTMLの解析もブロック	`async` または `defer` 属性を付ける
大きな画像	ペイントを遅延	画像の遅延読み込み（lazy load）を使う

歴史と背景

1990年代〜2000年代初頭: Webページはシンプルなテキストと画像だけで、ブラウザの描画処理はほぼ問題にならなかった
2000年代中盤: AjaxやJavaScriptの普及でWebアプリが複雑化し、重いJSがCRPをブロックする問題が顕在化し始める
2010年前後: Googleが「表示速度はSEOの評価指標に含める」と発表し、業界全体でページ速度への関心が急上昇
2012年: Googleのエンジニア Ilya Grigorik が「クリティカルレンダリングパス」という概念を体系化・命名し、書籍やブログで広く普及させた
2015年〜: HTTP/2の普及により複数リソースの並列読み込みが効率化され、CRP最適化の手法も進化
2020年〜: GoogleがCore Web Vitals（LCP・FID・CLS）を正式なランキング指標に採用。CRPの最適化がSEOと直結する時代に突入
現在: React・Vue・Next.jsなどのフレームワークでのSSR（サーバーサイドレンダリング）やSSG（静的サイト生成）も、CRPを短縮する手段として主流になっている

CRPの各ステップと最適化のポイント

CRPがどの部分でボトルネックになっているかを視覚的に整理すると、対策が立てやすくなります。

開発チームへの確認ポイント（発注者向け）

システムやWebサイトを外注する際、以下の観点で開発会社に質問すると品質を確認できます。

「クリティカルCSS（ファーストビューに必要なCSSだけを先に読み込む手法）はインライン化していますか？」
「JavaScriptの読み込みに async / defer を使用していますか？」
「Google PageSpeed Insightsでのスコアは何点ですか？（目安：モバイルで70点以上）」
「Core Web VitalsのLCP・CLSの数値を教えてください」

規格・文書	内容
W3C HTML Living Standard	HTMLのパース処理・DOM構築の仕様を定義
W3C CSS Object Model (CSSOM)	CSSOMの構造と操作に関する仕様
W3C Paint Timing	FP（First Paint）・FCP（First Contentful Paint）の計測仕様
W3C Largest Contentful Paint	LCPの定義と計測方法