要点
スクロールせずに見える範囲のコンテンツを即座に読み込めるようにする重要な CSS テクニック。目に見えるコンテンツをミリ秒単位でユーザーに配信します。
クリティカル CSS とは何ですか?
クリティカル CSS とは、ユーザーがページを開いたときに表示される Web ページの最初の領域（アバブザフォールド）と呼ばれ、HTML でインラインで表示される領域に必要な CSS ルールを決定することです。この手法により、ブラウザは外部 CSS ファイルを待たずにページをペイントできるようになります。
レンダリング ブロック問題の解決
ブラウザは、デフォルトで、すべての CSS ファイルがダウンロードされるまでページ ペイントを待ちます。これにより、特に大きな CSS ファイルを含むプロジェクトで重大な遅延が発生します。重要な CSS テクニックを使用して、この待機を解消します。
- ページの上部に必要な CSS ルールを決定します。
- これらのルールを HTML の
部分にインラインで追加します。 - メイン CSS ファイルを
media="print" で非同期的に読み込みます。 onload="this.media='all'".
ツール
Critical (npm パッケージ)、Penthouse、PurgeCSS などのツールは、このプロセスの自動化に役立ちます。 Laravel Mix または Vite パイプラインに統合できます。
初回コンテンツフル ペイント (FCP) 時間が 40 ～ 60% 短縮されます。
関連サービス
Meta広告・成果報酬型運用
サーバーサイドCAPI導入により広告費の無駄を排除し、ROASを最大化
