重要でないCSSを延期する
CSS ファイルはレンダリングをブロックするリソースです。つまり、ブラウザがページをレンダリングする前に、CSS ファイルを読み込み、処理する必要があります。不要に大きなスタイルを使うウェブページは、その分レンダリングの時間が長くなります。
準最適な方法で CSS を読み込む #
次の例には、テキストで構成される 3 つのパラグラフが非表示となっているアコーディオンが含まれています。それぞれのスタイルは、異なるクラスを使って定義されています。
このページは 8 つのクラスを持つ CSS ファイルを要求しますが、「目に見える」コンテンツをレンダリングするのに 8 個すべては必要ありません。
本ガイドの目的は、このページを最適化することです。そのため、重要なスタイルのみが同期され、読み込まれます。そして、残り (各パラグラフに適用されるスタイルなど) は非ブロック方式で読み込まれます。
評価 #
ページでLighthouse を実行し、[パフォーマンス] セクションに移動します。
レポートでは、First Contentful Paintメトリックの値が「1」となっており、Opportunties のセクションでは、Eliminate render-blocking resources が style.css を指しています。
この CSS がレンダリングをブロックする仕組みを視覚化するには、以下のことを行います。
- Chrome で対象のページを開きます。1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
- Click the Performance tab.
- [パフォーマンス]パネルで、[再Reload] (再よ見込み) をクリックします。
結果のトレースでは、CSS の読み込みが完了した直後に FCP マーカーが配置されていることがわかります。
これは、ブラウザは、画面上にピクセルを 1 つ描画するのにも、すべての CSS の読み込みと処理が完了するのを待たなくてはいけないことを意味しています。
最適化 #
このページを最適化するには、どのクラスが「クリティカル」と見なされるかを知る必要があります。それには、Coverage Tool (カバレッジツール) を使用します。
- DevTools で、
Control+Shift+PまたはCommand+Shift+P(Mac の場合) をクリックして、Command Menu (コマンドメニュー) を開きます。 - 「Coverage」と入力し、Show Coverage (カバレッジを表示) を選択します。
- [Reload] (再読み込み) ボタンをクリックして、ページを再読み込みし、カバレッジの取り込みを開始します。
レポートをダブルクリックして、2 つの色に分けられたクラスを表示します。
- 緑 (クリティカル): これらは、ブラウザが表示可能なコンテンツ (タイトル、サブタイトル、アコーディオンボタンなど) をレンダリングするために必要なクラスです。
- 赤 (重要ではない): これらのスタイルは、すぐには表示されないコンテンツ (アコーディオン内のパラグラフなど) に適用されます。
この情報を使って CSS を最適化することにより、ブラウザがページを読み込んだ直後に重要なスタイルの処理を開始すると同時に重要でない CSS は先送りにできるようにします。
- カバレッジツールから取得したレポートにある緑色のクラス定義を抽出し、そうしたクラスをページの <head> タグ内の
<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の詳細については、Preload critical assets guide (重要なアセットをプリロードする際のガイド) をご覧ください。linkタグ内のonload属性により、CSS は読み込みが完了した時点で処理されるようになります。- 使用した
onloadハンドラを「null」にしておくと、一部のブラウザーでは、rel 属性を切り替えたときにハンドラを再度呼び出さないようにすることができます。 noscript要素内のスタイルシートへの参照は、JavaScript を実行しないブラウザーのフォールバックとして機能します。
結果のページは、ほとんどのスタイルが非同期に読み込まれる場合でも、前のバージョンと全く同じように見えます。以下は、インライン化されたスタイルと CSS ファイルに対する非同期リクエストを HTML ファイルに表示したものです。
モニター #
DevTools を使用して、最適化されたページに対してもう一度パフォーマンストレースを実行します。
FCP マーカーは、ページが CSS を要求する前に表示されます。つまり、ブラウザーは、CSS が読み込まれるのを待たずにページをレンダリングすることができます。
最後のステップとして、最適化されたページに対して Lighthouse を実行します。
レポートを見れば、FCP ページが 0.2 秒短縮されたことがわかります (20％ も改善しました！)。
Eliminate render-blocking resources という提案は Opportunities セクションから Passed Audits セクションに移動されています。
今度のステップと参考資料 #
本ガイドでは、ページ内の未使用のコードを手動で抽出することにより、重要ではない CSS を延期する方法について学びました。本ガイドを補足する extract critical CSS guide (重要な CSS を抽出するためのガイド) では、重要な CSS を抽出できる人気の高いツールを紹介するほか、コードラボも含まれていますので、実際の動作をご覧いただけます。