データ

CSS 圧縮

訪問者がダウンロードする CSS の 1 バイトは、ページが描画される前に待たされる 1 バイトです。そして多くのスタイルシートには、ビルドが片づけるべき余白が残っています。インデントやコメントから、長い書き方の色、まとめられるはずのルールまで。このツールは貼り付け一回でそれをすべて取り除きます。スタイルを貼り込むと、効果が等価で最小サイズの CSS が返り、元、圧縮後、gzip の 3 つのサイズを並べて表示するので、どれだけ減ったかが一目で分かります。空白を雑に切るのではなく CSS を本物の構文木として読んでから処理するため、出力の挙動はソースと完全に同じで、読み取れなかった箇所は位置とともに一覧されます。黙って捨てられることはなく、すべてブラウザー内で完結します。

517 B
削減 0%
圧縮エンジンを読み込み中
8%
圧縮エンジンは一度だけのダウンロードで、この訪問の間はキャッシュされます。
オプション

概要

圧縮ツールが役に立つのは、出力を信頼でき、かつ効果が見えるときだけです。このツールはまさにその両方を軸に作られています。本番に出せる正確な圧縮と、その価値を示す数字です。

  1. 01

    解析器ベースの圧縮

    何かを削除する前にスタイルシートを本物の構文木として読み込むので、コメントや空白や冗長な記号が消えても意味は同じまま。珍しいセレクターや data URI で壊れる脆い文字列置換はありません。

  2. 02

    より賢い値と色

    安全な範囲で長い値を畳みます。6 桁の十六進カラーは 3 桁になり、長さゼロは単位を落とし、末尾のセミコロンや先頭のゼロは消えます。大きなファイルでは積み重なって効く小さな最適化です。

  3. 03

    任意のルール再構成

    再構成を有効にすると重複セレクターをまとめ、隣接ルールを結合し、宣言を並べ替えてサイズを減らせます。出力をソースの順に行ごと合わせたいときはオフにします。

  4. 04

    黙って消えるものはありません

    解析器は構文エラーに出会うと読めなかった部分を捨てて先へ進みがちで、結果として小さなファイルだけが返り、警告は何もありません。ここではスキップのたびに行と列を一覧します。ネストで書かれたスタイルシートも、ネストしたルールを削るのではなく指摘します。

  5. 05

    信頼できるサイズ内訳

    入力と結果のそれぞれにバイト数と gzip サイズが付き、その隣に正確な削減率が出るので、同じ条件で比べられます。実際に回線を渡る大きさと一致するのは gzip の組み合わせです。

  6. 06

    コピー、ダウンロード、アップロード

    クリップボードから貼り付け、ディスクからファイルを読み込み、結果をコピーするか min.css ファイルとして保存します。一連の流れは数秒で、サーバーには触れません。

使い方

読みやすいスタイルシートを本番投入できる最小版へ数ステップで。削減量を常に目の前に出しながら進めます。

  1. 01

    CSS を入力パネルに貼り付けるか、アップロードでディスクからファイルを読み込みます。

  2. 02

    オプションを選びます。最小出力には再構成をオンのまま、ルール順を保ちたいときはオフに、バナーを出荷するならライセンスコメントを保持します。

  3. 03

    2 つのパネルの見出しでサイズを比べます。左右それぞれにバイト数と gzip サイズが並び、その隣に削減率が出ます。

  4. 04

    圧縮後の CSS をコピーするか min.css ファイルとしてダウンロードし、本番スタイルを配信するページやビルド工程に組み込みます。

詳細

出力を安心して出荷でき、すぐ信頼できる細部です。

  • 文字置換ではなく完全な構文木の上で動く、成熟した CSS オプティマイザー csso を採用しています。
  • gzip サイズはブラウザー内蔵の圧縮で測定するので、実際のサーバーが送る大きさを反映します。
  • 入力の手が止まった直後に圧縮が走ります。押すボタンも、サーバーとの往復もありません。
  • 解析器が読めなかった箇所は、行と列と理由を添えて一覧されます。出力から消えてなくなることはありません。
  • アップロードもログもありません。貼り付けた CSS は未公開のものもブラウザー内に留まり、タブを閉じれば消えます。

活用シーン

CSS を本質まで削ることが報われる場面です。

  1. ページを速くする

    小さいスタイルシートはブラウザーへ早く届いて描画のブロックを解くので、First Contentful Paint や検索エンジンが重視する Core Web Vitals に効きます。

  2. バンドラーなしのビルド工程

    バンドラーを動かしていない静的サイト、ランディングページ、メールテンプレートでは、CSS をここに貼ればパイプラインと同じ圧縮が得られます。

  3. クリティカル CSS のインライン化

    レンダリングをブロックするリクエストを避けるためにページ上部のスタイルをインライン化するとき、1 バイトが重要で、埋め込むなら圧縮版が唯一まともな形です。

  4. 生成スタイルシートの削減

    ベンダー CSS やツール生成の出力は未圧縮で届くことがあります。ユーザーに届く前にここを通してバイトを取り戻しましょう。

関連情報

スクリプトも同じようにしたいですか。これをJavaScript 圧縮と組み合わせてください。縮めるのではなくコードを展開して整えたいときは、SQL フォーマッターが逆方向の整形を行います。同じスタイルシートを逆向きに扱う場合 —— 一行に詰まったものを人が読める形に戻す —— それを行うのが CSS フォーマッター。

CSS を圧縮すると実際に何が起きるのか

圧縮は難読化ではなく、gzip 圧縮とも別物です。描画結果を変えないまま、ブラウザーが必要としない文字を取り除きます。何が消え、なぜそれが安全なのかを見てみましょう。

  1. 空白と整形

    CSS を読みやすくするインデント、改行、空白はブラウザーには無意味です。圧縮はそれらを、各閉じ波括弧の直前の最後のセミコロンも含めて取り除きます。解析器はそれらを必要としないからです。

  2. コメント

    ソースのコメントは人のために書かれ、描画ページには決して届かないので、まるごと削除されます。唯一の例外がライセンスバナーで、求めればツールが慣例として残します。

  3. より短い等価な値

    多くの値には同じ意味でより短い書き方があります。白の十六進カラーは 6 桁から 3 桁になり、0 ピクセルの長さは素のゼロになり、小数の先頭のゼロも落ちます。慎重な圧縮器は結果が同一のときだけ適用します。

  4. まとめと再構成

    2 つのセレクターが宣言を共有する、または同じセレクターが二度現れるとき、ルールはまとめられ、近い宣言は並べ替えられます。さらにバイトを節約できますが、ソースの並びが変わるため任意のままにしています。

  5. なぜ gzip が肝心な数字なのか

    サーバーは CSS を gzip や brotli で圧縮して送り、それらは繰り返しの空白をすでに畳みます。圧縮は依然有効で、圧縮では扱えない内容を削り、圧縮器により綺麗な入力を渡します。ただし効果は常に生のバイトではなく gzip サイズで判断してください。

  6. 本番は圧縮、ソースは読みやすく

    圧縮後の CSS は編集が辛いので、リポジトリではなくビルド成果物に属します。展開版を書いてコミットし、圧縮は出荷直前の最後の一手として行います。

使い方のヒント

圧縮後の CSS を小さく、かつ意外なトラブルなく保つ習慣です。

  • 圧縮はビルドの最後の一手として行い、その結果をデプロイします。圧縮済み CSS を手で編集したり、ソースとしてコミットしたりしないでください。
  • 効果は gzip サイズで判断します。それがサーバーの実際の転送量で、大きな生の削減も圧縮をかけると僅かになることがあります。
  • 出荷前にスキップ一覧を確認します。そこに並ぶ記述は解析器が捨てたもので、ブラウザーも同じように無視します。多くはソース側で直す価値のある打ち間違いです。
  • 本番では再構成をオンに、ただし出力を差分で見る、またはセレクターと順序をソースに合わせたいときはオフにします。
  • 圧縮ファイルは gzip または brotli を有効にし、長いキャッシュ期間で配信します。圧縮と転送圧縮は重ね掛けで、互いの代わりにはなりません。
  • サードパーティ CSS をまとめるときは対応オプションでライセンスバナーを残し、求められる条件の範囲で出荷します。

制限事項

このツールがすること、そして他の工程に任せることです。

  • 単一の正当な CSS スタイルシートを圧縮します。読み込まれたファイルのバンドル、URL の解決、他ファイルへの参照の追跡は行いません。
  • ネストには対応しません。エンジンは構文が生まれる前に書かれており、ネストしたブロックを削除してしまうため、ネストのあるスタイルシートは圧縮せず、最初のネスト位置を示して止まります。
  • ベンダープレフィックスの付与、現代構文のトランスパイル、古いブラウザー向けのダウンレベルはしません。必要なら Autoprefixer や Lightning CSS と併用してください。
  • Sass や Less などのプリプロセッサで書いたスタイルや、@apply のようなフレームワークの指令を含むスタイルは、先に素の CSS へコンパイルしてください。見つけた最初の 1 か所を示し、その周りを圧縮しようとはしません。
  • 解析器が読めない記述は推測せずスキップします。ブラウザーが無視するのと同じ扱いで、スキップした位置はすべて示されるため、何が残らなかったかを確認できます。
  • ファイルはブラウザー内で読み込むため、アップロードは 2 MB までです。それを超えるスタイルシートはビルド工程に向いています。

よくある質問

CSS の圧縮、それが変えるもの、いつ使うかについてのよくある質問です。

圧縮で CSS の描画は変わりますか。

変わりません。圧縮はブラウザーが必要としない文字、たとえば空白、コメント、余分なセミコロンを取り除き、値を完全に同じ意味のより短い形に書き換えるだけで、描画結果は同一です。任意の再構成も挙動を保ち、ルールの内部的な構成方法を変えるだけです。

圧縮と gzip の違いは何ですか。

両者は協力して働きます。圧縮は CSS テキスト自体を編集し、圧縮器には不要と分からない内容を削ります。gzip や brotli は送るものを圧縮し、回線上で繰り返しを畳みます。両方が望ましく、まず圧縮で最も綺麗な入力を作り、サーバーに転送用の圧縮を任せます。両方のパネルに gzip サイズが出るので、そのまま比べられます。

私の CSS はどれくらい小さくなりますか。

ソースの書き方次第です。コメントが多い、整形が緩い、繰り返しが多いスタイルシートは生サイズで三分の一から半分ほど落ちることもあり、すでに引き締まった CSS は僅かしか減りません。gzip が絡むと割合は縮みます。圧縮がすでに空白の多くを取り戻しているからで、だからこそ両側の gzip の比較が正直な数字になります。

ネストを使った CSS も圧縮できますか。

今のところできません。このツールのエンジンはネストが CSS に入る前に書かれており、ネストしたブロックを黙って削除して、ルールがひそかに欠けたスタイルシートを返してしまいます。それを渡す代わりに、ネストを検出して最初の位置を示します。ネストを展開するか、ネストに対応したビルドツールでそのファイルを圧縮してください。

CSS に構文エラーがあるとどうなりますか。

解析器は読めない部分をスキップして先へ進みます。壊れた宣言に対してブラウザーがすることと同じです。違いは、スキップのたびに行、列、理由が一覧されることで、コロンの書き忘れは消えたルールではなく一件の注記として現れます。何も残らなかった場合は、空のパネルではなくその旨を伝えます。そもそも素の CSS ではない入力、たとえば Sass や @apply を使ったファイルは、その周りを圧縮するのではなく、先にビルドが必要だと伝えます。

圧縮後の CSS をリポジトリにコミットすべきですか。

いいえ。圧縮後の CSS はビルド成果物でありソースではありません。あなたとチームが実際に編集する読みやすい展開版をコミットし、圧縮ファイルは配信直前の最後の工程で生成します。圧縮出力をコミットするとレビューが読みにくく、マージが苦痛になります。

変数、アニメーション、メディアクエリは壊れますか。

壊れません。カスタムプロパティ、キーフレーム、メディアとサポートのクエリ、カスケードレイヤー、コンテナクエリ、calc 式は読み取られ保持されます。圧縮は構文を理解するので、正当な構文はそのまま残ります。最新の CSS でエンジンが読めないのはネストだけで、その場合は失う前に停止します。

私の CSS はどこかにアップロードされますか。

いいえ。すべてブラウザー内で動きます。貼り付けた CSS、アップロードしたファイル、結果はローカルで処理され、送信も保存もされず、タブを閉じれば消えます。非公開や未公開のスタイルも安全です。

関連ツール

データとフォーマットのツール群の続きへ。