重要なCSSを抽出する
重要なCSSテクニックを使用してレンダリング時間を改善する方法を学びます。
ブラウザは、ページを表示する前にCSSファイルをダウンロードして解析する必要があります。これにより、CSSはレンダリングブロックリソースになります。 CSSファイルが大きい場合、またはネットワークの状態が悪い場合、CSSファイルの要求により、Webページのレンダリングにかかる時間が大幅に長くなる可能性があります。
HTMLドキュメントの<head>で抽出されたスタイルをインライン化すると、これらのスタイルを取り込むために追加の要求を行う必要がなくなります。 CSSの残りの部分は非同期でロードできます。
レンダリング時間を改善すると、特にネットワークの状態が悪い場合に、知覚されるパフォーマンスに大きな違いが生じる可能性があります。モバイルネットワークでは、帯域幅に関係なく、高遅延が問題になります。
First Contentful Paint (FCP) が不十分で、Lighthouse監査で「レンダリングブロックリソースの排除」の可能性が特定された場合は、クリティカルCSSを試してみることをお勧めします。
最初にレンダリングする際の往復処理の数を最小限に抑えるには、最も重要なコンテンツを14 KB (圧縮) 未満に抑えるようにしてください。
この手法で達成できるパフォーマンスへの影響は、Webサイトのタイプによって異なります。一般的に、サイトのCSSが多いほど、インラインCSSの影響が大きくなる可能性があります。
ツールの概要 #
ページのクリティカルCSSを自動的に決定できる多数の優れたツールがあります。この処理を手動で実行するのは非常に大変なので、このようなツールを使用すると便利です。ビューポートの各要素に適用されるスタイルを決定するには、DOM全体を分析する必要があります。
Critical #
Criticalは最も重要なCSSを抽出、縮小、インライン化し、npmモジュールとして提供されています。 Gulp (直接) またはGrunt (プラグインとして) で使用でき、webpackプラグインもあります。
このツールはシンプルで、プロセスで多数の判定を実行します。スタイルシートを指定する必要さえありません。Criticalによって自動的に検出されます。また、複数の画面解像度のクリティカルCSSの抽出もサポートしています。
criticalCSS #
CriticalCSSは、最も重要なCSSを抽出するもう1つのnpmモジュールです。 CLIとしても利用できます。
クリティカルCSSをインライン化して縮小するオプションはありませんが、実際にはクリティカルCSSに属していないルールを強制的に含めることができ、@font-face宣言の包含をさらに細かく制御できます。
Penthouse #
Penthouseは、サイトまたはアプリに多数のスタイルまたはDOMに動的に挿入されるスタイル (Angularアプリで一般的に使用されている) がある場合に適しています。内部的にPuppeteerを使用し、オンラインでホスティングされているバージョンも提供しています。
Penthouseはスタイルシートを自動的に検出しません。クリティカルCSSを生成するHTMLファイルとCSSファイルを指定する必要があります。利点は、多数のジョブを並列で実行できることです。