CSS を縮小する

Lighthouse レポートの [最適化] セクションには、 圧縮されていないすべての CSS ファイル キビバイト（KiB）単位の削減見込み 圧縮した場合は次のようになります。

Lighthouse Minify CSS 監査のスクリーンショット

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 コードを圧縮する

更新頻度の低い小規模サイトでは オンラインサービスを利用して手動でファイルを圧縮できるでしょう CSS をサービスの UI に貼り付けると、圧縮されたコードが返されます。

プロのデベロッパーの場合 CSS を自動的に圧縮する自動ワークフローを 行うことをおすすめします。 これは通常、Gulp や Webpack などのビルドツールを使用して実現します。

CSS コードを圧縮する方法については、CSS を圧縮するをご覧ください。

スタック固有のガイダンス

Drupal

[Administration] > [Aggregate CSS files] を有効にします。設定 > 開発環境。より高度な集計オプションも構成できる 追加のモジュールを使用する CSS を連結、圧縮、圧縮して、サイトを高速化する あります。

Joomla

多数の Joomla 拡張機能 CSS を連結、圧縮、圧縮して、サイトを高速化できます あります。この機能を提供するテンプレートもあります。

Magento

[CSS ファイルを最小化] オプションを有効にします。 ストアの [デベロッパー設定] で管理できます。

対応

ビルドシステムで CSS ファイルが自動的に圧縮される場合は、 本番環境ビルドのデプロイ 説明します。これは React Developer Tools で確認できます あります。

WordPress

さまざまな WordPress プラグインを使用すると、 スタイルを結合、圧縮、圧縮してその他のおすすめ できる必要があります。

リソース