CSSの圧縮 — スタイルシートのファイルサイズ最適化

CSSの圧縮の仕組み

CSSの圧縮は、ブラウザがルールを解釈するために必要のない文字を除去してスタイルシートを圧縮します。一般的なCSS圧縮ツールは、gzip/Brotli圧縮前にファイルサイズを**30-50%**削減します。

除去されるもの

/* 圧縮前 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* コンテンツを縦方向に中央揃え */
  justify-content: center;
  padding: 16px 16px 16px 16px;
  margin: 0px;
  background-color: #ffffff;
}

圧縮後：

.container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;margin:0;background-color:#fff}

主な最適化

1. 空白の除去 — セレクター、プロパティ、値の間のスペース、タブ、改行、インデントが削除されます。
2. コメントの除去 — すべての/* */コメントが削除されます（/*! */ライセンスコメントはオプションで保持可能）。
3. ショートハンドへの統合 — padding: 16px 16px 16px 16pxがpadding: 16pxになります。
4. ゼロの単位除去 — 0pxが0になります（ゼロ値の単位は不要）。
5. カラーの短縮 — #ffffffが#fffに、rgb(255, 0, 0)がredになります。
6. 冗長な宣言の除去 — 同じプロパティが1つのルール内で2回出現する場合、最後の値のみ保持されます。
7. セレクターの結合 — 同一の宣言を持つルールが統合されます。

主要なCSS圧縮ツール

• cssnano — プラグイン可能なプリセットを持つ最も広く使用されているPostCSSベースのCSSオプティマイザー。
• esbuild — JavaScriptバンドルと並行してCSSの圧縮を処理します。
• Lightning CSS（旧Parcel CSS） — Rustで記述され、非常に高速で、ブラウザターゲティング機能を内蔵。
• clean-css — 広範な最適化オプションを持つ成熟したNode.jsライブラリ。

高度な最適化

一部の圧縮ツールは以下も実行します：

• 未使用のat-ruleの除去（空の@mediaブロック、重複した@import）
• 値の正規化（boldを700に、normalを400に）
• 隣接するルールの統合（セレクターが一致する場合）

圧縮ツールにできないこと

CSS圧縮ツールは未使用のCSSルールを除去しません。それにはPurgeCSSやTailwindのJITコンパイラのような別のツールが必要です。