CSS ミニファイア オンライン: スタイルシートを壊さずに縮小する

初めて実際に測定した私たちのスタイルシートではなく、仮定、数は私を困惑させた. WP Adminify& #39; s adminバンドルは、CSSファイルを214 KBに成長させていた - 機能、3 人の開発者、ゼロ削除の年を縮小、それは156 KBに低下した. その上にGzipped, 24 KBのワイヤーの上に. We& #39; dは、ユーザーがダウンロードする必要があったよりもほぼ9 倍のスタイルシートを出荷していました 解析された、すべての管理ページが、すべてのロードで解析費用を支払いました。 CSS が太っているためにエラーを投げかけないので、誰も気付かなかった。 それは静かにすべて後ですべてを作ります。

CSSはレンダリングのクリティカルパスに座っています。 browsers block painting until stylesheets in the head are downloaded and parsed - that's what "render-blocking CSS" means in your Lighthouse report, and it's why stylesheet size shows up directly in First Contentful Paint and Largest Contentful Paint, two of the metrics コア Web Vitals 気にしてください。 JavaScript が遅延し、画像が遅延する可能性があります。重要な CSS は実行できません。 It's は、ページ読み込みごとに料金所を通過します。

ミニ化は利用可能な最も安い通行料金割引です: パーサーが行うすべてのものをストリップ& #39; 必要ありません - コメント、空白、冗長構文 - そして生き残るルールは、事実上バイト単位の等価です リファクタリングなし、正しく行われた場合に動作が変更されるリスクなし、ブラウザベースのツールを使用する場合はビルドパイプラインは必要ありません Toolz.dev の CSS ミニファイア 貼り付けるのにかかる時間内に、クライアント側でこれを正確に行います。

このガイドでは、使い方、内部での Minification の実際の機能、Gzip や Brotli との相互作用 (これはほとんどの記事が間違っている部分です)、および Minification が間違った動きである場合について説明します。

tl;dr: スタイルシートを Toolz.dev CSS ミニファイア そして、コメント、空白、冗長な構文を取り除いた機能的に同一の CSS を取り戻します - 通常、圧縮前に 15 ～ 40% 小さいです。ブラウザ内で完全に実行され、無料でサインアップはありません。最小化と gzip/Brotli スタック: 両方を実行します。読み取り可能なソースを保持し、最小化された出力を出荷し、最小化されたファイルを決して手作業で編集しないでください。フロントエンド ペイロードの残りの部分については、それをペアリングします HTML ミニファイア そして、その画像の作品が SEO 画像最適化ガイド。

主な機能

空白とコメントのストリッピング

ミニ化による節約の大部分は退屈なものから来ています: インデント、改行、中括弧やコロンの周りのスペース、コメント よくコメントされたスタイルシートは、簡単に20% のコメントと重みによる空白 - そして、そのすべてのバイトをブラウザではなく、人間のために剥がしても、単一のルールがどのように解釈されるかについては何も変わりません これも、元のファイルを保持する理由です: ミニ化された出力は、コンパイルされたコードのようなビルドアーティファクトを説明するコメントを含む読み取り可能なバージョン なんでや あれか z-index 9999 はリポジトリに残り、削除版は生産に移されます。

構文レベルの最適化

適切な縮小は、空白を超えて文法自体に移行します。 Toolz.dev ミニファイアは、次の 3 つの安全な構文変換を行います。 0px なる 0 (長さゼロの場合、単位は必要ありません)。 #ffffff なる #fff (ペアが一致すると 6 桁の 16 進数が 3 に折りたたまれます)、各閉中括弧の前の最後のセミコロンがドロップされます。個別にこれらは 1 バイトです; 実際のスタイルシート全体で合計すると 1 パーセントまたは 2 になります。重要なことに、すべての 1 つは CSS 仕様によって defined-safe になります - margin: 0px あんど margin: 0 パーサーに対する同じ宣言です。 同じくらい重要なのは、意図的に何をするかということです しない 触れる: 去ります 0%、 0s、そして 0deg 単独で (ユニットは重要です)、8 桁を短くしないでください。 #rrggbbaa アルファ ヘックス (4 番目のペアは冗長ではありません) を維持し、 /*! ... */ ライセンスとバナーのコメントを作成して、あなたの帰属を生き残る。 この抑制は、私が深く掘り下げる際に、私がたどり着くでしょう。

貯蓄に関する即時フィードバック

ツールは入力サイズと出力サイズを示し、抽象的なベストプラクティスを具体的な数字に変えます。その数字は単なる満足ではなく診断です。 40%+の削減は通常、ファイルがコメントと寛大な書式でいっぱいだったことを意味します - 手書きのCSSでは正常です。 10%未満の削減は、ファイルがすでに縮小またはきつく生成されていることを意味し、最適化の取り組みはおそらく他の場所に属します。 I'最適化されていないPNG 2 MBを提供するページで3 KBのCSSを剃る午後の時間を人々が過ごすのを見て、最初に測定します; 数字は午後の行方を教えてくれます。

クライアント側の処理

CSS はブラウザ タブから離れることはありません。 's は肩をすくめますが、多くのスタイルシートは独自のものです。 - クライアント's の未発表再設計、販売するホワイトラベル テーマ、内部デザイン システム コード。これらをプライバシー ポリシーのないランダムな縮小サイトにアップロードします。you've read は、操作がローカルで完全に適切に実行された場合に発生する奇妙なリスクです。クライアント側はまた、it's が高速であることを意味します。往復アップロードなし。サーバーベースのツールをタイムアウトにするのに十分な大きさのファイルで動作します。

最新の CSS を処理します

カスタムプロパティ、 calc() 式、メディアとコンテナのクエリ、プリプロセッサからのネスト出力、ベンダープレフィックス - 実際の 2026 スタイルシートには、単純な regex ベースのミニファイアが乱雑に変化する構造がいっぱいです。内部の空白 calc() 耐荷重が有名です。 calc(100% - 20px) マイナス記号の周りのスペースを必要とし、それらを剥ぎ取るミニファイアーが式を破ります。括弧と文字列リテラルを追跡するミニファイアーは、このようなものは、それらのスペースをそのままにして、内部のあらゆるものから手を離すことを知っています url() または引用符で囲まれた文字列。 もしあなたが悪いミニファイアでやけどを負ったことがあるなら、それはほぼ間違いなくブラインド正規表現のものでした; 修正は括弧を尊重するツールです。 url()、および引用符全体でパターンマッチングを行うのではなく、引用符で囲みます。

CSS ミニファイアの使い方

ステップ 1: 縮小したい CSS を収集する

スタイルシートがどこに住んでいるかからコピーします - a .css ファイル、 <style> ブロック、SASS ビルドの出力、または WordPress カスタマイザー ボックスに宛てられたスニペット。 プロジェクトに複数のスタイルシートがまとめられている場合は、最初にそれらを連結して結果を最小限に抑えることを検討してください。1 つのコンパクト ファイルのリクエストは、通常、いくつかの小さなファイルを上回っていますが、HTTP/2 マルチプレクシングにより、そのルールは緩和されます。

ステップ 2: ミニファイアに貼り付けます

を開きます CSS ミニファイア そして貼り付けます。処理は即時です - there's アップロードなし ステップ。 there's アップロードなし。入力に構文エラーがある場合、縮小出力は予期せず動作する可能性があります (欠落している閉中括弧は、ソースと同じように縮小形式のルールに従うことを飲み込みます。ただし、見つけるのははるかに困難です)。そのため、何かがおかしい場合は、まずソースを検証してください。

ステップ 3: サイズを比較する

前後の数字に注意してください。 これは、コミット メッセージの証拠であり、CSS が適切なターゲットであったかどうかのシグナルです。 何年にもわたるこれを行ってきた大まかな個人的なベンチマークとして: 手書きの CSS は 25 ～ 40% 下落し、フレームワーク CSS は 15 ～ 25% で、すでに処理されている CSS は 10% 未満です。 これらの範囲外のものは、もう一度見てみる価値があります。

ステップ 4: ミニファイド バージョンを出荷し、ソースを保持します

出力を実稼働アセットにコピーします .min.css ファイル、テーマのコンパイルされたスタイルシート、カスタマイザ フィールド。 すると、私が見たルールに違反し、費用がかかります。 縮小されたファイルを直接編集しないでください。 誰かが色を修正する瞬間 styles.min.css、ソースとアーティファクトが分岐しており、次の適切なビルドで、修正が黙って元に戻ります。 ソースは編集用、ミニファイドは出荷用、それらの間の矢印は一方通行です。

ステップ 5: ブラウザで確認する

ミニ化したスタイルシートでページを読み込み、重要なビューをクリックします。 正しいミニ化は動作を保持するため、このチェックには 2 分かかり、ほとんどの場合合格します - しかし、" almost always" はその文で作業を行っており、2 分は安価な保険に変更された場合、レンダリングされた pages' を指定して CSS を実行します テキスト差分ツール どのルールが壊れたかを見つけるために。

テクニカル ディープ ダイブ: 縮小、gzip、および brotli

ミニ化に関する最も一般的な誤解は、gzip によって冗長化されるということです - "サーバーはとにかくすべてを圧縮します。なぜわざわざ?"この 2 つは異なるレイヤーで動作し、違いを理解することで、それぞれに何の価値があるかが正確にわかります。

圧縮 (gzip、brotli) トランスポートレベルで可逆的です サーバーはレスポンスを圧縮し ブラウザは解凍します そして出てくるものは 入ってきたものとバイト単位で同一です - すべてのコメントとすべてのスペースを含めて 圧縮すると縮小します ダウンロード。

縮約 はコンテンツレベルで一方向です.取り除かれるバイトは決してダウンロードされず,解凍されることもなく,そして - これは人々が見逃している部分です - 決して解析されない。 ブラウザの CSS パーサーは、メイン スレッドの解凍スタイルシートのすべての文字を歩きます。 214 KB のスタイルシートは、キャッシュされていないすべてのロードで 214 KB の解析に必要です。 縮小は、そのコストを削減する 2 つのうちの 1 つだけです。

積み重ねるわけではありませんが、スタックもします。 圧縮は もっといいの at squeuzing repetitive whitespace than almost anything else - which means minification's relative savings shrink after compression.手書きスタイルシートの数値の典型的な形状: minificationだけで30% 、gzipだけで80% を節約し、両方を合わせておそらく83 ~ 85% を節約します。 minification post-gzipの限界ワイヤ節約は控えめです; 解析時間の節約は圧縮によって触れられず、耐久性のある引数です。 it' s not either/or, and neither is expensive.

レンダリング ブロックの部分が入ってくる場所。 で参照されているスタイルシート <head> block first paint by design - ブラウザはスタイルなしのコンテンツのフラッシュを表示することを拒否するため、待機します。 Lighthouseはこれに" レンダーブロックリソースの削除、" とフラグを立て、緩和ツールキットは: minify (smaller blocker) 、 compress (smaller still) 、 inline the critical above-the-fold rules directly into the HTML (no request at all for the part that matters) 、 そして非重要なCSSを非同期で読み込む media="print" オンロードスワップまたは rel="preload" パターン。 実装リスクが事実上ゼロだけであるため、縮小が最初のステップです。

何という縮約ではありません。 削除しない 未使用 ルール - that& #39; s purging (PurgeCSS, Tailwind& #39; s JITアプローチ), これは、あなたのマークアップを知っている必要があり、絶対にクラス名が動的に構築されたときに物事を再構築することはできません重複セレクタをマージまたはカスケードを再構築 - いくつかの積極的なオプティマイザ (cssnano& #39; s高度なプリセット, csso& #39; s再構築モード) これを試み、それは通常動作します, しかし、 " usually" は、空白の除去とは異なる保証です& #39; s " always." カスケード順序は、CSSでセマンティックです; ソース順序によって同等の特異性を持つ2 つのルールが解決し、それらを並べ替える再構成者は、あなたのページを変更します 1 つの悪い金曜日のデプロイ後の私のポリシー: 安全な変換は常に, 唯一の視覚的な回帰テストを見て再構築します。

フロントエンドのパイプライン全体で縮小がどこにあるのかというと、 Web 開発者ツールキット ガイド テリトリーをマップし、 HTML ミニファイア ガイド 同じジョブのマークアップの半分、つまり同じアイデア、空白に関する 1 つのより難しいルールをカバーします。

よくある使用例

ワードプレスのテーマとプラグイン

WordPressサイトは、屋根裏部屋がボックスを蓄積する方法のスタイルシートを蓄積します - テーマ、子テーマ、ページビルダー、6 つのプラグイン、それぞれCSSをエンキューします テーマやプラグインを出荷する場合、リリース前にあなた自身の資産を縮小することは基本的な衛生; 私は、この維持を学んだWP Adminify、私たちのCSSがロードされている場所 すべての管理ページ 何万ものサイトで、無駄にされたキロバイトごとにそのインストール ベースが乗算されます。 サイトを運営している場合、カスタマイザーの縮小コピーと子テーマ CSS は、より重いキャッシング プラグインに到達する前に、手間がかかりません。

ビルド システムを使用しないデプロイメント前のビルド

実際のプロジェクトの多くにはバンドラーがありません。ランディング ページ、レガシー アプリ、クライアント マイクロサイト、2019 年に誰かが構築したマーケティング ページで、まだ変換しているものです。 webpack を追加して 1 つのスタイルシートを縮小するのは不条理なやりすぎです。アップロード前にブラウザのミニファイアに貼り付けるには 15 秒かかり、ビルド パイプラインが提供する利点のほとんどがわかります。すべてのプロジェクトがインフラストラクチャに値するわけではありません。; すべてのプロジェクトが縮小された資産に値するわけではありません。

電子メールと埋め込みウィジェット CSS

サードパーティのウィジェット、埋め込み可能なバッジ、および HTML メールはすべて、CSS を制御できない環境に挿入します。サイズの予算が厳しく、荷物のサイズが厳密で、あなたが出荷するすべてのキロバイトが、あなたを埋め込むすべてのサイトまたは受信トレイによって再び出荷されます。 埋め込みスタイルを縮小することは、尊重されたエンジニアリングです。 具体的には、メールに関する 1 つの注意事項: 古いクライアントの中には、CSS の解析が非常に奇妙であるため、Email Preview ツールで、Outlook&#39 のレンダリング エンジンへの同等の転送を想定するのではなく、電子メール プレビュー ツールでテストしてください。

逆のデバッグ: 縮小された CSS の美化

同じツール カテゴリは、他の方向にそのキープを獲得します. you& #39; re 生産の問題を検査し、あなたが持っているすべては、他の誰かからシングルラインの90 KBスタイルシートである& #39; sサイト, フォーマットバック可読形式にそれを理解のステップゼロ. minificationは、永久にコメントを破棄します - それらの戻って来ることはありません - しかし、構造と可読性はワンクリックです. " どのように彼らはそれを構築しましたか? " 他の人々についての質問& #39; sサイト, 通常、横に グラデーションジェネ 答えが背景であることが判明した場合、私は再現したいと思います。

パフォーマンス監査

Lighthouseが実行すると、レンダーブロッキングCSSまたは過剰なスタイルシートバイトにフラグが立てられると、ミニファイアーは測定器としても機能します: 問題のファイルを貼り付け、before/afterデルタで問題のどれだけがフォーマットであるか、どれだけが本当に多すぎるルールであるかを示す。 8%しか縮小しないファイル does'空白の問題はありません - スコープの問題があり、修正はパージまたは分割であり、縮小はしません。修正を開始する前にどの問題があるかを知ることは、監査の大部分を占めます。

縮小と圧縮 vs パージ

この表から抜け出す戦略: 何らかの形で isn't already ならサーバーで圧縮を有効にし、ゼロリスクのデフォルトとしてすべてを縮小し、スタイルシートがページに対して劇的に大きすぎるケース用にパージを予約します - 通常、単純なページで使用されるフレームワーク CSS。 "gzip は縮小を無意味にします" 関係を取り違えます。最適化スタック全体のより多くのコンテキストは、 に住んでいます コーディング ツール ガイド。

フェイク

CSS ミニファイアは何をしますか?

CSS ミニファイアーは、ブラウザーの does' のすべての文字を削除します。コメント、空白、改行は必要ありません。次のような安全な構文ショートカットを適用します 0px にする 0 あんど #ffffff にする #fff。 出力は機能的に同一の CSS であり、圧縮前は通常 15 ～ 40% 小さくなります。 プレゼンテーションを保存する変換です。ページはまったく同じように表示され、ブラウザはダウンロードしてバイト数が減るだけです。

CSS をミニティングにすることは何かを壊しますか?

ミニファイアが正規表現によるパターンマッチングではなく、実際に CSS を解析する場合ではありません。空白のストリッピングと構文のショートカットは、CSS 仕様によって defined-safe (安全) です - 既知の例外は内部の空白です calc()、正しいミニファイアが保持します。 アグレッシ リストラ (ルールのマージと並べ替え) は、CSS のカスケード順序が意味のある意味のため、実際のリスクのある別の操作です。 標準の縮小に固執し、簡単なビジュアル チェックで確認します。

サーバーが gzip または brotli を使用している場合、縮小はまだ価値がありますか?

はい、ほとんどの記事が見逃している理由のために: 圧縮はダウンロードを縮小しますが、ブラウザは元のバイトに解凍し、メインスレッド上のそれらのすべてを解析する必要があります 最小化されたバイトは決してダウンロードされず、解析されることはありません。 gzip後のワイヤの節約は控えめです - 数パーセント - しかし、解析時間の節約は圧縮によって手つかずです。 2つのスタックはほとんど費用がかからず、異なるボトルネックに対処するため、両方を行います。

CSS ファイルはどれくらい小さくなりますか?

手書きの十分にコメントされたスタイルシートは、通常 25 ～ 40% 縮小し、フレームワークまたはプリプロセッサーの出力は 15 ～ 25% 縮小します。CSS は 10% 未満で縮小します。 ザ・ Toolz.dev CSS ミニファイア 正確な前/後のサイズを示し、その数は診断用です。小さな削減は、ファイルが保存されることを意味します & #39;フォーマットに問題がなく、パフォーマンス予算は画像や未使用のルールのパージに費やしたほうがよいです。

CSS の縮小は、SEO とコア Web Vitals を改善しますか?

間接的ですが、純粋に。 document head の CSS はレンダー ブロッキングであるため、そのサイズは First Contentful Paint と Largest Contentful Paint に直接入力されます。LCP は、Google's ページ エクスペリエンス シグナルを考慮する Core Web Vitals メトリックです。最小化だけで won't は遅いページを救いますが、it's はレンダー ブロッキング CSS 緩和シーケンスの最も安価なステップです。Lighthouse は、クリティカル CSS のインライン化と非同期読み込みに先立って推奨しています。

Webpack のようなビルド ツールなしで CSS を縮小できますか?

はい - that& #39; s まさにブラウザベースのミニファイアーの用途 スタイルシートを に貼り付けます CSS ミニファイア、出力をコピーし、実稼働ファイルとしてアップロードします。 bundler がないプロジェクトの場合 - ランディング ページ、WordPress 子テーマ、レガシー サイト - これは、インストールまたは保守するインフラストラクチャのないビルド パイプラインの利点のほとんどを 15 秒で取得します。

縮小された CSS ファイルを直接編集する必要がありますか?

いいえ、このルールには歯があります。 縮小されたファイルはビルドアーティファクトであり、読み取り可能なソースは変更が属する場所です。 誰かが修正する瞬間 .min.css 直接、ソースとアーティファクトが分岐し、次の再生により修正が静かに元に戻ります。明らかな原因もなく数週間後に再表示されるバグです。ソースを編集し、再縮小し、再展開します。常に一方向。

独自の CSS をオンラインのミニファイアに貼り付けても安全ですか?

クライアント側のものだけに。 ザ・ Toolz.dev ミニファイア ブラウザですべてを処理します。スタイルシートはアップロードされません。貼り付け中にネットワーク タブを見て確認できます。サーバーベースのミニファイアーは必ずコードを受け取ります。これは、CSS が未リリースの製品、NDA のクライアント、または販売する商用テーマに属しているかどうかに関係します。