クリティカルでない CSS を遅延させる

Demián Renzulli

CSS ファイルはレンダリング ブロック リソースです。ブラウザがページをレンダリングする前に、これらを読み込んで処理する必要があります。不必要に大きなスタイルシートを含むウェブページはレンダリングに時間がかかります。

このガイドでは、クリティカルでない CSS を遅らせてクリティカル レンダリング パスを最適化し、ファースト コンテンツ ペイント（FCP）を改善する方法について説明します。

例: CSS の読み込みが最適でない

次の例では、3 つの隠し段落のテキストがあるアコーディオンが含まれています。各段落は異なるクラスでスタイル設定されています。

このページでは 8 つのクラスを含む CSS ファイルをリクエストしますが、「可視」コンテンツのレンダリングにすべてのクラスが必要というわけではありません。

このガイドの目的は、クリティカルなスタイルのみを同期的に読み込み、残りのスタイル（段落スタイルを含む）を非ブロッキングで読み込むように、このページを最適化することです。

測定

ページで Lighthouse を実行し、[Performance] セクションに移動します。

レポートには、値が「1 秒」の [First Contentful Paint] 指標と、レンダリングをブロックするリソースを排除という改善案が表示され、style.css ファイルが示されています。

この CSS がレンダリングをどのようにブロックしているかを視覚化するには:

1. Chrome でページを開きます。
2. Control+Shift+J キー（Mac の場合は Command+Option+J キー）を押して、デベロッパー ツールを開きます。
3. [パフォーマンス] タブをクリックします。
4. [パフォーマンス] パネルで [再読み込み] をクリックします。

生成されたトレースでは、CSS の読み込みが完了した直後に FCP マーカーが配置されていることがわかります。

つまり、ブラウザは、すべての CSS が読み込まれて処理されるまで待ってから、画面に 1 つのピクセルを描画する必要があります。

最適化

このページを最適化するには、どのクラスがクリティカルとみなされるかを把握する必要があります。これを確認するには、カバレッジ ツールを使用します。

1. DevTools で、Control+Shift+P または Command+Shift+P（Mac）を押してコマンド メニューを開きます。
2. 「カバレッジ」と入力し、[カバレッジを表示] を選択します。
3. [Reload] をクリックしてページを再読み込みし、カバレッジのキャプチャを開始します。

レポートをダブルクリックして詳細を表示します。

• 緑色で表示されたクラスは重大です。ブラウザは、タイトル、サブタイトル、アコーディオン ボタンなどの表示可能なコンテンツをレンダリングする必要があります。
• 赤色でマークされたクラスは重大ではなく、すぐに表示されないコンテンツ（非表示の段落など）にのみ影響します。

この情報を使用して CSS を最適化し、ページが読み込まれた直後にブラウザが重要なスタイルの処理を開始し、重要でない CSS を後で処理できるようにします。

1. カバレッジ レポートで緑色でマークされているクラス定義を抽出し、ページの先頭にある <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>
   

2. 次のパターンを適用して、残りのクラスを非同期で読み込みます。

   <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 も紹介します。