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

Demián Renzulli 氏
Demián Renzulli 氏

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

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

最適でない方法で CSS を読み込む

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

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

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

測定

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

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

最適化されていないページの Lighthouse レポート、[最適化] の FCP が「1」と「ブロックしているリソースを排除」と表示されている

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

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

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

最適化されていないページの DevTools パフォーマンス トレース。CSS の読み込み後に FCP が開始します。

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

最適化

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

  1. DevTools で、Control+Shift+P または Command+Shift+P(Mac)を押してコマンド メニューを開きます。
  2. 「Coverage」と入力し、[Show Coverage] を選択します。
  3. [再読み込み] ボタンをクリックしてページを再読み込みし、カバレッジのキャプチャを開始します。
CSS ファイルのカバレッジ(未使用バイトは 55.9%)です。

レポートをダブルクリックすると、クラスが 2 つの色でマークされて表示されます。

  • 緑(重要): ブラウザが表示可能なコンテンツ(タイトル、サブタイトル、アコーディオン ボタンなど)をレンダリングするために必要なクラスです。
  • 赤(重要ではない): これらのスタイルは、すぐには表示されないコンテンツ(アコーディオン内の段落など)に適用されます。

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

  • カバレッジ ツールから取得したレポートで緑色でマークされたクラス定義を抽出し、ページの先頭にある <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>
  • 次に、次のパターンを適用して、残りのクラスを非同期で読み込みます。
<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 が始まっています。

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

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

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

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

Lighthouse のレポート。[Passed Audits] セクションに [Eliminate blocing resources] と表示されている。

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

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