CSS ファイルはレンダリングをブロックするリソースです。ブラウザがページをレンダリングする前に、読み込みと処理を行う必要があります。不必要に大きなスタイルシートを含むウェブページは、レンダリングに時間がかかります。
このガイドでは、クリティカルでない CSS を遅らせてクリティカル レンダリング パスを最適化し、ファースト コンテンツ ペイント(FCP)を改善する方法について説明します。
例: 最適でない CSS の読み込み
次の例は、3 つの非表示のテキスト パラグラフを含むアコーディオンで、それぞれに異なるクラスのスタイルが設定されています。
このページは 8 つのクラスを含む CSS ファイルをリクエストしますが、そのすべてが「表示可能な」コンテンツのレンダリングに必要なわけではありません。
このガイドの目的は、クリティカルなスタイルのみが同期的に読み込まれ、残りのスタイル(段落スタイルを含む)が非ブロッキング方式で読み込まれるように、このページを最適化することです。
測定
ページで Lighthouse を実行し、[パフォーマンス] セクションに移動します。
レポートには、値が「1 秒」の [First Contentful Paint] 指標と、レンダリングをブロックするリソースを排除という改善案が表示され、style.css ファイルが示されています。
この CSS がレンダリングをブロックする仕組みを可視化するには:
- Chrome でページを開きます。
Control+Shift+J
キー(Mac の場合はCommand+Option+J
キー)を押して、デベロッパー ツールを開きます。- [パフォーマンス] タブをクリックします。
- [パフォーマンス] パネルで [再読み込み] をクリックします。
生成されたトレースでは、CSS の読み込みが完了した直後に FCP マーカーが配置されていることがわかります。
つまり、ブラウザは、すべての CSS が読み込まれて処理されるまで待ってから、画面に 1 つのピクセルを描画する必要があります。
最適化
このページを最適化するには、どのクラスがクリティカルと見なされるかを把握する必要があります。これを判断するには、カバレッジ ツールを使用します。
- DevTools で
Control+Shift+P
またはCommand+Shift+P
(Mac)を押して、コマンド メニューを開きます。 - 「カバー率」と入力し、[カバー率を表示] を選択します。
- [Reload] をクリックしてページを再読み込みし、カバレッジのキャプチャを開始します。
レポートをダブルクリックすると、詳細が表示されます。
- 緑色でマークされたクラスは重要です。ブラウザは、タイトル、サブタイトル、アコーディオン ボタンなどの表示コンテンツをレンダリングするために、これらの要素を必要とします。
- 赤色でマークされたクラスは重要ではなく、非表示の段落など、すぐに表示されないコンテンツにのみ影響します。
この情報を基に CSS を最適化し、ブラウザがページの読み込み直後に重要なスタイルの処理を開始し、重要でない CSS を後で処理できるようにします。
カバレッジ レポートで緑色でマークされているクラス定義を抽出し、それらのクラスをページの先頭にある
<style>
ブロックに配置します。<style type="text/css">
.accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
</style>次のパターンを適用して、残りのクラスを非同期で読み込みます。
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
これは CSS を読み込む標準的な方法ではありません。仕組みは次のとおりです。
link rel="preload" as="style"
はスタイルシートを非同期でリクエストします。preload
について詳しくは、重要なアセットをプリロードするガイドをご覧ください。link
のonload
属性を使用すると、スタイルシートの読み込みが完了したときにブラウザが CSS を処理できます。onload
ハンドラの使用後に「null 化」すると、一部のブラウザではrel
属性を切り替えたときにハンドラが再呼び出されるのを回避できます。noscript
要素内のスタイルシートへの参照は、JavaScript を実行しないブラウザにフォールバックを提供します。
ほとんどのスタイルが非同期で読み込まれても、生成されたページは以前のバージョンとまったく同じになります。インライン スタイルと CSS ファイルへの非同期リクエストが HTML ファイルでどのように表示されるかを示します。
モニタリング
DevTools を使用して、最適化されたページで別のパフォーマンス トレースを実行します。
FCP マーカーは、ページが CSS をリクエストする前に表示されます。つまり、ブラウザは CSS が読み込まれるのを待たずにページをレンダリングできます。
最後のステップとして、最適化されたページで Lighthouse を実行します。
レポートには、FCP ページが 0.2 秒短縮されたことが示されます(20% の改善です)。
[レンダリングを妨げるリソースを除外] の候補は [改善の余地] ではなく、[監査に合格済み] セクションに移動しました。
次のステップと参考資料
このガイドでは、ページ内の未使用のコードを手動で抽出して、重要でない CSS を遅らせる方法について説明しました。より複雑な本番環境については、重要な CSS を抽出するガイドで、重要な CSS を抽出するための最も一般的なツールのいくつかについて説明しています。また、これらのツールが実際にどのように機能するかを確認するためのCodelab も用意されています。