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

Demián Renzulli

重要: このガイドでは、パフォーマンスを向上させる高度な手法について説明します。ただし、適切に実装しないとバグが発生する可能性もあります。ほとんどのサイトでは、この手法を導入しなくても、推奨されるパフォーマンス目標をすべて達成できます。

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

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

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

次の例は、3 つの非表示のテキスト パラグラフを含むアコーディオンで、それぞれに異なるクラスのスタイルが設定されています。

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

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

測定

ページで Lighthouse を実行し、[パフォーマンス] セクションに移動します。

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

Lighthouse レポートでは、ページの読み込み速度を上げるためにスタイルシートを簡素化することをおすすめしています。

注: このデモサイトでは、非常に小さなスタイルシートを使用しています。本番環境のシナリオでは、はるかに大きな CSS ファイルが必要になることがよくあります。Lighthouse は、ページに 2, 048 バイト以上の CSS ルールが存在し、スクロールせずに見える範囲のコンテンツのレンダリング中に使用されていないことを検出すると、未使用の CSS を削除するという提案も表示します。

この CSS がレンダリングをブロックする仕組みを可視化するには:

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

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

最適化されていないデモページでは、CSS の読み込みが完了するまで FCP が発生しません。

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

最適化

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

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

カバレッジ レポートには、最初のページ読み込みで実際に使用される CSS の割合が表示されます。

レポートをダブルクリックすると、詳細が表示されます。

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

この情報を基に 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 を実行しないブラウザにフォールバックを提供します。

注:

実際の本番環境のシナリオでは、loadCSS などの CSS 遅延関数を使用することをおすすめします。この関数は、この動作をカプセル化し、ブラウザ間で適切に動作し、インライン onload JavaScript を許可しない Content Security Policy をサポートできます。

CSS リンクをページの一番下に配置して、Firefox と Chrome でスタイルシートを待たずにコンテンツをレンダリングすることもできます。ただし、この場合でもブラウザはスタイルシートを優先するため、すべてのブラウザで重要なコンテンツがブロックされる可能性があります。

ほとんどのスタイルが非同期で読み込まれても、生成されたページは以前のバージョンとまったく同じになります。インライン スタイルと CSS ファイルへの非同期リクエストが HTML ファイルでどのように表示されるかを示します。

モニタリング

DevTools を使用して、最適化されたページで別のパフォーマンス トレースを実行します。

FCP マーカーは、ページが CSS をリクエストする前に表示されます。つまり、ブラウザは CSS が読み込まれるのを待たずにページをレンダリングできます。

最適化されたページでは、スタイルシートの読み込み前に FCP を開始できます。

最後のステップとして、最適化されたページで Lighthouse を実行します。

レポートには、FCP ページが 0.2 秒短縮されたことが示されます（20% の改善です）。

新しい、短縮された FCP。

[レンダリングを妨げるリソースを除外] の候補は [改善の余地] ではなく、[監査に合格済み] セクションに移動しました。

ページはブロック リソースの監査に合格しました。

次のステップと参考資料

このガイドでは、ページ内の未使用のコードを手動で抽出して、重要でない CSS を遅らせる方法について説明しました。より複雑な本番環境については、重要な CSS を抽出するガイドで、重要な CSS を抽出するための最も一般的なツールのいくつかについて説明しています。また、これらのツールが実際にどのように機能するかを確認するためのCodelab も用意されています。