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

Demián Renzulli

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

このガイドでは、重要性の低い CSS を遅延させてクリティカル レンダリング パスを最適化し、First Contentful Paint（FCP）を改善する方法について説明します。

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

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

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

このガイドの目標は、重要なスタイルのみが同期的に読み込まれ、残りのスタイル（段落スタイルを含む）はブロックされない方法で読み込まれるように、このページを最適化することです。

測定

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

レポートには、値が「1s」の First Contentful Paint 指標と、style.css ファイルを参照する最適化案「レンダリング ブロック リソースの削除」が表示されます。

最適化されていないページの Lighthouse レポート、[最適化] の FCP が「1」と「ブロックしているリソースを排除」と表示されている
Lighthouse のレポートでは、スタイルシートをシンプルにしてページの読み込み時間を短縮することが提案されています。

この CSS がレンダリングをブロックする様子を視覚化するには:

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

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

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

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

最適化

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

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

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

モニタリング

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

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

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

最後に、最適化されたページで Lighthouse を実行します。

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

FCP 値が「0.8s」と表示されている Lighthouse のレポート。
削減された新しい FCP。

[レンダリング ブロック リソースの削除] 候補は、[オポチュニティ] に表示されなくなり、[合格した監査] セクションに表示されます。

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

次のステップとリファレンス

このガイドでは、ページ内で使用されていないコードを手動で抽出して、重要性の低い CSS を先送りする方法を説明しました。より複雑な本番環境の場合は、重要な CSS の抽出に関するガイドで、重要な CSS の抽出に役立つ一般的なツールをいくつか紹介します。また、実際の動作を確認するための Codelab も含まれています。