**クリティカルレンダリングパス** は、ブラウザがHTML、CSS、JSを画面上のピクセルに変えるために実行する一連のステップです。最初の描画の*前*に完了しなければならないものはすべて**レンダリングをブロックする（render-blocking）**ものです。 ## ステップ 1. **HTML** をパース → DOMツリーを構築。 2. **CSS** をパース → CSSOMツリーを構築。 3. DOM + CSSOM を結合 → レンダーツリー。 4. **レイアウト**（位置/サイズ）→ **ペイント**（ピクセル）。 ## 何がブロックするか - **CSSはデフォルトでレンダリングをブロックします** — ブラウザはCSSがダウンロードされパースされるまで描画しません。スタイルなしのコンテンツがちらつくのを避けるためにスタイルが必要だからです。 - **同期的なJSはパーサーをブロックします** — 素の ` ``` DOMに触れるアプリのコードには `defer` を、analyticsのような独立したスクリプトには `async` を使ってください。クリティカルなCSSはインライン化し、残りはブロックせずに読み込みます。 ## なぜ重要なのかこれはほとんどすべての読み込み時間の修正の背後にある思考モデルです。レンダリングをブロックするCSS/JSは、遅い初回描画と貧弱なLCPの最大の原因です。`defer`/`async` が*なぜ*存在するのかを知っていることは、構文だけでなくブラウザを理解していることを示します。

Webパフォーマンスと Core Web Vitals 問