クリティカルレンダリングパスとは何で、何がそれをブロックしますか？

何がブロックするか

• CSSはデフォルトでレンダリングをブロックします — ブラウザはCSSがダウンロードされパースされるまで描画しません。スタイルなしのコンテンツがちらつくのを避けるためにスタイルが必要だからです。
• 同期的なJSはパーサーをブロックします — 素の <script> はダウンロードと実行の間、HTMLのパースを止めます。

DOMに触れるアプリのコードには defer を、analyticsのような独立したスクリプトには async を使ってください。クリティカルなCSSはインライン化し、残りはブロックせずに読み込みます。

なぜ重要なのか

これはほとんどすべての読み込み時間の修正の背後にある思考モデルです。レンダリングをブロックするCSS/JSは、遅い初回描画と貧弱なLCPの最大の原因です。defer/async がなぜ存在するのかを知っていることは、構文だけでなくブラウザを理解していることを示します。