CSS の重要な手法を使用してレンダリング時間を改善する方法を学びます。
ブラウザはページを表示する前に CSS ファイルをダウンロードして解析する必要があります。そのため、CSS はレンダリングをブロックするリソースになります。CSS ファイルのサイズが大きい場合やネットワークの状態が良好でない場合、CSS ファイルのリクエストによって、ウェブページの表示時間が大幅に長くなる可能性があります。
抽出したスタイルを HTML ドキュメントの <head>
でインライン化すると、スタイルを取得するために追加のリクエストを送信する必要がなくなります。残りの CSS は非同期で読み込むことができます。
特にネットワーク状況が良くない場合、レンダリング時間を改善することで、体感できるパフォーマンスが大きく変わる可能性があります。モバイル ネットワークでは、帯域幅に関係なく高レイテンシが問題です。
First Contentful Paint(FCP)の品質が低く、Lighthouse の監査で「レンダリング ブロック リソースの排除」の可能性がある場合は、クリティカルな CSS を試すことをおすすめします。
最初のレンダリングまでのラウンドトリップ回数を最小限に抑えるため、スクロールせずに見える範囲のコンテンツは 14 KB(圧縮時)以下にします。
この手法で達成できるパフォーマンスへの影響は、ウェブサイトの種類によって異なります。一般的に、サイトに含まれる CSS が多いほど、インライン CSS の効果は高くなります。
ツールの概要
ページに重要な CSS を自動的に判別できる優れたツールは数多くあります。これは手動で行うのは面倒なプロセスだからです。ビューポート内の各要素に適用されるスタイルを決定するには、DOM 全体の分析が必要です。
重大
Critical で、スクロールせずに見える範囲の CSS を抽出、圧縮、インライン化します。npm モジュールとして利用できます。Gulp で直接使用することも、Grunt でpluginとして使用することもできます。また、webpack プラグインもあります。
多くの考える手間が省けるシンプルなツールです。スタイルシートを指定する必要もないため、Critical が自動的に検出します。また、複数の画面解像度に対応する重要な CSS の抽出もサポートしています。
criticalCSS
CriticalCSS も、スクロールせずに見える範囲の CSS を抽出する npm モジュールです。CLI でも利用できます。
重要な CSS をインライン化して圧縮するオプションはありませんが、実際には重要な CSS に属していないルールを強制的に追加でき、@font-face
宣言を含めるかどうかをより細かく制御できます。
ペントハウス
Penthouse は、サイトまたはアプリに多数のスタイルやスタイルがあり、それらが DOM に動的に挿入される場合に適しています(Angular アプリで一般的です)。内部で Puppeteer が使用されており、オンラインでホストされるバージョンもあります。
Penthouse はスタイルシートを自動的に検出しないため、重要な CSS を生成する HTML ファイルと CSS ファイルを指定する必要があります。この方法の利点は、多数のジョブを並行して実行できることです。