Lighthouse レポートの [最適化] セクションには、圧縮されていないすべての CSS ファイルと、圧縮した場合に削減できる可能性がある容量を KiB 単位で一覧表示します。
CSS ファイルを圧縮することでパフォーマンスが向上する仕組み
CSS ファイルを最小化すると、ページ読み込みのパフォーマンスを向上させることができます。 CSS ファイルは多くの場合、必要以上に大きくなります。次に例を示します。
/* Header background should match brand colors. */
h1 {
background-color: #000000;
}
h2 {
background-color: #000000;
}
次のように短縮できます。
h1,
h2 {
background-color: #000000;
}
ブラウザの観点から見ると、この 2 つのコードサンプルは機能的には同じですが、2 番目の例の方が使用するバイト数が少なくなります。 ミニファイアで空白文字を削除することで、バイト効率をさらに向上させることができます。
h1,
h2 {
background-color: #000000;
}
一部の圧縮ツールは、バイトを最小化するために巧妙な手法を採用しています。たとえば、色値 #000000 は、省略形である #000 にさらに短縮できます。
Lighthouse では、CSS で検出されたコメントと空白文字に基づいて、削減可能な費用の見積もりが表示されます。これは控えめな推定値です。前述のように、圧縮ツールは、優れた最適化（たとえば、#000000 を #000 に縮小）を実行してファイルサイズをさらに削減できます。そのため、軽量化ツールを使用すると、Lighthouse で報告される費用よりも費用を節約できる可能性があります。
CSS ミニファイアを使用して CSS コードを圧縮する
更新頻度の低い小規模なサイトでは、オンライン サービスを利用して手動でファイルを圧縮できる可能性があります。サービスの UI に CSS を貼り付けると、圧縮されたコードが返されます。
プロのデベロッパーの場合は、更新されたコードをデプロイする前に CSS を自動的に圧縮する自動ワークフローを設定することをおすすめします。通常、Gulp や Webpack などのビルドツールを使用して行います。
CSS コードを圧縮する方法については、CSS を最小化するをご覧ください。
スタック固有のガイダンス
Drupal
[Administration] > [Configuration] > [Development] で [Aggregate CSS files] を有効にします。また、追加のモジュールを使用して、より高度な集計オプションを設定し、CSS スタイルを連結、軽量化、圧縮してサイトを高速化することもできます。
Joomla
多くの Joomla 拡張機能を使用すると、CSS スタイルを連結、軽量化、圧縮して、サイトを高速化できます。この機能を提供するテンプレートも用意されています。
Magento
ストアのデベロッパー設定で、[Minify CSS Files] オプションを有効にします。
対応
ビルドシステムが CSS ファイルを自動的に圧縮する場合は、アプリケーションの本番環境ビルドをデプロイしてください。これは React Developer Tools 拡張機能で確認できます。
WordPress
さまざまな WordPress プラグインは、スタイルを連結、軽量化、圧縮することで、サイトを高速化できます。可能であれば、事前にビルドプロセスを使用してこの圧縮を行うこともできます。