コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

トップ > gzip > サイト爆速化対決！Gzip対Brotli、どっちが本当に速いの？？？

サイト爆速化対決！Gzip対Brotli、どっちが本当に速いの？？？

gzip brotli server

Gzip vs. Brotli: Compression Comparison

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

Gzip と Brotli は、ウェブサイトの速度向上とファイルサイズ削減のための人気のある圧縮方法です。主な特徴は以下の通りです：

Gzip：1992年にリリースされ、広くサポートされており、動的コンテンツに最適です。処理が速いですが、圧縮率はやや低めです。

Brotli：2015年に登場し、より優れた圧縮（Gzipより15〜25％小さいファイル）を実現しますが、処理が遅く、より多くのリソースを使用します。静的ファイルと最新のブラウザに最適です。

簡易比較

機能 Gzip Brotli
リリース年 1992年 2015年
圧縮レベル 1-9 1-11
最適な用途 動的コンテンツ 静的アセット
圧縮速度 速い 遅い
ファイルサイズ削減 50〜70％小さく Gzipより15〜25％小さく
ブラウザサポート すべてのブラウザ 最新ブラウザのみ
リソース使用量 低いCPU/メモリ 高いCPU/メモリ

重要ポイント：動的コンテンツと古いブラウザにはGzipを、静的アセットと最新ブラウザにはBrotliを使用してパフォーマンスを最大化しましょう。多くのサーバーは最適な結果を得るために両方を組み合わせています。

Gzipの仕組み

Gzipはサイト速度向上に重要な役割を果たします。バックグラウンドでの動作を見てみましょう。Gzipは2つの技術を使用してファイルを圧縮します：LZ77とハフマン符号化です。

Gzip圧縮プロセス

このプロセスはLZ77から始まり、繰り返し文字列を検出して参照に置き換えます。次に、ハフマン符号化が頻繁に出現する文字に短いコードを割り当てます。

Gzipは1から9までの圧縮レベルを提供し、それぞれが速度と圧縮率のバランスを異なる形で取ります：

レベル 速度 圧縮率 最適な用途
1-3 非常に速い 2.5倍〜3倍 リアルタイム圧縮
4-6 中程度 3倍〜3.5倍 一般的なウェブコンテンツ
7-9 遅い 3.5倍〜4倍 静的ファイルの最適化

例えば、100KBのJavaScriptファイルを圧縮すると以下のような結果になります：

  • レベル3：約35KB（65％小さく）
  • レベル6：約30KB（70％小さく）
  • レベル9：約27KB（73％小さく）

Gzipは非常に効果的ですが、いくつかのトレードオフがあります。

Gzipの長所と短所

長所： - すべての主要ブラウザとシームレスに動作します。 - HTML、CSS、JavaScriptなどのテキストベースのファイルを効率的に圧縮します。 - 低い圧縮レベルではCPU使用量が少なくなります。 - 圧縮レベルに関係なく、ファイルの解凍が速いです。 - Apache、Nginxなど、ほとんどのウェブサーバーでネイティブにサポートされています。

短所： - すでに圧縮されているファイル（画像、PDFなど）はうまく圧縮できません。 - 高い圧縮レベル（7-9）はCPUリソースに負担をかけます。 - ウェブコンテンツに合わせた事前定義された辞書がありません。 - 新しいアルゴリズムと比較して圧縮率が劣ります。 - シングルスレッドプロセスを使用するため、パフォーマンスが制限されます。

大きなファイルでトレードオフが明確になります。例えば、1MBのJavaScriptバンドルを圧縮するには： - レベル3で約50ms - レベル6で約120ms - レベル9で約300ms

このバランスのため、ほとんどのウェブサーバーはサーバーに負担をかけずに優れた圧縮を提供するレベル6を好みます。

Brotliの仕組み

Brotliは標準的なアルゴリズムと共に事前定義された静的辞書を使用することで、Gzipとは異なるアプローチを取り、効率的な圧縮を実現します。

Brotli圧縮プロセス

Brotliは速度と圧縮品質のバランスを取るために調整可能なレベルを提供します。低いレベルは処理の高速化に焦点を当て、動的コンテンツに最適です。一方、高いレベルは静的ファイルのためにより良い圧縮を実現します。

このプロセスはBrotliの組み込み辞書を使用して入力をスキャンし、コンテキストモデリングを通じてデータを改善し、高度なハフマン符号化を使用してエンコードします。この方法は、Gzipで圧縮されたファイルよりも15〜25％小さいファイルになることが多いです。Brotliが動的コンテンツと静的コンテンツの両方を効果的に処理する能力は、ウェブパフォーマンスのための魅力的な選択肢となっています。

Brotliの長所と短所

長所： - HTML、CSS、JavaScript、ウェブフォントに優れた圧縮を提供します。 - 一般的なウェブアセットの圧縮を最適化するために事前構築された辞書を利用します。 - テキストベースのコンテンツで特に優れた性能を発揮します。

短所： - Gzipと比較してより多くのメモリを消費します。 - 高いレベルでは圧縮速度が遅くなります。 - Internet Explorer 11以前などの古いブラウザではサポートされていません。 - Gzipと比較してサーバーでの実装が少ないです。 - 最大圧縮時にはより多くのリソースが必要です。

多くのコンテンツ配信ネットワーク（CDN）やウェブサーバーは、動的コンテンツに対しては速度を優先して低いBrotliレベルを選択し、一方で圧縮コストが複数のリクエストに分散される静的ファイルには高いレベルを使用します。これらの特性は、Brotliが特定のシナリオでGzipを上回る性能を発揮できることを示しています。

GzipとBrotliのパフォーマンステスト

テストでは、様々なファイルタイプやシナリオでのGzipとBrotliのパフォーマンスの違いが顕著に現れています。

ファイルサイズ削減結果

Brotliは特に最高設定で圧縮率でGzipを上回ります。HTML、JavaScript、CSS、ウェブフォント、JSONなどのウェブアセットでは、Brotliの効率性によりファイルサイズが小さくなります。ただし、これらの小さなファイルサイズを実現するには、圧縮に必要な時間を考慮する必要があります。

圧縮時間分析

Brotliのより良い圧縮は、Gzipと比較して処理時間が長くなるというトレードオフがあります。これにより、Brotliの高い圧縮レベルは、動的に生成されるコンテンツよりも、静的アセットのような一度だけ圧縮されるファイルに適しています。動的コンテンツの場合、Gzipは依然として速く、より適切な選択肢です。

ブラウザ互換性ガイド

GzipとBrotliはどちらも最新のブラウザでサポートされています。Gzipは事実上すべてのブラウザバージョンで動作しますが、BrotliはChrome、Firefox、Safari、Edge、Operaの新しいバージョンでサポートされています。パフォーマンスと互換性のバランスを取るために、多くのウェブサーバーはコンテントネゴシエーションを使用しています：BrotliをサポートするブラウザにはBrotli圧縮ファイルを提供し、古いクライアントにはデフォルトでGzipを使用します。これにより、ユーザーを取り残すことなく最適なパフォーマンスを確保します。

圧縮の選択と設定

Gzipを使用する場合

Gzipはリアルタイムで圧縮する必要がある動的コンテンツに最適です。一般的な例は以下の通りです：

  • ユーザーダッシュボード
  • リアルタイム分析
  • カートデータ
  • パーソナライズされたフィード

処理速度が速いため、オンザフライでコンテンツを圧縮する高トラフィックのウェブサイトに最適です。さらに、Gzipはすべての主要ブラウザでサポートされており、古いシステムでもうまく動作します。

Brotliを使用する場合

Brotliは高い圧縮率を実現するため、静的アセットに適しています。以下の圧縮に最適です：

  • HTML
  • JavaScript
  • CSS
  • ウェブフォント
  • SVGグラフィック
  • JSONデータ

静的ファイルを提供するCDNの場合、Brotliの効率性は帯域幅使用量の削減と読み込み時間の短縮に役立ちます。これらのメリットを活かすようにサーバーを設定しましょう。

設定手順

圧縮用にサーバーを設定するには、以下の手順に従ってください：

サーバー設定

Apache (.htaccess)

# Brotli圧縮を有効化  
AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript application/json application/xml

# Brotliをサポートしないブラウザ向けにGzipを有効化  
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript application/json application/xml

Nginx (nginx.conf)

# Brotli設定  
brotli on;  
brotli_comp_level 6;  
brotli_types text/plain text/css application/javascript application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

# Gzip設定  
gzip on;  
gzip_vary on;  
gzip_comp_level 6;  
gzip_types text/plain text/css application/javascript application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

推奨圧縮レベル

圧縮タイプ 静的コンテンツ 動的コンテンツ
Brotli レベル11（最大） レベル4-6
Gzip レベル6-7 レベル4-5

結論

主な違い

GzipとBrotliはいくつかの点で異なります：

機能 Gzip Brotli
ファイルサイズ削減 ファイルサイズを50〜70％縮小 Gzipと比較してさらに15〜25％ファイルサイズを削減
圧縮速度 圧縮が速い 圧縮が遅い
ブラウザサポート ほぼすべてのブラウザで動作 主に最新ブラウザでサポート
リソース使用量 CPUとメモリの使用量が少ない より多くのCPUとメモリが必要
最適な用途 動的コンテンツとリアルタイム圧縮 事前圧縮された静的アセット

選択のポイント

これらの違いにより、圧縮へのアプローチが形作られます：

Gzipを選ぶ場合： - 動的コンテンツのための迅速で軽量な圧縮が必要 - 幅広いブラウザとの互換性が必要 - 大きなシステム変更なしで簡単にセットアップしたい

Brotliを選ぶ場合： - 事前圧縮できる静的アセットがある - ユーザーが主に最新ブラウザを使用している - 高い要求に対応できる十分なサーバーリソースがある - より良い統合のためのCDNサポートがある

賢明な戦略は、静的ファイルにはBrotliを、動的コンテンツや古いブラウザ向けにはGzipを使用することです。これにより、幅広いアクセシビリティを維持しながら、最高の圧縮結果を得ることができます。

©コハム