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

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

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

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

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

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

測定

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

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

最適化されていないページの Lighthouse レポート。FCP が「1 秒」で、[改善案] に「ブロックしているリソースを排除」と表示されています
Lighthouse レポートでは、ページの読み込み速度を上げるためにスタイルシートを簡素化することをおすすめしています。

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

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

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

最適化されていないページの DevTools パフォーマンス トレース。CSS の読み込み後に FCP が開始されていることが示されています。
最適化されていないデモページでは、CSS の読み込みが完了するまで FCP が発生しません。

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

最適化

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

  1. DevTools で Control+Shift+P または Command+Shift+P(Mac)を押して、コマンド メニューを開きます。
  2. 「カバー率」と入力し、[カバー率を表示] を選択します。
  3. [Reload] をクリックしてページを再読み込みし、カバレッジのキャプチャを開始します。
CSS ファイルのコードカバレッジ。55.9% のバイトが無使用です。
カバレッジ レポートには、最初のページ読み込みで実際に使用される 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 について詳しくは、重要なアセットをプリロードするガイドをご覧ください。
  • linkonload 属性を使用すると、スタイルシートの読み込みが完了したときにブラウザが CSS を処理できます。
  • onload ハンドラの使用後に「null 化」すると、一部のブラウザでは rel 属性を切り替えたときにハンドラが再呼び出されるのを回避できます。
  • noscript 要素内のスタイルシートへの参照は、JavaScript を実行しないブラウザにフォールバックを提供します。

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

モニタリング

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

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

最適化されたページの DevTools パフォーマンス トレース。CSS の読み込み前に FCP が開始されていることがわかります。
最適化されたページでは、スタイルシートの読み込み前に FCP を開始できます。

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

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

Lighthouse レポート。FCP 値が「0.8 秒」と表示されています。
新しい、短縮された FCP。

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

[監査に合格] セクションに [ブロックされているリソースを排除] と表示されている Lighthouse レポートの画像。
ページはブロック リソースの監査に合格しました。

次のステップと参考資料

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