重要な CSS を抽出する

CSS の重要な手法を使用してレンダリング時間を改善する方法を学びます。

Milica Mihajlija 氏

ブラウザはページを表示する前に CSS ファイルをダウンロードして解析する必要があります。そのため、CSS はレンダリングをブロックするリソースになります。CSS ファイルのサイズが大きい場合やネットワークの状態が良好でない場合、CSS ファイルのリクエストによって、ウェブページの表示時間が大幅に長くなる可能性があります。

ウェブページが画面の端からはみ出しているノートパソコンとモバイル デバイスのイラスト

抽出したスタイルを HTML ドキュメントの <head> でインライン化すると、スタイルを取得するために追加のリクエストを送信する必要がなくなります。残りの CSS は非同期で読み込むことができます。

重要な CSS が頭部にインラインで記述されている HTML ファイル
クリティカルな CSS をインライン化

特にネットワーク状況が良くない場合、レンダリング時間を改善することで、体感できるパフォーマンスが大きく変わる可能性があります。モバイル ネットワークでは、帯域幅に関係なく高レイテンシが問題です。

3G 接続でレンダリングをブロックする CSS のページ（上）とインラインのクリティカル CSS がある同じページ（下）を比較したフィルムストリップ ビューの比較。上部のフィルムストリップに 6 つの空白のフレームが表示され、最終的にコンテンツが表示される。下部のフィルムストリップには、最初のフレームに意味のあるコンテンツが表示されます。
3G 接続でレンダリングをブロックする CSS を使用するページ（上）と、クリティカル CSS をインラインで読み込むページ（下）の比較

First Contentful Paint（FCP）の品質が低く、Lighthouse の監査で「レンダリング ブロック リソースの排除」の可能性がある場合は、クリティカルな CSS を試すことをおすすめします。

[レンダリングを妨げるリソースを排除する] または [未使用の CSS を先送りする] による Lighthouse の監査

最初のレンダリングまでのラウンドトリップ回数を最小限に抑えるため、スクロールせずに見える範囲のコンテンツは 14 KB（圧縮時）以下にします。

この手法で達成できるパフォーマンスへの影響は、ウェブサイトの種類によって異なります。一般的に、サイトに含まれる CSS が多いほど、インライン CSS の効果は高くなります。

ツールの概要

ページに重要な CSS を自動的に判別できる優れたツールは数多くあります。これは手動で行うのは面倒なプロセスだからです。ビューポート内の各要素に適用されるスタイルを決定するには、DOM 全体の分析が必要です。

重大

Critical で、スクロールせずに見える範囲の CSS を抽出、圧縮、インライン化します。npm モジュールとして利用できます。Gulp で直接使用することも、Grunt でpluginとして使用することもできます。また、webpack プラグインもあります。

多くの考える手間が省けるシンプルなツールです。スタイルシートを指定する必要もないため、Critical が自動的に検出します。また、複数の画面解像度に対応する重要な CSS の抽出もサポートしています。

criticalCSS

CriticalCSS も、スクロールせずに見える範囲の CSS を抽出する npm モジュールです。CLI でも利用できます。

重要な CSS をインライン化して圧縮するオプションはありませんが、実際には重要な CSS に属していないルールを強制的に追加でき、@font-face 宣言を含めるかどうかをより細かく制御できます。

ペントハウス

Penthouse は、サイトまたはアプリに多数のスタイルやスタイルがあり、それらが DOM に動的に挿入される場合に適しています（Angular アプリで一般的です）。内部で Puppeteer が使用されており、オンラインでホストされるバージョンもあります。

Penthouse はスタイルシートを自動的に検出しないため、重要な CSS を生成する HTML ファイルと CSS ファイルを指定する必要があります。この方法の利点は、多数のジョブを並行して実行できることです。