BrotliがGzipに比べてWebアセットの圧縮で大幅に優れている理由は何ですか？

Brotliは最大16MBの巨大なスライド窓（GzipのDEFLATEは32KB）をサポートし、12万語以上の一般的なHTMLタグ、JavaScript関数、英語フレーズを収録した静的辞書を内蔵しています。この事前辞書機構により、WebテキストアセットにおいてGzip比で15〜25%優れた圧縮率を実現します。

モダンブラウザにおいてHTTP（非暗号化）通信でBrotliを使用できますか？

使用できません。Chrome、Firefox、Safari、Edgeなどの主要ブラウザは、レガシーな透過型プロキシ機器がポート80の未知の圧縮バイナリ（br）を破損させる問題を回避するため、HTTPS接続時のみ Accept-Encoding: br を送信しBrotliを有効化します。

動的レスポンスと静的アセットで推奨される圧縮レベルの違いは何ですか？

CI/CDで事前生成される静的アセットには、圧縮時間が一度きりで長期的な帯域節約効果が継続するため、Brotli 11 (--best) やGzip 9 (またはZopfli) の最高設定を適用します。一方、リクエストごとに生成される動的APIでは、レイテンシとCPU負荷のバランスからBrotli 4〜5またはGzip 5〜6が推奨されます。

ペイロード圧縮はCore Web Vitals (CWV) のスコアにどのように直結しますか？

クリティカルレンダリングパスに含まれるCSSやJSバンドルの転送バイト数が激減することで、モバイル回線特有のTCPスロースタート時の往復回数 (RTT) が減少し、First Contentful Paint (FCP) および Largest Contentful Paint (LCP) の到達時間が直接的に短縮されます。

WebP、AVIF、MP4などの画像や動画ファイルもBrotliやGzipで圧縮すべきですか？

いいえ、圧縮すべきではありません。WebP、AVIF、MP4などのメディア形式は既に高度な専用エントロピー符号化が施されているため、GzipやBrotliを通しても更なる削減は見込めず、無駄なCPU消費と遅延の増加、さらにはファイルサイズの肥大化を招きます。

Brotli & Gzip 圧縮率ベンチマーク & 帯域コスト削減シミュレーター

ブラウザネイティブのCompressionStreamを活用し、テキスト、CSS、JavaScriptバンドルのBrotliおよびGzip圧縮率を測定。モバイル3G/4G環境での読み込み時間短縮と帯域節約効果を即座に試算します。

Presets:

通信回線環境:

月間リクエスト数:

Ready14.6 KB initcwndCSS

入力ペイロード (JS / CSS / HTML / JSON)2.39 KB

/**
 * @license React v18.3.1
 * react-dom.production.min.js
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 */
!function(){"use strict";function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function t(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),Object.defineProperty(t,"prototype",{writable:!1}),t}var n=Object.assign,r=Symbol.for("react.element"),a=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),i=Symbol.for("react.strict_mode"),l=Symbol.for("react.profiler"),u=Symbol.for("react.provider"),s=Symbol.for("react.context"),c=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),d=Symbol.for("react.memo"),p=Symbol.for("react.lazy"),h=Symbol.iterator;function m(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=h&&e[h]||e["@@iterator"])?e:null}function y(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n<arguments.length;n++)t+="&args[]="+encodeURIComponent(arguments[n]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var v={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},g={};function b(e,t,n){this.props=e,this.context=t,this.refs=g,this.updater=n||v}function k(){}b.prototype.isReactComponent={},b.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error(y(85));this.updater.enqueueSetState(this,e,t,"setState")},b.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},k.prototype=b.prototype;function w(e,t,n){this.props=e,this.context=t,this.refs=g,this.updater=n||v}var E=w.prototype=new k;E.constructor=w,n(E,b.prototype),E.isPureReactComponent=!0;var S=Array.isArray,C=Object.prototype.hasOwnProperty,x={current:null},_={key:!0,ref:!0,__self:!0,__source:!0};function P(e,t,n){var a,o={},i=null,l=null;if(null!=t)for(a in void 0!==t.ref&&(l=t.ref),void 0!==t.key&&(i=""+t.key),t)C.call(t,a)&&!_.hasOwnProperty(a)&&(o[a]=t[a]);var u=arguments.length-2;if(1===u)o.children=n;else if(1<u){for(var s=Array(u),c=0;c<u;c++)s[c]=arguments[c+2];o.children=s}if(e&&e.defaultProps)for(a in u=e.defaultProps)void 0===o[a]&&(o[a]=u[a]);return{$$typeof:r,type:e,key:i,ref:l,props:o,_owner:x.current}}

Lines: 6•Chars: 2,447•Size: 2.39 KB

≤ 14.6 KB (1 TCPパケット)

アルゴリズム & 圧縮レベル目標比率 & TCP状態

Uncompressed (Raw)Baseline

2.39 KB1x

Fastest (0 ms)

初回TCPバーストに適合 (≤ 14.6 KB)

Deflate (RFC 1951)Standard

839 B(-66%)2.92x

Native Stream

初回TCPバーストに適合 (≤ 14.6 KB)

Gzip (RFC 1952, Level 6)Universal

856 B(-65%)2.86x

Native Stream

初回TCPバーストに適合 (≤ 14.6 KB)

Brotli Dynamic (Level 5-6)Web Standard

668 B(-73%)3.66x

+18% vs Gzip(1.5ms)

初回TCPバーストに適合 (≤ 14.6 KB)

Brotli Static Pre-comp (Level 11)Maximum Density

608 B(-75%)4.02x

+26% vs Gzip

初回TCPバーストに適合 (≤ 14.6 KB)

Zstandard (Zstd Level 3)High Throughput

702 B(-71%)3.49x

Fastest Decompress(0.8ms)

初回TCPバーストに適合 (≤ 14.6 KB)

最速/最高圧縮: Brotli Static (-75%)•Brotli 動的: 73% 対 Gzip: 65%

純削減量: 0 B Gzipより削減

Brotli 優位性 (対Gzip)

+8%より高密度な圧縮

Brotliの静的辞書により、HTMLやCSSのトークンを文字列全体ではなく1〜2バイトで効率エンコード。

3G回線での読込短縮時間

36 ms削減対象:Slow 3G

初期TCPスロースタート往復を短縮し、First Contentful Paint (FCP) を高速化。

年間クラウド転送コスト削減

$0.18 / yr (AWS CDN)

月間 1M req 規模、標準$0.085/GBのエグレス料金で試算。

100% ブラウザ内完結 CompressionStream

サーバーへのデータ送信は一切行いません。ブラウザ標準のWeb Streams API（CompressionStream）により、クライアント端末内で瞬時に実測します。

Brotli & Zstandard 実証推計モデル

Brotliの122KB事前登録辞書とLZ77スライディングウィンドウを精密シミュレートし、動的Level 5および静的Level 11の圧縮率を正確に推計します。

TCPスロースタート & 回線物理シミュレーション

初期輻輳ウィンドウ（initcwnd = 14.6 KB）とパケット往復数（RTT）を計算し、モバイル3G・4G環境での初期描画への影響をリアルに可視化します。

Brotli & Gzip 圧縮率ベンチマーク & 帯域コスト削減シミュレーター

100% ブラウザ内完結 CompressionStream

Brotli & Zstandard 実証推計モデル

TCPスロースタート & 回線物理シミュレーション

Brotli & Gzip 圧縮ベンチマーク＆帯域節約シミュレーター — リファレンスガイド

主要パラメータ＆設定項目

プロの活用テクニック＆推奨設定

ビルド時における静的事前圧縮 (Brotli Level 11) の徹底

極小ペイロードにおける圧縮逆効果（メタデータオーバーヘッド）の回避

Vary: Accept-Encoding ヘッダーによるキャッシュ汚染の防止

動的センシティブエンドポイントでのBREACH攻撃対策

よくあるトラブルと解決策

圧縮後のファイルサイズが元の非圧縮サイズより大きくなってしまう

ブラウザがコードを実行せず、バイナリファイルをダウンロードするか文字化けして表示される

アクセス集中時にWebサーバーのCPU使用率が100%に達しレスポンス遅延が発生する

よくある質問 (FAQ)

関連するおすすめ開発ツール