コード圧縮比較 — gzip vs Brotli vs Minification

Minification vs. gzip vs. Brotli

ブラウザに配信するコードのサイズ削減には、複数の最適化レイヤーが関わります。minificationと圧縮がどのように連携するか、そしてそれぞれの貢献を理解することで、適切な戦略を選択できます。

3つのレイヤー

1. Minification — 不要な文字（空白、コメント、長い変数名）を除去するためにソースコードを変換します。言語レベルで動作します。
2. gzip圧縮 — Webサーバーによって適用される汎用圧縮アルゴリズム（DEFLATE）。バイトレベルで動作します。
3. Brotli圧縮 — Webコンテンツ向けに設計された新しいアルゴリズムで、同等の速度でgzipより15-25%優れた圧縮率を提供します。

組み合わせの効果

典型的なJavaScriptファイルの場合：

ステージ	サイズ	削減率
元のソース	100 KB	—
Minification後	45 KB	55%
Minified + gzip	14 KB	86%
Minified + Brotli	12 KB	88%

圧縮はminifiedコードで最も効果的に機能します。理由は：

• 繰り返しパターン（変数名、キーワード）が効率的に圧縮される
• Minificationがエントロピー（コメントのようなランダムコンテンツ）を除去し、圧縮が苦手な部分が減る
• より短く均一なコードがより良い圧縮率を生み出す

gzip vs. Brotliの詳細

gzip（DEFLATE）：

• 2000年代初頭からすべてのブラウザで普遍的にサポート
• 圧縮レベル1-9（6がサーバーのデフォルト値）
• 高速な圧縮・展開
• Content-Encoding: gzipで配信

Brotli：

• すべてのモダンブラウザでサポート（グローバルカバレッジ95%以上）
• 圧縮レベル1-11（動的コンテンツには4-6、静的事前圧縮には11）
• より高い圧縮率、特に高レベルで顕著
• 高レベルでは圧縮が遅い（静的アセットには事前圧縮を使用）
• Content-Encoding: brで配信
• HTTPSが必須

最適な戦略

最良の結果を得るには、3つすべてを適用します：

1. ビルドステップでMinifyする（Terser、cssnano、html-minifier-terser）
2. 静的アセットをBrotliレベル11で事前圧縮する（*.brファイル）
3. サポートされている場合はBrotliを配信し、フォールバックとしてgzipを使用するようにサーバーを設定する
4. サーバーレンダリングコンテンツには動的圧縮（低いBrotliレベル）を使用

Minificationをスキップすべきケース

gzip/Brotli圧縮コンテンツのみを配信している場合でも、minificationは展開後のサイズを削減するため役立ちます。ブラウザがパースする必要があるサイズが減り、パーシングは圧縮だけでは削減できないCPUコストです。