最近、顧客体験の向上は、エンゲージメントを促進し、ビジネスの成功を達成するために非常に重要です。顧客満足度に大きく影響を与える重要な要素の一つは、ウェブサイトの読み込み速度です。
研究によると、40%のユーザーは、ウェブサイトが3秒以上かかると離脱してしまい、たった1秒の遅延でもコンバージョンが7%減少する可能性があります。つまり、毎秒が重要です！
ウェブサイトの高速読み込みを追求する中で、私たちは多くの異なる技術を活用できます。その一つは、サイトが機能することに影響を与えずに基盤となるコードを最小限に抑えることです。「圧縮」アルゴリズムは、その達成方法の一つであり、ほとんどの現代のウェブブラウザは、以下の3つのアルゴリズムのいずれかでエンコードされたコンテンツを理解または「受け入れ」ます：
- Deflate
- Gzip
- Brotli
ウェブサイトの速度を向上させる方法については、こちらをチェックしてください。
GZIP圧縮とは？
GZIPは、ジャン＝ルー・ガイリーとマーク・アドラーによって開発された広く使用されている圧縮フォーマットおよびソフトウェアアプリケーションです。初期のベータ版は1992年にリリースされ、実際の最初のバージョンである1.0は1993年初頭にリリースされました。元々は多目的の圧縮ライブラリとして作成され、DEFLATE圧縮アルゴリズムからインスピレーションを受けています。
GZIPは、ファイル圧縮の9つのレベルを提供しており、レベル1は小さなファイルサイズと高速な圧縮速度を提供し、レベル10は最大のファイルサイズ削減を提供しますが、圧縮速度は遅くなります。一般的に、最大80%の圧縮率を達成でき、テキストファイル、JavaScriptやCSSコード、その他のHTTPコンテンツなどのデータを圧縮するのに特に効果的です。
GZIP圧縮アルゴリズム
GZIPは、LZ77とハフマンコーディング技術を組み合わせたdeflateアルゴリズムに基づくロスレス圧縮アルゴリズムです。ロスレス圧縮方式として、復元されたデータは元のデータと同一であることを保証します。
では、GZIPが実際にどのように機能するか見てみましょう：
- サーバーがウェブページのリクエストを受け取ると、リクエストヘッダーでGZIP圧縮のサポートを確認します。
- GZIP圧縮がサポートされている場合、サーバーはページの圧縮されたマークアップを生成します。
- GZIPは、効率的な配信のためにマークアップを圧縮データストリームに変換します。
- ユーザーのブラウザは、受信したストリームを解凍し、元のマークアップを復元します。
要するに、GZIPは繰り返しパターンを特定し、それらを短い表現に置き換え、頻度に基づいて可変長コードを割り当てます。
この圧縮方法は、ファイルサイズを大幅に削減し、データ伝送の効率を高めます。
GZIP使用の効果の比較
例えば、webpackやrollupでバンドルした後、結果として得られるJavaScriptファイルはかなり大きくなることがあります。ファイルを分割するために`chunk`を使用することもできますが、全体のサイズは依然として大きい場合があります。Chromeで静的リソースに対するGZIP圧縮の効果を見てみましょう：
圧縮前後の3つのファイルのサイズを比較します：
Brotli圧縮とは？
Brotliは、Googleによって最初にwoff2用に開発され、後により広範な用途に拡張された非常に効率的な圧縮アルゴリズムです。現在利用可能な最も効果的な汎用圧縮方法と同等の圧縮率を達成します。
Brotliは、1から11までの11の圧縮品質レベルを導入しています。品質レベルを上げることで圧縮率が向上しますが、高いレベルでは圧縮速度に影響を与える可能性があることに注意が必要です。
Brotliは広く採用されており、すべての現代のウェブブラウザでサポートされています。現在、約97.28%のユーザーがBrotliをサポートするブラウザを使用しています。
ブラウザがBrotliをサポートしているかどうかを確認するには、accept-encodingリクエストヘッダーを調べてください。GzipとBrotli圧縮アルゴリズムが同時に有効になっている場合、Brotliの圧縮レベルがGzipよりも優先されます。次のようになります：
Accept-Encoding: br,gzipBrotli圧縮アルゴリズム
BrotliはGoogleによって立ち上げられたオープンソースの圧縮アルゴリズムで、一般的なGzipよりも効率的です。LZ77アルゴリズム、ハフマンコーディング、および二次テキストモデリングを通じてデータを圧縮し、ウェブページ内のさまざまなファイルサイズをより効率的に圧縮し、読み込み速度を向上させます。
英語、スペイン語、中国語、ヒンディー語、ロシア語、アラビア語の一般的な単語や語彙の辞書を使用し、特にHTMLやJavaScriptの一般的な用語を含む機械言語を組み合わせて、Gzip、bzip2、LZMAなどよりもデータを圧縮します。このアルゴリズムに基づいてさらなる圧縮が行われ、データコンテンツの容量が削減され、ウェブページの読み込みが速くなります。
では、Brotliが実際にどのように機能するか見てみましょう：
まず、Brotliはデータ内の繰り返しパターンを探し、それらを短いコードで置き換えます。これにより冗長性を排除し、ファイルをよりコンパクトにします。
次に、Brotliはハフマンコーディングという手法を使用します。最も一般的な単語には短いコードを、あまり一般的でない単語には長いコードを割り当てます。これにより、Brotliは頻繁に使用される単語をより少ないビットで表現でき、ファイルサイズを削減します。
さらに、Brotliが使用するもう一つのトリックは文脈モデリングと呼ばれます。これはデータの周囲の状況を分析し、よりスマートな予測を行うことを助けます。データ間のパターンや関係を理解することで、Brotliは次に何が来るかをより正確に推測でき、ファイルをより効率的に圧縮します。
全体として、Brotliの高度な技術、包括的な静的辞書、および変革的メカニズムの組み合わせにより、非常に効果的な圧縮アルゴリズムとなっています。印象的な圧縮率とファイルサイズの削減を提供し、GZIP、bzip2、LZMAなどの他のアルゴリズムを上回ります。
Brotli対GZIP
使用の観点から見ると、2024年1月のHTTPアーカイブデータに基づくと、Brotliは実際にJavaScriptやCSSでGzipよりも多く使用されています！
GzipとBrotliの圧縮性能をテストするには、Paul Calvanoのツールを使用してください。
BrotliのGZIPに対する利点
Brotliは辞書を利用することでGZIPに対して優位性を提供し、完全なキーワードの代わりにキーを送信できるようにします。このため、BrotliはGZIP圧縮に比べて大幅なファイルサイズの削減を達成します。
ファイルサイズの改善は、ウェブ環境におけるデータ伝送とストレージの効率を向上させます。
転送されるバイト数を削減することで、ページの読み込み時間が改善されるだけでなく、CDNに関連するコストを削減するのにも役立ちます。
GZIPのBrotliに対する利点
Brotliは印象的な圧縮能力を持っていますが、特定のシナリオではGZIPが持つ利点もあります。以下はGZIPのBrotliに対するいくつかの利点です：
- 互換性：GZIPは1990年代以来広く使用されており、ほぼすべてのブラウザとウェブサーバーに対応しています。標準的な圧縮フォーマットとなっており、さまざまなプラットフォーム間での広範な互換性を確保しています。
- 確立されたエコシステム：GZIPは確立されたエコシステムを持ち、実装のための豊富なツールやライブラリが利用可能です。業界での長い歴史により、さまざまなソフトウェア環境での統合や作業が容易になります。
- 圧縮速度：GZIPは通常、Brotliに比べて圧縮速度が速いです。ファイルを迅速に圧縮できるため、速度が優先されるシナリオに適しています。
- サーバー負荷の軽減：EdgeOneのスマート圧縮は、オリジンサーバーではなく、エッジネットワークで実行されます。つまり、圧縮はEdgeOneのサーバーで行われ、あなたのサーバーのリソースは消費されません。これは、EdgeOneのようなコンテンツ配信ネットワーク（CDN）を使用する利点の一つであり、圧縮などのタスクをあなたのサーバーから彼らのサーバーにオフロードし、あなたのサーバーのリソースを解放します。
- ストリーミングのサポート：GZIPは、データがリアルタイムで圧縮されて配信されるストリーミングシナリオに適しています。その互換性とストリーミングアプリケーションのサポートにより、特定のユースケースでは好まれる選択肢となっています。
Zstandard圧縮について学ぶ
Zstandardは、Facebookによって開発された新しい圧縮方法です。その目的は、DEFLATEアルゴリズムと同様の圧縮率を提供しつつ、特に高速な解凍アルゴリズムのためにより速くなることです。圧縮レベルは、負の7（最速）から22（圧縮速度は遅いが、最良の圧縮率）まで調整可能ですが、2024年8月現在、Chrome 123+、Firefox 126+、Opera 109+のみがzstdコンテンツエンコーディングをサポートしています。ほとんどのCDNはZstandardをまだサポートしていませんが、多くはBrotliをサポートする方法と同様に、オリジン圧縮レスポンスのキャッシュキーを変化させることができるでしょう。について学ぶZstdとBrotliの圧縮ベンチマーク。
スマート圧縮について学ぶ スマート圧縮、 または EdgeOneにサインアップしてください。 無料トライアルを開始しましたので、こちらをクリックまたはお問い合わせで詳細をご確認ください。