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

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

最終更新:
💡 ページが描かれるまでの道筋を知り、表示の待ち時間を調べる

ブラウザがHTMLやCSSなどを処理し、画面に表示するまでの道筋。DOMとCSSOMから表示に必要なレンダーツリーを作り、配置を計算して描画する。リソースの読み込みやJavaScriptの実行も表示のタイミングに影響する。

📌 このページのポイント
文書とスタイルから、画面を作る 📄 HTML → DOM 文書の構造 例：見出し・段落 🎨 CSS → CSSOM スタイルの情報 例：文字色・余白 レンダーツリー 表示する要素とスタイル レイアウト 位置・大きさを計算 ペイント 色・文字などを描画 CSS取得やJavaScript実行の待ちも調べる 実際のページを測り、変更の効果を確かめる
矢印は表示に必要な情報と処理の関係。DOMの完成後にCSSOM構築を始める一本道ではない。
ひよこ ひよこ
ページが表示されるまで、ブラウザの中で何が起きてるの？
ペンギン先生 ペンギン先生
HTMLからDOMという文書の構造、CSSからCSSOMというスタイルの構造を作るよ。この二つを使って表示する要素のレンダーツリーを作り、レイアウトで位置や大きさを計算して、ペイントで描画するんだ。DOMが全部できてからCSSの処理を始める、という固定の順番ではないよ。
ひよこ ひよこ
なんでこの道筋を知る必要があるの？
ペンギン先生 ペンギン先生
初期表示が何を待っているか調べる手がかりになるよ。表示に必要なCSSの取得待ちや、重いJavaScriptの実行などが影響する。ファイルの大きさだけで決めつけず、実際のページで読み込みと処理を測って、遅い部分を探すんだ。
ひよこ ひよこ
JavaScriptがDOM構築を止めるってどういうこと？
ペンギン先生 ペンギン先生
asyncやdeferなどを付けない通常のスクリプトは、HTMLの解析を止めて読み込み・実行することがある。これは解析を止める動きで、表示を待たせるレンダーブロッキングとは区別するよ。すべてのJavaScriptが常にDOMとCSSOMの両方の構築を止める、という意味ではないんだ。
ひよこ ひよこ
asyncやdeferを付ければ速くなる？
ペンギン先生 ペンギン先生
外部の通常スクリプトでは、deferはHTMLの解析と並行して取得し、解析後に記述順で実行する。asyncも並行して取得するけれど、準備できると実行し、その間は解析が止まることがある。実行順も保証されないので、依存関係に合わせて選ぶ。必要なCSSやスクリプトを整理したら、FCPなどの表示指標を測り直して効果を確かめよう。
ペンギン
まとめ：ざっくりこれだけ覚えればOK！
「クリティカルレンダリングパス」って出てきたら「ブラウザが画面を描くまでの必須工程」と思えればだいたいOK！
📖 おまけ：英語の意味
「Critical Rendering Path」 ＝ 重要なレンダリング経路
💬 criticalは重要な、renderingは描画、pathは経路。ブラウザが表示を作るために必要な処理の道筋を指すよ
🔗 あわせて読みたい

参考資料

← 用語集にもどる