![[アップデート] CloudFront で動的に Brotli 形式の圧縮をできるようになりました！](https://devio2023-media.developers.io/wp-content/uploads/2019/05/amazon-cloud-front.png)
[アップデート] CloudFront で動的に Brotli 形式の圧縮をできるようになりました！
CloudFront で Brotli の圧縮がサポートされました。Gzip に比べて最大で 24%のファイルサイズの圧縮が期待でき、より効率的なコンテンツ配信ができるようになりました！
何が嬉しい？
Brotli（ブロトリ）とは、Web サイトのファイルサイズをさらに縮小するために、Google が開発したオープンソースの圧縮アルゴリズムです。
Brotli では HTML や JavaScript で頻出されるフレーズが含まれる静的辞書を用いて圧縮しており、Gzip よりも圧縮率と圧縮速度が優れてます。[1]現在は主要なブラウザでサポートされています。
これまで Brotli で圧縮されたファイルを CloudFront で配信するには、オリジン側で圧縮しなくてはなりませんでした。オリジン側で圧縮する方法については下記ブログで紹介しています。
今回のアップデートによって、CloudFront 上で動的に Brotli で圧縮できるようになり、より早くコンテンツ配信をできるようになりました。
仕様
CloudFront の圧縮に関する仕様は以下の通りです。太字は Brotli に関する箇所です。
- ビューアが Gzip と Brotli の両方をサポートする場合、Brotli を優先
- Chrome および Firefox ではリクエストが HTTPS の場合にのみ Brotli 圧縮をサポート（HTTP リクエストでは Brotli 未サポート）
- Amazon S3 オリジンとカスタムオリジンの両方に対応
- CloudFront が圧縮サポートするファイルタイプはこちら
- CloudFront が圧縮するファイルのサイズは 1,000 バイトから 10,000,000 バイト
詳細はドキュメントを参照ください
やってみた
Brotli の圧縮を有効化してみます。
Brotli の有効化はキャッシュポリシーで行います。キャッシュポリシーについては以下のブログを参照ください。
EC2 上に WordPress を作成し、前段に CloudFront においた構成で試してみます。
Brotli 有効化
キャッシュポリシーを作成します。
CloudFront > Policies から[Create cache policy]を選択します。
キャッシュポリシーの作成画面で Cache brotli objects を有効化します。
ディストリビューションの Behavior でポリシーを設定します。Cache Policy で先程作成したポリシーを選択し、Compress Objects Automatically を有効化します。（Compress Objects Automatically を有効化しないと圧縮されません）
設定は以上になります。
動作確認
用意した WordPress の記事にアクセスし、Chrome のデベロッパーツールで圧縮形式を確認します。index.js のレスポンスヘッダーを開きます。
content-type が br となっており、Brotli で圧縮されていることを確認できました！
比較してみた（未圧縮、Gzip、Brotli）
未圧縮、Gzip、Brotli の圧縮サイズを比較してみます。（解凍も含む処理速度の比較も出したかったのですが、コンテンツの量が少なく、試行ごとに値のばらつきがあるため速度の比較については割愛します）
デベロッパーツールの下部にある、全体の転送サイズを確認しました。
確認結果は以下の通りです。
| 圧縮形式 | 転送サイズ | 未圧縮に対する圧縮率 |
|---|---|---|
| 未圧縮 | 399 KB | 100 % |
| Gzip | 180 kB | 45.1 % |
| Brotli | 176 kB | 44.1 % |
コンテンツが少なかったため大きな差は見られませんでしたが、Brotli の方が Gzip に比べて圧縮率が良い結果を得られました。
さいごに
CloudFront で Brotli 形式の圧縮がサポートされたので試してみました。検証環境が適切でなかったため、Gzip と比べて期待する圧縮率は見られませんでしたが、ファイル数やサイズが増えたきに Brotli の効果を得られるのではないかと思います。
既存環境の多くはキャッシュポリシーが使われておらず Brotli に移行するには最初手間が発生しますが、パフォーマンス向上が期待されますので、是非お試しいただければと思います。
参考
- WEBスピード向上・転送量削減する Brotli 圧縮と CDN の連携
- Brotli vs. GZIP Compression: Which One is Better for WordPress?
