テクニカル
クリティカルCSS
ファーストビュー描画に必要な最小限のCSS。インライン化で初期表示を高速化する。
クリティカルCSSとは？
クリティカルCSSとは、ページを開いたときに最初に見える領域（ファーストビュー）の描画に必要な最小限のCSSのことです。
これをHTMLに直接インライン化し、残りのCSSは遅延読み込みします。
外部CSSファイルの読み込みを待たずに初期描画ができるため、FCPやLCPが改善します。
レンダリングブロッキング解消の代表的手法です。
クリティカルCSSの使い方・実践方法
クリティカルCSS適用の流れは次のとおりです。
- ファーストビューに必要なCSSを抽出（自動ツールあり）
- 抽出したCSSを
<head>にインライン化 - 残りのCSSは非同期で読み込む
- ページ種別ごとにクリティカルCSSを用意
クリティカルCSSで押さえるべきポイント
クリティカルCSSは効果が大きい反面、手動管理は煩雑です。
ページのデザイン変更のたびに抽出し直す必要があるため、ビルドプロセスに自動抽出を組み込んでおくと、メンテナンス負荷を抑えられます。
クリティカルCSSを実践するなら
Saguru なら、月額270円から、SEOキーワード調査・上位サイト分析・自サイトSEO診断のすべてが使えます。
「クリティカルCSS」を理解した上で、すぐに実践に移せます。
登録なしで1日5回まで無料 ／ メール登録で1日30回 ／ ベーシック月額270円 ／ 自サイトをSEO診断
クリティカルCSSについてよくある質問
クリティカルCSSは手動で書く？
自動抽出ツール（Critical等）の利用が一般的です。
手動は保守が大変になります。
手動は保守が大変になります。
効果はどれくらい？
レンダリングブロッキングが解消され、FCP・LCPがまとまって改善することがあります。
デメリットは？
デザイン変更時に抽出し直す手間です。
ビルド自動化で軽減できます。
ビルド自動化で軽減できます。