CSSミニファイア
CSSファイルを圧縮し、削減量をその場で確認できます。
0元のサイズ
0圧縮後
0%削減量
ブラウザ内で動作します。入力した内容はどこにも送信されません。
- 削減バイト数を表示
- コメントを削除
- アップロードなし
CSSの圧縮方法
- CSSを貼り付けます。
- 統計欄で削減サイズを確認します。
- 圧縮後のCSSをコピーまたはダウンロードします。
削除されるもの
- /* ... */で書かれたコメント
- ルールや宣言の間の空白と改行
- 閉じ中括弧の直前の末尾セミコロン
- cssoが安全に統合できる重複・冗長なルール
- 余分なセミコロンと、宣言が中にない空のルールブロック
一般的なサイズ削減量
| 元の状態 | おおよその削減量 |
|---|---|
| コメント付きの手書きCSS | 20〜30% |
| すでにコンパクトなCSS | 5〜10% |
| プリプロセッサが生成したCSS | 10〜20% |
圧縮すべきとき、すべきでないとき
- 読みやすいスタイルシートの方がデバッグがはるかに速いため、編集中ではなくデプロイ直前に圧縮しましょう。
- すでにgzip配信されていて十分小さいファイルは、追加のビルド手順に見合わないため圧縮を省略しましょう。
圧縮の効果が最も大きい場面
- 多くのページで共有されるスタイルシート。削減したバイト数がページの読み込みごとに積み重なります。
- 統合可能な繰り返しルールが多い、大規模なデザインシステムやコンポーネントライブラリ。
- ビルドパイプラインがなく、手書きのCSSが他の圧縮工程なしにそのまま配信されるサイト。
- ページで実際に使われているユーティリティクラスだけに絞り込んだCSSフレームワーク。
CSSミニファイアのFAQ
CSSはどのくらい小さくなりますか？
通常は10〜30%です。元のファイルにコメントや空白が多ければさらに小さくなり、すでにコンパクトな場合はそれより少なくなります。
圧縮するとページの見た目は変わりますか？
いいえ。圧縮は空白、コメント、冗長な構文を削除するだけです。ページに適用されるルールは変わりません。
重複するルールも統合されますか？
はい、安全に統合できる場合は行われ、空白の削除だけよりもさらにファイルを小さくできます。
元のファイルは残しておくべきですか？
はい。編集用に読みやすいバージョンを残し、圧縮版は本番環境でのみ使いましょう。
どのミニファイアを使っていますか？
複数のバンドラープラグインでも使われているCSSミニファイア、cssoです。単なる空白除去にとどまらず、一部の重複・冗長なルールも統合します。
圧縮したCSSをそのままスタイルシートに貼り付けても安全ですか？
はい、空白を取り除いただけの標準的なCSSです。どのブラウザやビルドツールでも元のCSSと全く同じように読み込まれます。
-webkit-のようなまだ必要なベンダープレフィックスも削除されますか？
いいえ。ベンダープレフィックス付きのプロパティや値はそのまま残ります。圧縮が削除するのは空白、コメント、安全に統合できるルールだけで、CSSが実際に宣言しているプロパティは削除しません。
CSSカスタムプロパティ（変数）はどうなりますか？
--で始まる名前と値を含め、そのまま保持されます。圧縮はカスタムプロパティの名前変更や解決を行いません。