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

CSS ファイルはレンダリング ブロック リソースです。 ブラウザがページを表示する前に、それらを読み込んで処理する必要があります。ウェブページ レンダリングに時間がかかります。

このガイドでは、重要性の低い CSS を先送りして、 重要なレンダリング パスを修正し、 First Contentful Paint（FCP）。

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

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

このページでは 8 つのクラスを含む CSS ファイルをリクエストしていますが、一部のクラスが レンダリングに必要な最低限の説明します。

このガイドの目標は、このページを最適化して、クリティカルなスタイルのみが 他のオブジェクト（段落スタイルを含む）は同期的に読み込まれます。 非ブロック方式で読み込まれます。

測定

Lighthouse を実行する そのページを開いて、 [Performance] セクション。

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

<ph type="x-smartling-placeholder">

</ph>

で確認できます。

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

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

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

<ph type="x-smartling-placeholder">

</ph>

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

最適化

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

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

で確認できます。 <ph type="x-smartling-placeholder">

</ph>

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

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

この情報を使って 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 属性を使用すると、 スタイルシートの読み込みが終了します。
• "null 化"onload ハンドラが使用された後、一部のブラウザで rel 属性を切り替えたときにハンドラを再呼び出す。
• noscript 要素内のスタイルシートを参照することで、 JavaScript を実行しないブラウザ向けの代替機能も備えています。

で確認できます。

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

モニタリング

DevTools を使用して、別の Performance トレースを実行します。 最適化されたページで確認できます。

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

<ph type="x-smartling-placeholder">

</ph>

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

レポートでは、FCP ページが 0.2 秒（20% あります）。

<ph type="x-smartling-placeholder">

</ph>

[レンダリングをブロックするリソースを排除する] の提案が [ オポチュニティ] に移動し、代わりに [Passed Audits]（合格した監査）セクションに表示されます。

<ph type="x-smartling-placeholder">

</ph>

次のステップと参照

このガイドでは、CSS を手動で 見落とされがちですより複雑な本番環境の場合、 重要な CSS の抽出ガイドをご覧ください。 重要な CSS を抽出する最も一般的なツールであり、 Codelab で、これらのタスクがどのように 実践