critical CSS とは何か? above-the-fold のスタイルをインライン化する

critical CSS は、ページの表示領域である above-the-fold の部分を描画するのに必要な最小限のスタイルセットで、stylesheet を待たずにページを描画できるようインライン化されます。

ページは CSS が届くまで描画できず、ブロッキングな stylesheet 要求は初回描画を遅らせます。critical CSS は、最初に表示されるコンテンツに必要なスタイルだけを抽出して HTML にインライン化し、フル stylesheet がバックグラウンドで読み込まれる間にページが即座に描画されるようにします。その抽出は、CI pipeline に組み込まれるビルド時のステップです。

初回描画を速める理由

通常、ブラウザは描画前にフル stylesheet をダウンロードして解析しなければなりません。critical なサブセットをインライン化すると、その最初のビューでその往復が取り除かれ、意味のあるコンテンツがより早く現れます。

抽出の方法

ツールはページをレンダリングし、above-the-fold のコンテンツにどの CSS ルールが適用されるかを判定します。そのサブセットが HTML の head にインライン化され、残りの CSS はブロックしないよう非同期で読み込まれます。

トレードオフ

初回描画が速くなり、読み込み指標が改善します。
インライン化された CSS は重複し、個別にキャッシュできません。
スタイルやレイアウトが変わったら再生成する必要があります。

正確さを保つ

critical CSS は、それが抽出されたレイアウトに対してのみ正しいものです。デザインが変わったのに critical CSS が古いままだと、初回描画が崩れて見えることがあるため、手で編集するのではなくビルドの一部として再生成する必要があります。

CI/CD における critical CSS

ビルドは HTML を生成する一環として critical CSS を抽出しインライン化するため、デプロイのたびに現在のスタイルと同期が保たれます。抽出にはページのレンダリングが必要になり得るため、ビルド時間が増えます。それが、入力が変わっていないときにキャッシュすべき理由の 1 つです。

重要なポイント

critical CSS は above-the-fold のスタイルをインライン化し、初回描画を速めます。
正確さを保つため、手で編集するのではなくビルドで再生成する必要があります。
CI は HTML ビルド中にこれを抽出し、現在のスタイルと一致させます。