CSS 圧縮
訪問者がダウンロードする CSS の 1 バイトは、ページが描画される前に待たされる 1 バイトです。そして多くのスタイルシートには、ビルドが片づけるべき余白が残っています。インデントやコメントから、長い書き方の色、まとめられるはずのルールまで。このツールは貼り付け一回でそれをすべて取り除きます。スタイルを貼り込むと、効果が等価で最小サイズの CSS が返り、元、圧縮後、gzip の 3 つのサイズを並べて表示するので、どれだけ減ったかが一目で分かります。空白を雑に切るのではなく CSS を本物の構文木として読んでから処理するため、出力の挙動はソースと完全に同じで、すべてブラウザー内で完結します。
- スタイルシートを本物の構文木として読んでから処理するので、珍しいセレクターで壊れることなく、圧縮後の挙動がソースと完全に同じになります
- 元、圧縮後、gzip の 3 つのサイズを並べて表示するので、生のバイト数ではなくサーバーが実際に送る大きさで結果を判断できます
- 重複セレクターをまとめ宣言を並べ替えてより小さくできますが、きれいな差分が必要なときは構造をそのまま保てます
- すべてブラウザー内で動くので、貼り付けた CSS は未公開のものも端末に留まり、タブを閉じれば残りません
概要
圧縮ツールが役に立つのは、出力を信頼でき、かつ効果が見えるときだけです。このツールはまさにその両方を軸に作られています。本番に出せる正確な圧縮と、その価値を示す数字です。
- 01
解析器ベースの圧縮
何かを削除する前にスタイルシートを本物の構文木として読み込むので、コメントや空白や冗長な記号が消えても意味は同じまま。珍しいセレクターや data URI で壊れる脆い文字列置換はありません。
- 02
より賢い値と色
安全な範囲で長い値を畳みます。6 桁の十六進カラーは 3 桁になり、長さゼロは単位を落とし、末尾のセミコロンや先頭のゼロは消えます。大きなファイルでは積み重なって効く小さな最適化です。
- 03
任意のルール再構成
再構成を有効にすると重複セレクターをまとめ、隣接ルールを結合し、宣言を並べ替えてサイズを減らせます。出力をソースの順に行ごと合わせたいときはオフにします。
- 04
ライセンスコメントの保持
ライセンスや著作表示が求めるバナーは残し、それ以外のコメントはすべて削除できるので、誰も読まないメモを出荷せずに条件を守れます。
- 05
信頼できるサイズ内訳
元、圧縮後、gzip のサイズが入力に合わせて更新され、その隣に正確な削減率が出ます。gzip こそ実際に回線を渡る大きさと一致する数字です。
- 06
コピー、ダウンロード、アップロード
クリップボードから貼り付け、ディスクからファイルを読み込み、結果をコピーするか min.css ファイルとして保存します。一連の流れは数秒で、サーバーには触れません。
使い方
読みやすいスタイルシートを本番投入できる最小版へ数ステップで。削減量を常に目の前に出しながら進めます。
- 01
CSS を入力パネルに貼り付けるか、アップロードでディスクからファイルを読み込みます。
- 02
オプションを選びます。最小出力には再構成をオンのまま、ルール順を保ちたいときはオフに、バナーを出荷するならライセンスコメントを保持します。
- 03
オプションの下の内訳で効果を確認します。元、圧縮後、gzip のサイズと削減率が並びます。
- 04
圧縮後の CSS をコピーするか min.css ファイルとしてダウンロードし、本番スタイルを配信するページやビルド工程に組み込みます。
詳細
出力を安心して出荷でき、すぐ信頼できる細部です。
- 文字置換ではなく完全な構文木の上で動く、成熟した CSS オプティマイザー csso を採用しています。
- gzip サイズはブラウザー内蔵の圧縮で測定するので、実際のサーバーが送る大きさを反映します。
- 圧縮は入力に合わせて走り、押すボタンも、編集から結果表示までの遅延もありません。
- 構文エラーはメッセージとともにその場で表示され、壊れた、または空の出力を黙って出すことはありません。
- アップロードもログもありません。貼り付けた CSS は未公開のものもブラウザー内に留まり、タブを閉じれば消えます。
活用シーン
CSS を本質まで削ることが報われる場面です。
-
ページを速くする
小さいスタイルシートはブラウザーへ早く届いて描画のブロックを解くので、First Contentful Paint や検索エンジンが重視する Core Web Vitals に効きます。
-
バンドラーなしのビルド工程
バンドラーを動かしていない静的サイト、ランディングページ、メールテンプレートでは、CSS をここに貼ればパイプラインと同じ圧縮が得られます。
-
クリティカル CSS のインライン化
レンダリングをブロックするリクエストを避けるためにページ上部のスタイルをインライン化するとき、1 バイトが重要で、埋め込むなら圧縮版が唯一まともな形です。
-
生成スタイルシートの削減
ベンダー CSS やツール生成の出力は未圧縮で届くことがあります。ユーザーに届く前にここを通してバイトを取り戻しましょう。
関連情報
スクリプトも同じようにしたいですか。これをJavaScript 圧縮 と組み合わせてください。縮めるのではなくコードを展開して整えたいときは、SQL フォーマッター が逆方向の整形を行います。
CSS を圧縮すると実際に何が起きるのか
圧縮は難読化ではなく、gzip 圧縮とも別物です。描画結果を変えないまま、ブラウザーが必要としない文字を取り除きます。何が消え、なぜそれが安全なのかを見てみましょう。
-
空白と整形
CSS を読みやすくするインデント、改行、空白はブラウザーには無意味です。圧縮はそれらを、各閉じ波括弧の直前の最後のセミコロンも含めて取り除きます。解析器はそれらを必要としないからです。
-
コメント
ソースのコメントは人のために書かれ、描画ページには決して届かないので、まるごと削除されます。唯一の例外がライセンスバナーで、求めればツールが慣例として残します。
-
より短い等価な値
多くの値には同じ意味でより短い書き方があります。白の十六進カラーは 6 桁から 3 桁になり、0 ピクセルの長さは素のゼロになり、小数の先頭のゼロも落ちます。慎重な圧縮器は結果が同一のときだけ適用します。
-
まとめと再構成
2 つのセレクターが宣言を共有する、または同じセレクターが二度現れるとき、ルールはまとめられ、近い宣言は並べ替えられます。さらにバイトを節約できますが、ソースの並びが変わるため任意のままにしています。
-
なぜ gzip が肝心な数字なのか
サーバーは CSS を gzip や brotli で圧縮して送り、それらは繰り返しの空白をすでに畳みます。圧縮は依然有効で、圧縮では扱えない内容を削り、圧縮器により綺麗な入力を渡します。ただし効果は常に生のバイトではなく gzip サイズで判断してください。
-
本番は圧縮、ソースは読みやすく
圧縮後の CSS は編集が辛いので、リポジトリではなくビルド成果物に属します。展開版を書いてコミットし、圧縮は出荷直前の最後の一手として行います。
使い方のヒント
圧縮後の CSS を小さく、かつ意外なトラブルなく保つ習慣です。
- 圧縮はビルドの最後の一手として行い、その結果をデプロイします。圧縮済み CSS を手で編集したり、ソースとしてコミットしたりしないでください。
- 効果は gzip サイズで判断します。それがサーバーの実際の転送量で、大きな生の削減も圧縮をかけると僅かになることがあります。
- 本番では再構成をオンに、ただし出力を差分で見る、またはセレクターと順序をソースに合わせたいときはオフにします。
- 圧縮ファイルは gzip または brotli を有効にし、長いキャッシュ期間で配信します。圧縮と転送圧縮は重ね掛けで、互いの代わりにはなりません。
- サードパーティ CSS をまとめるときは対応オプションでライセンスバナーを残し、求められる条件の範囲で出荷します。
制限事項
このツールがすること、そして他の工程に任せることです。
- 単一の正当な CSS スタイルシートを圧縮します。読み込まれたファイルのバンドル、URL の解決、他ファイルへの参照の追跡は行いません。
- ベンダープレフィックスの付与、現代構文のトランスパイル、古いブラウザー向けのダウンレベルはしません。必要なら Autoprefixer や Lightning CSS と併用してください。
- Sass や Less などのプリプロセッサで書いたスタイルは先に素の CSS へコンパイルしてください。ここでは標準 CSS のみを理解します。
- 構文エラーは圧縮を止めて報告し、推測で回避しません。ひどく壊れた入力は部分的な出力を生みません。
よくある質問
CSS の圧縮、それが変えるもの、いつ使うかについてのよくある質問です。
圧縮で CSS の描画は変わりますか。
変わりません。圧縮はブラウザーが必要としない文字、たとえば空白、コメント、余分なセミコロンを取り除き、値を完全に同じ意味のより短い形に書き換えるだけで、描画結果は同一です。任意の再構成も挙動を保ち、ルールの内部的な構成方法を変えるだけです。
圧縮と gzip の違いは何ですか。
両者は協力して働きます。圧縮は CSS テキスト自体を編集し、圧縮器には不要と分からない内容を削ります。gzip や brotli は送るものを圧縮し、回線上で繰り返しを畳みます。両方が望ましく、まず圧縮で最も綺麗な入力を作り、サーバーに転送用の圧縮を任せます。本当の効果はここに出る gzip の数字で測ってください。
私の CSS はどれくらい小さくなりますか。
ソースの書き方次第です。コメントが多い、整形が緩い、繰り返しが多いスタイルシートは生サイズで三分の一から半分ほど落ちることもあり、すでに引き締まった CSS は僅かしか減りません。gzip が絡むと割合は縮みます。圧縮がすでに空白の多くを取り戻しているからで、これが gzip の数字が正直な理由です。
圧縮後の CSS をリポジトリにコミットすべきですか。
いいえ。圧縮後の CSS はビルド成果物でありソースではありません。あなたとチームが実際に編集する読みやすい展開版をコミットし、圧縮ファイルは配信直前の最後の工程で生成します。圧縮出力をコミットするとレビューが読みにくく、マージが苦痛になります。
変数、アニメーション、メディアクエリは壊れますか。
壊れません。カスタムプロパティ、キーフレーム、メディアとサポートのクエリ、calc 式、その他の現代 CSS は読み取られ保持されます。圧縮は構文を理解するので、正当な構文はそのまま残ります。
ここで Sass や Less を圧縮できますか。
直接はできません。このツールは標準 CSS を扱います。先に Sass や Less を素の CSS へコンパイルし、多くの環境はビルドで行いますが、その出力をここに貼るかアップロードして圧縮してください。
私の CSS はどこかにアップロードされますか。
いいえ。すべてブラウザー内で動きます。貼り付けた CSS、アップロードしたファイル、結果はローカルで処理され、送信も保存もされず、タブを閉じれば消えます。非公開や未公開のスタイルも安全です。