どのようなサイトにおいても、スピードは重要です。高速読み込みの追求のために、さまざまな技術が利用されています。その中の一つが、サイトの機能に悪影響を与えることなく、使用するコードを最小限に抑えること。gzipでの圧縮でそれを実現することができますが、Brotliを用いた圧縮という新手法もあります。

これはGoogleが開発したアルゴリズムで、gzipを超える（あるいはそれに取って代わる）多くのメリットが豊富に詰め込まれています。今回の記事では、Brotliを用いた圧縮のスピードや効率を中心に、その技術に迫りたいと思います。

Brotliアルゴリズムを用いた圧縮について動画での解説もご用意しています。

Brotliを利用した圧縮とは何か、これがサイトで使用されているかどうかを確認する方法、そして、必要な場合に実装する方法も扱います。圧縮アルゴリズムにおけるBrotliの位置付けと、他の選択肢に比べてBrotliにどんな特徴があるのか見てみましょう。

ウェブにおけるデータの圧縮

最も基本的なかたちを挙げるなら、データの圧縮は、ウェブサイトやアプリのコードを対象とした、ファイルサイズの削減を意味します。これにより、ウェブ上で移動するファイルが軽くなり、ウェブサイトの読み込みとレンダリングにかかる時間が短縮できます。扱うファイルの種類に応じて、データを圧縮する方法はたくさんあります。

「最小化」や「ミニフィケーション」という名前で区別されることもある圧縮が一般的です。アルゴリズムに基づき、サイトのコードから余分な要素を取り除きます。通常であればインデント、コメント、空白などの要素によりファイルサイズが増加してしまうので、それを削除して読み込み時間が長引くのを防ぎます。

上に挙げた要素を削除しても、ほとんどの状況でユーザーエクスペリエンス（UX）に悪影響は出ません。コードをコンパイル、レンダリングするコンピュータにとっては、よりわかりやすいものになります。たとえば、次のコードを考えてみましょう。

define( 'WP_INSTALLING', true );

/**WordPressの環境を設定する*/
require __DIR__ . '/wp-load.php';
require __DIR__ . '/wp-blog-header.php';
if ( ! is_multisite() ) {
  wp_redirect( wp_registration_url() );
  die();
}

$valid_error_codes = array( 'already_active', 'blog_taken' );

上記のコードでは、人間が読みやすいようにスペースやキャリッジリターンなどの要素を使用していますが、コンピュータがコードを理解するために、そのような要素は必要ありません。空白や改行を削除することで、パフォーマンスの向上が期待できます。

このコードを圧縮すると、（人間にとっての）見た目が大きく変わります。

define( 'WP_INSTALLING', true ); /**WordPressの環境を設定する*
/ require __DIR__ . '/wp-load.php';
require __DIR__ . '/wp-blog-header.php';
if ( ! is_multisite() ) {
  wp_redirect( wp_registration_url() );
  die();
}

$valid_error_codes = array( 'already_active', 'blog_taken' );

しかし、どちらのコードも同じことを実行しています。

他のファイルタイプにも同様に、データを圧縮する方法があります。例えば、画像です。画質を劣化させずにサイズを小さくするために、圧縮が必要になります。

画像最適化の例
画像最適化の例

ファイルのサイズを抑える標準的な圧縮の方法として、gzipがあります。ZIPファイル、または、Linuxの.tarコマンドのようなものです。以前であれば、本当の意味での代替手段はありませんでした。そもそもなぜ代替手段が必要なのかについては後で詳しく述べますが、まずはgzipのライバルを紹介しましょう。

Brotliを用いた圧縮

Brotliとはデータ圧縮アルゴリズムです。この一言で片付けられるなら、このように記事を執筆する必要はありませんが。

このアルゴリズムを使えば、「ロスレス（可逆）」圧縮が可能です。Googleが、MITのライセンスのもとで開発しました。同社は、皆さんご存知のように、ウェブの進化を牽引する存在と言っても過言ではありません。Brotliにおいてgzipの機能の改善とユーザーやサイトへのさらなる利便性の提供が試みられているのは、何も驚くべきことではありません。

Brotliの圧縮には、gzipの圧縮と同じ基本技術、つまり、以下のものが使用されています。

 

この2つの技術を組み合わせ、gzipとBrotliの両方の圧縮の基礎となるDEFLATEが成り立ちます。これについては、gzipでの圧縮に関するこちらの記事で深掘りしています。

簡単に言えば、非圧縮ファイルがDEFLATEプロセスとしてLZ77とHuffmanアルゴリズムを経て、Brotliフォーマットに圧縮されます。そこから、INFLATEにより必要に応じてファイルを解凍することができます。

Brotliは現在gzipに相対するライバルですが、DEFLATEを使用する他の類似の技術も存在します。次のセクションでは、Brotliの優れている点について解説します。

Brotliの圧縮とgzipの圧縮の違い

前述のとおり、Brotliとgzipはどちらもデータの圧縮にDEFLATEを使用します。これだけでは圧縮方法切り替えの差異にはならず、多くの人がむしろ混乱してしまうはずです。

しかし、GoogleはDEFLATEをもとに、優れた技術を用いることで、より素早く高性能なデータ圧縮を実現しています。

Brotliによるデータ圧縮における辞書の使用

データ圧縮フォーマットの技術的な側面として、Brotliではデータ辞書内の既知の言語とテキストが使用されます。

これを踏まえて、開発の際には、効率的で柔軟性がありスケーラブルであることから、データを保存するためにキーと値のペアで構成される辞書が使用されます。例えば、PHPの辞書（「配列」）は以下のとおりです。

$cats = get_categories(
  array(
    'taxonomy' => 'link_category',
    'hierarchical' => 0,
    'include' => $link_cat,
  )
);

gzipで辞書は使用されませんが、Brotliは2つの辞書を使用します。

Brotliの静的辞書

1つ目は、一般的なコード用語についての静的な（つまり定義された）辞書で、HTML、CSS、JavaScriptテキストのリファレンスとして機能します。

6つの言語にわたり1万3,000以上の単語があり、Brotliはこれをコード内のリファレンスとして使用します。正確な例えではありませんが、WordPressのフックが複数のコードの集合を参照するのと同じようなものです。

エンコーダがコードを1バイトずつ選別する必要はありません。代わりに、参照先を調べ、辞書から定義を取り出し、次の参照先に進むことができます。

また、辞書の中には、現実世界のフレーズや、通常あまり圧縮を受けないコードが収録されていることにも気づくはずです。これにより、<HTML>のようなタグや、type="text/javascript"といったパラメータが圧縮され、さらなる最適化が進みます。

また、辞書には「変換」機能もあります。部分的な、不完全な、または、その他のタイプのフレーズが（接頭辞、接尾辞、または大文字といった要素を経て）まったく別のものになります。たとえば、「Work」が「Working」に、「html」が「HTML」に変換される、といった具合です。

Brotliの動的辞書

動的辞書は、コンテンツとコードをソースで解析するため、小さなデバイスと相性が良いのが特徴です。一方で大きなファイルの処理にはあまり向いていません。これは「スライディングウィンドウ」とも呼ばれ、最大で16MBになります。ここで、圧縮アルゴリズムが最新のデータを参照できるよう、一部が「キャッシュ」されることになります。常に変化するという意味で、非常に動的です。

これをgzipにおける約32KBのスライディングウィンドウと比較すると、リアルタイムの解析と圧縮の範囲が非常に広いことがわかります。実際、ほとんどの一般的な業務では、約4 MBのBrotliのスライディングウィンドウが使用されていますが、それでも競合する他のアルゴリズムと比較すると膨大な量だと言えます。

Brotliとgzipの比較─パフォーマンスとサポート

純粋な利用者数で見れば、gzipの圧縮が依然としてナンバーワンです。しかし、Brotliの利用シーンは、日々拡大しています。背景にあるのが、主要ブラウザでの幅広い採用です。Chromiumベースのブラウザでの導入も、この流れを後押ししています。

Brotliとgzipの両圧縮手法の比較について動画での解説もご用意しています。

「Can I Use」というサイトでは、各ブラウザで採用されている技術、そして、過去の記録を確認できます。この記事の執筆時点で、すべての主要バージョンを含む95%以上のブラウザが、Brotliを用いた圧縮を採用していることがわかります。

Brotliの導入状況を「Can I Use」で確認してみる
Brotliの導入状況を「Can I Use」で確認してみる

過去のgzipでの圧縮についての記事で、Brotliは競合アルゴリズムと比較して圧縮率は優れているものの、圧縮・解凍時間では劣るというベンチマークテストをご紹介しました。

複数のアルゴリズム間の圧縮性能比較（出典：OpenCPU）
複数のアルゴリズム間の圧縮性能比較（出典：OpenCPU）

しかし、Squash Benchmarkのテストからは、もう少し違う見方ができます。本当のところは、全体としてBrotliはgzipよりも柔軟で、一般的に高い圧縮率を実現すると考えられます。

Squash Benchmarkの調査結果を要約すると、以下の通りです。

  • Brotliは、すべての圧縮レベルにおいて、他を上回る圧縮率を実現できる（つまり、より小さな圧縮ファイルを生成）
  • gzipはほとんどの場合Brotliに速度で勝るものの、圧縮するレベルによって結果が異なる

Paul Calvano氏による詳しい解説もありますが、Brotliで大きなファイル圧縮率を実現するためには、それ相応のCPUが必要になります。実際には、最大の圧縮レベルでも最小のそれでも同じことが言えます。Cloudflareのベンチマークはこれを裏付けるような結果を示しています。ファイルサイズはより小さく、圧縮速度はそこそこです。

また、Pingdomなどのテストツールやコンテンツデリバリネットワーク（CDN）の中には、まだBrotliをサポートしていないものがありますので、この点も考慮する必要があります。この事実が、Brotliの動作について収集されるデータに歪みをもたらす可能性があります。テストの実行に際して「検出漏れ」が見られるかもしれません。つまり、採用されているファイル圧縮を無視し、ページ速度が実際よりも速く表示されることがあります。

Brotli圧縮のメリット

Brotliの圧縮についてはすでにご紹介したとおりですが、gzipの代わりにBrotliを選ぶ理由として要点をまとめると、次のようになります。

  1. gzipと同じ技術を使い、最新の手法でそれを強化している
  2. Brotliの辞書ベースの解析で、より多くのファイルをより高度に圧縮できる
  3. Brotliはgzipと比較しより多くの計算能力を必要とするものの、結果的にファイルサイズを小さくできる
  4. ほとんどのウェブサーバーで使用される圧縮レベル（レベル4や5などの中級レベル）で、Brotliは朝飯前でgzipより優れたパフォーマンスを発揮する
  5. Brotliは（あなたが慣れ親しんでいるベンチマークツールで非対応であろうとも）ブラウザ全体でほぼ普遍的にサポートされている
  6. Brotliは無料で使用でき、オープンソース（これは、CloudflareのようなBrotli互換のCDNを使用する場合に嬉しいポイント）

CloudflareがすべてのサーバーでBrotliを用いた圧縮を採用していることは注目に値します。実際、それどころか、Brotliに修正とさらなる最適化を加えたバージョンを使用し、速度とファイル配信に関してさらなる性能が確保されています。

Kinstaでは、すべてのプランにCloudflare統合が標準で付帯するため、ご利用の全てのサイトでの圧縮にBrotliが使用されます。これは、Kinstaがホスティング市場をリードするために続けている努力の一部にすぎません。

自分のサイトでの圧縮にBrotliが使用されているか確認する方法

Brotli圧縮はまだ標準ではないので（標準になりかけている段階です）、自分のサイトでこれが使用されているかどうか確認することをおすすめします。方法はいくつかあります。

1. オンラインツールを使用する

サイトでBrotliの圧縮が採用されているかどうか確認する最も簡単な方法は、オンラインツールの使用です。関連サービスは複数ありますが、その中でも素早く簡単に使えて、セットアップに関する多くの情報が確認できるものを選びましょう。

BrotliのチェックにおすすめしたいのがGift of Speedです。

The Gift of Speedのウェブサイト
The Gift of Speedのウェブサイト

サイトでgzip、Brotliが使われているか、またはまったく圧縮が実行されていないかわかります。また、対策の足がかりになる指標も表示されます。これは重要な洞察になります。というのも、サイトのサーバーでどんな圧縮アルゴリズムが使用されているかだけで、全体像を把握することはできません。

ウェブサイトを構成する要素はたくさんあり、サードパーティのライブラリや依存関係も考慮する必要があります。CDNを使用して配信することもできますが、その場合、最高のパフォーマンスを確保するためにBrotliの圧縮を採用するのが望ましいです。

Gift Of Speedで個々のアセットをテストする際には、「Server」の値を見てみましょう。ここで、配信方法を確認することができます。

Gift Of Speedの分析結果ページ（Cloudflareを確認）
Gift Of Speedの分析結果ページ（Cloudflareを確認）

Kinstaの全てのサイトで、Cloudflare提供のKinsta CDNが実行されます。そのため、チェーンとサーバーアーキテクチャ全体でBrotliの圧縮が有効になっています。

2. ブラウザの開発者ツールを使う

ウェブ関連のあらゆる種類の調査やトラブルシューティングにブラウザの検証機能が使えます。これを使って、サイト（あるいは特定のアセット）でBrotliを用いた圧縮が実行されているかどうかを確認できます。

Brave、Edge、Firefox、Chromeなどの主要ブラウザでは、「Network」＞「All」に移動します。

このままでは、コンテンツヘッダーに関する情報は表示されません。左側からアセットまたはリクエストを選択する必要があります。下にスクロールしていくと、「Headers」情報のパネルが見つかります。

ここでスクロールし、content-encoding: brの行を探します。

Braveの開発者ツール（サイトでBrotliの圧縮が有効になっていることを確認する）
Braveの開発者ツール（サイトでBrotliの圧縮が有効になっていることを確認する）

content-encoding: brがあれば、そのサイトでBrotliが有効になっています。

サイトでBrotliを用いた圧縮を有効化する方法

最後に、こちらのセクションでは、サイトにおけるBrotliを用いた圧縮の有効化方法を複数ご紹介します。最初のものは、Kinstaを使用していないWordPressサイトの大部分におすすめするアプローチです。そして最後のものは、是非ともチェックしておきたいお得な選択肢となっています。

1. WordPressプラグインを使用する

ほぼすべてのWordPressサイトで、少なくとも1つのプラグインが使用されています。それどころか、多くの場合、サイトが必要とする機能に応じて、数々のプラグインがインストールされていることでしょう。プラグインの用途の一つがキャッシュです。この役割を担うプラグインはたくさんあります。しかし、すべてのプラグインでBrotliの圧縮が利用できるわけではく、賢く選択する必要があります。

サイトに変更を加える前に、後でいつでも復元できるように、バックアップを取っておきましょう。それでは、簡単に設定を調整できるのでW3 Total Cacheを使用することにします。

WordPress管理画面から「パフォーマンス」＞「ブラウザーキャッシュ」に移動します。

W3 Total Cacheの「ブラウザーキャッシュ」
W3 Total Cacheの「ブラウザーキャッシュ」

この画面に圧縮の方法が2つ表示されますが「Enable HTTP (brotli) Compression」の方を選んで、チェックマークを入れてください。

W3 Total Cacheの設定画面で「Brotli」の圧縮を有効にする
W3 Total Cacheの設定画面で「Brotli」の圧縮を有効にする

しかし、この設定がすべてのサイトや状況に適しているわけではありません。例えば、Kinstaでは、高速、ハイパフォーマンス、かつ信頼性の高いホスティング環境のために最適化を施しています。そのため、必要のない（かえって干渉を起こしてしまう）プラグインが多数あり、使用が禁止されているものもあります。

これに該当する場合、別の選択肢をおすすめします。

2. サーバーでBrotliを有効化する

サーバーの種類を選択するとなると、NginxとApacheの長年にわたる戦いを無視することはできません。（今のところ）前者に分があります。とはいえ、どちらのサーバータイプでもBrotliを用いた圧縮が可能です。それぞれ方法は異なります。

詳しい手順に進む前に、いくつか前提条件があります。

  • 特定のサーバーの設定ファイルにアクセスする方法を、事前に理解しておくことをおすすめします。
  • コマンドラインの知識は、特にApacheサーバーに関しては有益です。コマンドを実行するには、sudo権限を持つrootユーザーである必要があります。
  • テキストエディタが必要になることもありますが、今回のような簡単な変更であれば基本的に問題ないはずです。
  • 場合によっては、サーバーにセキュアシェル（SSH）ユーザーとしてログインするための認証情報が必要になります。この情報はお使いのサーバーのコントロールパネル（KinstaであればMyKinsta）で確認するか、サポートに質問してください。

自分での操作が不安であれば、他の方法を検討するか、各種サービスのサポートを利用することをおすすめします。それでは、Nginxから順番に手順を説明していきます。

Nginx

NginxサーバーでBrotliを用いた圧縮を有効にするには、まずnginx.confファイルを特定します。以下のいずれかにあるはずです。

  • /usr/local/nginx/conf
  • /etc/nginx
  • /usr/local/etc/nginx

ファイルを開いたら、以下を一番下に追加してください。

brotli on;
brotli_static on;
brotli_comp_level 9; # 1～11の間で変更可能。4〜9は性能のバランスが良い。
brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;

これにより、Brotliが有効になり、静的ファイルの配信に使用されます。brotli_comp_level の設定は、状況に応じて変更することができます。数値が高いほど圧縮率が高くなりますが、パフォーマンスが低下します。

Apache

Apacheには設定の柔軟性があるので、手間なくBrotliの圧縮を有効化できます。

方法は以下の通りです。

  1. コマンドプロンプトまたはターミナルアプリケーションを使用して、root（sudo）ユーザーとしてサーバーにログインする
  2. a2enmod brotliコマンドを実行し、圧縮を有効にする
  3. Apache VirtualHostまたはサーバーの設定に、AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascriptの行を追加して、圧縮したいファイルタイプを設定する

Apacheは静的圧縮をサポートしていませんが、BrotliCompressionQuality LEVEL-NUMBER を使用してBrotliを使った圧縮のレベルを変更することができます。「LEVEL-NUMBER」の部分を1から11の間の数字に置き換えてください。

3. Brotliをサポートするサーバーを使用する

サイトでBrotliの圧縮を有効にする最も簡単な方法は、これをデフォルトで採用しているホスティングサービス（サーバー）の利用です。Kinstaは、Cloudflare CDNの統合により、Brotliを用いた圧縮を標準で採用しています。

CloudflareのCDNページ
CloudflareのCDNページ

Kinsta CDNは、すべてのプランを対象にCloudflareのインフラストラクチャを介し提供されているため、自分自身で別途有効にせずとも、すべてのサイトでBrotliの圧縮が行われます。

お使いのサーバーでBrotliの圧縮が選択可能か、またどのレベルまで設定できるのか確認してみることをおすすめします。サイトで最大限の性能、安定性、安全性を確保するためには、優れたホスティングサービスが不可欠です。

まとめ

データの圧縮は、現代のウェブ開発・使用シーンに欠かせない要素です。ウェブサイトを構成する数々の（複雑な）ファイルタイプによって、その容量は日々かさんでいくもの。そのすべてに、何かしらの圧縮が必要となります。

典型的なアプローチはこれまでgzipでしたが、Brotliが急速な普及を見せています。

gzipと同じ基盤を利用しながらも、Brotliにはパフォーマンス向上のための改善が加えられています。前述したように、圧縮リクエストを高速に処理するために、コンテキストマッピングを採用し、動的な配置を可能にする辞書を使用しています。その対象はgzipよりはるかに膨大で、モバイルユーザーもここから圧縮の恩恵を受けることができます。

ここで朗報です。Kinstaでは、Cloudflareとの統合により、すべてのお客様にBrotliでの圧縮をご利用いただけます。つまり、Kinstaを選んだサイトは、gzipを使用するライバルサイトよりも素早く、小型デバイスの利用者向けに顕著な表示速度を実現できることを意味します。

Brotliを用いた圧縮について何かご質問がございますか？以下のコメント欄でお気軽にお聞かせください。

Salman Ravoof

独学のウェブ開発者、ライター、クリエイターでもあり、大の無料オープンソースソフトウェア（FOSS）好き。その他の好きなものは、科学、哲学、写真、芸術、猫、そして食。詳しい仕事情報はウェブサイトおよびXアカウントで公開している。