CSS 最小化の仕組み
ミニファイアは、保護領域（文字列リテラルと url() の値）と、縮約・除去が安全な編集可能空白を区別するステートアウェアなトークナイザーでスタイルシートを走査します。
- 文字列と URL の保護. 他の変換より先に、トークナイザーはすべての引用符付き文字列（"…" または '…'）とすべての url(…) 引数を識別してそのまま退避します。後続のパスはこれらのバイトに触れないため、スペースを含む background-image URL や句読点を含む content プロパティは正確に保持されます。
- コメントの除去. トグルがオンのとき、
/* … */ブロックが削除されます。ライセンスコメントトグルもオンにすると、/*! … */ブロックが残り、MIT・Apache・BSD のライセンスヘッダーがそれらのライセンスの要件どおり出力に残ります。 - 空白の縮約. スペース・タブ・改行の連続がすべて 1 つのスペースに縮約され、CSS の構造文字
{、}、;、:、,周辺の空白が完全に除去されます。セレクターと値リストは、ブラウザーのパーサーが読み取るのと同じ形にリフローされます。 - 値の最適化. オプションのパスにより、16進カラーコードを小文字化し、6桁の16進チャンネルのペアを3桁の短縮形に縮約し（
#aabbcc→#abc）、ゼロ値から単位を除去します（0px→0）。ゼロ単位のパスは、単位が重要なtransform()呼び出し内の値をスキップします。 - 節約バイト数のレポート. 元のテキストと最小化後のテキストはいずれも
new TextEncoder().encode(…).byteLengthで計測されます——CDN や HTTP サーバーが回線上で観測するのと同じ UTF-8 バイト数です。メトリクス欄は元のサイズ、最小化後のサイズ、節約バイト数、節約率を表示します。
CSS を最小化する理由
- レンダリングブロックの読み込みを高速化. ブラウザーは CSS のパースが完了するまで 1 ピクセルも描画しません。スタイルシートが 30% 削減されると、そのブロックが短縮され、First Contentful Paint が向上し、Lighthouse パフォーマンススコアに直接反映されます。
- CDN エグレス費用の削減. CloudFront、Cloudflare、Fastly はギガバイト単位のエグレスを課金します。毎ページビューで配信されるスタイルシートを 20% 削減すると、月間トラフィックが数百万ビューを超えた時点で実際の費用削減として積み上がります。
- 埋め込みとメール CSS の縮小. トランザクションメールのテンプレートは Outlook や Gmail のレンダリングの癖に対応するため CSS をインライン化しており、余分なバイトが Gmail の 102 KB クリップしきい値に近づけます。インライン化前に最小化することでメッセージを上限内に収められます。
- ビルドツール依存なし. 単発の作業、ビルドパイプラインのないレガシーリポジトリ、エアギャップ環境では、Node.js ツールチェーンを用意できないことがあります。PostCSS や cssnano などをインストールせずに、ここでパスを実行できます。
主な用途
CSS の最小化は、ほぼすべてのフロントエンドビルドパイプラインの末尾と、バイト数が重要なランタイムコンテキストに現れます。
- 本番ビルドパイプライン：Webpack、Vite、Rollup、Parcel はいずれも本番モードのデフォルトで CSS 最小化ステップを含んでいます。コミット前にここでパスを実行すると、フルビルドをトリガーせずに出力を検証できます。
<style>タグへの CSS 埋め込み：HTML ドキュメントにクリティカル CSS をインライン化するサーバーレンダリングフレームワークは、スタンドアロンのスタイルシートと同じバイト削減の恩恵を受け、インライン CSS が小さいほど Time to First Byte が短縮されます。- トランザクションおよびマーケティングメール：メール HTML はすべての CSS をインライン化するため、スタイルシートの 1 KB ごとがメッセージ総サイズに加算されます。インライン化前に最小化することで、メッセージを ESP のサイズ上限内に十分抑えられます。
実践的な例
2スペースインデント、セレクター間に空行、先頭にライセンスコメントブロック、#FFFFFF のような冗長な16進カラーや margin: 0px のようなゼロパディングマージンを含む 1 KB のルールセットを貼り付けてください。すべてのオプションをオンにすると、出力は約 600 バイトに縮まります——40% の節約——レンダリングされたページはソースとバイト単位で同一に見えます。
最小化すると CSS の動作が変わりますか？
デフォルトのトグル設定では変わりません。ミニファイアは CSS パーサーがすでに捨てるバイトのみを除去します——空白、コメント、任意の末尾セミコロン——そして単位が重要な transform() の内部はスキップします。すべてのセレクター・プロパティ・値は保持されます。
SCSS や LESS にも対応していますか？
プレーン CSS にコンパイルした後であれば対応しています。SCSS・LESS の構文（変数、ネスト、ミックスイン、& 親セレクター）は有効な CSS ではなく、ミニファイアが破損させます。プリプロセッサのソースをまずコンパイルしてから、コンパイル後の出力をここに貼り付けてください。
なぜライセンスコメントが除去されるのですか？
「コメントを削除」はデフォルトでオンになっており、すべての /* … */ ブロックを削除します。/*! で始まるブロックを保持するには「/*! ライセンスコメントを保持」を有効にしてください。MIT、Apache、BSD はいずれも再配布する CSS に著作権ヘッダーを含めることを要求しています。
どれくらい節約できますか？
手書き CSS は通常 15〜35% 削減できます。コメントが多く深くインデントされたカラーリテラルの多いファイルは 40% に達することもあります。Sass や CSS-in-JS からコンパイルされた出力はすでに部分的に最小化されていることが多く、典型的に 5〜15% の節約にとどまります。
ブラウザータブで CSS 最小化を実行すれば、Node.js ツールチェーンを完全にスキップできます。上にスタイルシートを貼り付け、パスの積極度に合わせてオプションを切り替え、出力をコピーするか .min.css としてダウンロードしてください。アップロードなし、アカウント不要、ベンダーライブラリ不要。