CSSを圧縮

削減されるバイトの内訳

削減の大半は空白とコメントで、手書きのスタイルシートではこれがかなりの量になります。インデント、ルール間の空行、大きなファイルを見通しやすくする区切りの見出しは、配信してしまえばすべて純粋なオーバーヘッドです。それに加えて、意味が変わらない範囲で値を短くします。#ffffff と書かれた色は #fff に、ゼロには単位が不要なので 0px は 0 に、0.5em の先頭のゼロは削除され、margin: 10px 10px 10px 10px は margin: 10px にまとまります。

リスクのある種類の処理は、意図的に行いません。同じ宣言を持つルールの統合や並べ替えは、カスケードを変えてしまいます。 カスケードとは、詳細度が同じ2つのルールを、どちらが後にあるかで解決するCSSの仕組みです。積極的に並べ替えるミニファイアは、ファイルは小さくなっても、大きなスタイルシートでは微妙に違うページを生み出します。重複した宣言も意図的なことが多く、2つ目を無視する古いブラウザ向けのフォールバックとして残されています。

ネストしたルールと新しいメディアクエリの範囲構文は、ミニファイせずに処理を断ります。 これは多くのツールとは逆の対応なので、理由を説明しておきます。このツールの裏にあるパーサーはどちらの機能よりも古く、理解できないものに出会ってもエラーを出さず、黙って削除します。そのため、ネストしたブロックが出力からそのまま消え、何の報告もないままページのスタイルが失われます。ファイルの処理を断るのが誠実な対応です。スタイルシートでネイティブのネストや @media (400px <= width <= 700px) を使っている場合は、下で紹介するツールを使ってください。

マークアップと同じく、結果は 圧縮後 で判断してください。スタイルシートはgzipやbrotliで圧縮して配信され、これらのアルゴリズムは繰り返される空白をすでに非常にうまく処理します。そのため、ミニファイで30%小さくなったファイルも、転送時には5%しか小さくならないことがあります。削減は本物ですが、見出しの数字ほど大きくはありません。

ほかの目的には

新しいスタイルシートには Lightning CSS が適しています。ネスト、メディアクエリの範囲構文、カラー関数など、ここ数年で追加された機能をすべて理解し、どの古いツールよりも強力にミニファイし、同時に新しい構文を古いブラウザ向けに変換することもできます。esbuild --minify style.css もほぼ同等で、非常に高速です。どちらもブラウザのタブではなく、ビルド工程に組み込むべきものです。

はるかに大きな効果が出るのは、たいてい 使っていないルールの削除 です。ユーティリティフレームワークやコンポーネントライブラリで作ったサイトでは、スタイルシートの大部分がページ上のどの要素にも一致しないことがよくあります。PurgeCSS やフレームワーク自身のビルドを使えば、桁違いに削減できます。使っていないCSSをミニファイしても、使っていないCSSが小さくなるだけです。削除することが本当の解決策です。