【要約】[Frontend Performance - Part 3] 初期表示の遅さの正体：Critical Rendering Path入門 [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
APIのレスポンスが高速であっても、画面の描画（LCP/FCP）が遅延する問題。これは、ブラウザがDOMやCSSOMを構築する過程で、CSSやJavaScriptといったリソースがレンダリングをブロックし、描画プロセスを一時停止させてしまうことに起因する。
// Approach
ブラウザの描画プロセス（CRP）を理解し、リソースの読み込み順序を制御する。具体的には、Critical CSSのインライン化、JavaScriptへのdefer/async属性の付与、preloadによる重要リソースの優先取得、CSSの分割適用といった手法を用いて、レンダリングブロックを最小化する。
// Result
レンダリングブロックを回避することで、FCP（最初のコンテンツ表示）およびLCP（メインコンテンツ表示）の向上を図る。DevToolsを用いたデバッグ手法や、実務で活用できるチェックリストを通じて、パフォーマンス改善の再現性を高める構成となっている。
Senior Engineer Insight
> フロントエンドのパフォーマンスチューニングにおいて、CRPの理解は「勘」を「科学」に変えるための必須要件である。単にライブラリを軽量化するだけでなく、ブラウザのレンダリングパイプラインを意識したリソース配置（Critical CSSのインライン化やdeferの活用）を行うことが、LCP改善の最短経路となる。ただし、大規模なSPAにおいては、CRPの最適化に加え、Hydrationによるメインスレッドの占有が新たなボトルネックとなるため、それらとのトレードオフを考慮した設計が求められる。本記事のチェックリストは、初動のパフォーマンス診断として極めて実用的である。