brotli を使用してネットワーク ペイロードを最小化、圧縮する

Michael DiBlasio

ヒント: この Codelab に沿って進めるには、こちらの Glitch デモを別のタブで開いてください。

注: この Codelab では Chrome DevTools を使用します。ダウンロードがまだの場合は、Chrome をダウンロードします。

この Codelab は、ネットワーク ペイロードの縮小と圧縮の Codelab の拡張版であり、圧縮の基本コンセプトを理解していることを前提としています。この Codelab では、gzip などの他の圧縮アルゴリズムと比較して、Brotli 圧縮（br）によって圧縮率とアプリの全体的なサイズをさらに削減する方法について説明します。

測定

注: このアプリケーションでは webpack が使用されているため、コードに変更を加えると新しいビルドがトリガーされ、数秒かかることがあります。完了すると、変更がアプリケーションに反映されます。

最適化を追加する前に、まずアプリの現在の状態を分析することをおすすめします。

1. [Remix to Edit] をクリックして、プロジェクトを編集可能にします。
2. サイトをプレビューするには、[View App] を押します。次に、[Fullscreen] を押します。

前回の Minify and compress network payloads Codelab では、main.js のサイズを 225 KB から 61.6 KB に削減しました。この Codelab では、Brotli 圧縮によってこのバンドルサイズをさらに縮小する方法について説明します。

Brotli 圧縮

警告: 多くのホスティング プラットフォーム、CDN、リバース プロキシ サーバーでは、デフォルトでアセットが圧縮エンコードされるか、簡単な設定で圧縮エンコードできるようになっています。ホスティング プラットフォームが Brotli をサポートしている場合は、このチュートリアルで説明するように、Brotli でアセットを圧縮するようにサーバーを設定する必要がない場合があります。

Brotli は、gzip よりも優れたテキスト圧縮結果を実現できる新しい圧縮アルゴリズムです。CertSimple によると、Brotli のパフォーマンスは次のとおりです。

• JavaScript 用の gzip より 14% 小さい
• HTML の gzip より 21% 小さい
• CSS の gzip より 17% 小さい

Brotli を使用するには、サーバーが HTTPS をサポートしている必要があります。Brotli は、すべての最新のブラウザでサポートされています。Brotli をサポートするブラウザは、Accept-Encoding ヘッダーに br を含めます。

Accept-Encoding: gzip, deflate, br

使用されている圧縮アルゴリズムは、Chrome デベロッパー ツールの [Network] タブの Content-Encoding フィールド（Command+Option+I または Ctrl+Alt+I）で確認できます。

Brotli を有効にする方法

Brotli でエンコードされたリソースを送信するようにウェブサーバーを設定する方法は、エンコード方法によって異なります。リクエスト時に Brotli でリソースを動的に圧縮するか（動的）、ユーザーがリクエストする前にエンコードして圧縮しておくか（静的）を選択できます。

動的圧縮

動的圧縮では、ブラウザからリクエストされたアセットをオンザフライで圧縮します。

メリット

• アセットの圧縮バージョンを保存して作成、更新する必要はありません。
• オンザフライ圧縮は、動的に生成されるウェブページに特に適しています。

デメリット

• 圧縮率を高めるために高いレベルでファイルを圧縮すると、時間がかかります。この場合、サーバーから送信される前にアセットが圧縮されるのをユーザーが待つことになるため、パフォーマンスが低下する可能性があります。

Node と Express を使用した動的圧縮

server.js ファイルは、アプリケーションをホストする Node サーバーの設定を行います。

const express = require('express');
const app = express();
app.use(express.static('public'));

const listener = app.listen(process.env.PORT, function() {
  console.log(`Your app is listening on port ${listener.address().port}`);
});

この処理では、express をインポートし、express.static ミドルウェアを使用して、public/directory 内のすべての静的 HTML、JS、CSS ファイルを読み込みます（これらのファイルは、ビルドごとに webpack によって作成されます）。

リクエストされるたびにすべてのアセットが brotli を使用して圧縮されるようにするには、shrink-ray モジュールを使用します。まず、package.json に devDependency として追加します。

"devDependencies": {
  // ...
  "shrink-ray": "^0.1.3"
},

これをサーバー ファイル server.js にインポートします。

const express = require('express');
const shrinkRay = require('shrink-ray');

express.static がマウントされる前に、ミドルウェアとして追加します。

// ...
const app = express();

// Compress all requests
app.use(shrinkRay());
app.use(express.static('public'));

アプリを再読み込みして、[ネットワーク] パネルでバンドルサイズを確認します。

Content-Encoding ヘッダーの bz から brotli が適用されていることがわかります。main.bundle.js は 225 KB から 53.1 KB に削減されました。これは、gzip（61.6 KB）と比較して約 14% 小さくなっています。

注: Brotli には、0（圧縮なし）から 9（最大圧縮）までの 11 段階の品質レベルがあります。品質を 1 に設定すると、処理は非常に高速になりますが、効果は低くなります。一方、品質を 11 に設定すると、処理は非常に低速になりますが、ファイルサイズを大幅に削減できます。標準の brotli ライブラリではデフォルトの品質が 11 であるのに対し、shrink-ray ではデフォルトの品質が 4 であることに注意してください。これは、一般的に動的コンテンツに適しています。shrinkRay([options]) に options パラメータを渡すことで、brotli アルゴリズムのパラメータを調整できます。

静的圧縮

静的圧縮の考え方は、アセットを事前に圧縮して保存することです。

メリット

• 圧縮レベルが高いことによるレイテンシは、もはや問題ではありません。ファイルを直接取得できるようになったため、ファイルを圧縮するためにオンザフライで処理を行う必要はありません。

デメリット

• アセットはビルドごとに圧縮する必要があります。高い圧縮レベルを使用すると、ビルド時間が大幅に増加する可能性があります。

webpack を使用した Node と Express による静的圧縮

静的圧縮ではファイルを事前に圧縮するため、ビルドステップの一環としてアセットを圧縮するように webpack の設定を変更できます。これには brotli-webpack-plugin を使用できます。

まず、package.json に devDependency として追加します。

"devDependencies": {
  // ...
 "brotli-webpack-plugin": "^1.1.0"
},

他の webpack プラグインと同様に、構成ファイル webpack.config.js にインポートします。

var path = require("path");

//...
var BrotliPlugin = require('brotli-webpack-plugin');

plugins 配列に含めます。

module.exports = {
  // ...
  plugins: [
    // ...
    new BrotliPlugin({
      asset: '[file].br',
      test: /\.(js)$/
    })
  ]
},

プラグイン配列では、次の引数を使用します。

• asset: ターゲット アセット名。
• [file] は、元のアセット ファイル名に置き換えられます。
• test: この正規表現に一致するすべてのアセット（.js で終わる JavaScript アセット）が処理されます。

たとえば、main.js は main.js.br に名前が変更されます。

アプリが再読み込みされて再ビルドされると、メインバンドルの圧縮バージョンが作成されます。Glitch コンソールを開き、Node サーバーによって提供される最終的な public/ ディレクトリの内容を確認します。

1. [ツール] ボタンをクリックします。
2. [コンソール] ボタンをクリックします。
3. コンソールで次のコマンドを実行して、public ディレクトリに移動し、そのすべてのファイルを表示します。

cd public
ls -lh

brotli で圧縮されたバージョンのバンドル main.bundle.js.br もここに保存されるようになり、main.bundle.js よりもサイズが約 76% 小さくなっています（225 KB に対して 53 KB）。

次に、元の JS バージョンがリクエストされるたびに、これらの brotli 圧縮ファイルを送信するようにサーバーに指示します。これを行うには、express.static でファイルが提供される前に、server.js で新しいルートを定義します。

const express = require('express');
const app = express();

app.get('*.js', (req, res, next) => {
  req.url = req.url + '.br';
  res.set('Content-Encoding', 'br');
  res.set('Content-Type', 'application/javascript; charset=UTF-8');
  next();
});

app.use(express.static('public'));

app.get は、特定のエンドポイントに対する GET リクエストにどのように応答するかをサーバーに指示するために使用されます。次に、コールバック関数を使用して、このリクエストの処理方法を定義します。このルートは次のように機能します。

• 最初の引数として '*.js' を指定すると、JS ファイルを取得するために呼び出されるすべてのエンドポイントで機能します。
• コールバック内で、.br がリクエストの URL に追加され、Content-Encoding レスポンス ヘッダーが br に設定されます。
• Content-Type ヘッダーは application/javascript; charset=UTF-8 に設定され、MIME タイプを指定します。
• 最後に、next() により、シーケンスが次のコールバックに継続されます。

一部のブラウザは brotli 圧縮をサポートしていない可能性があるため、brotli 圧縮ファイルを返す前に、Accept-Encoding リクエスト ヘッダーに br が含まれていることを確認して、brotli がサポートされていることを確認します。

const express = require('express');
const app = express();

app.get('*.js', (req, res, next) => {
  if (req.header('Accept-Encoding').includes('br')) {
    req.url = req.url + '.br';
    console.log(req.header('Accept-Encoding'));
    res.set('Content-Encoding', 'br');
    res.set('Content-Type', 'application/javascript; charset=UTF-8');
  }

  next();
});

app.use(express.static('public'));

アプリが再読み込みされたら、もう一度 [ネットワーク] パネルを確認します。

完了しました。Brotli 圧縮を使用してアセットをさらに圧縮しました。

まとめ

この Codelab では、brotli を使用してアプリの全体的なサイズをさらに削減する方法について説明しました。サポートされている場合、brotli は gzip よりも強力な圧縮アルゴリズムです。

警告: 手動で実装する前に、CDN が brotli をサポートしていることを確認してください。brotli を手動で実装する必要があるが（この Codelab で説明したように）、gzip などの他の圧縮アルゴリズムを CDN でサポートしている場合は、brotli のメリットと実装に必要な労力を比較検討することをおすすめします。