Cloudflare CDN Brotli圧縮をためす

Cloudflare CDNが先日Brtoli圧縮のモード11に対応しました。

Brotli圧縮とは、Webコンテンツに頻出する単語を辞書として用いることで平均してgzipより高い圧縮率を達成します。以下の対応しているブラウザであればCDNやオリジンからResponseで戻されたBrotli圧縮されたコンテンツは自動で解凍され画面にレンダリングされるため、ユーザーは特に意識する必要がありません。
　　　　　・Google Chrome 49以降
　　　　　・Microsoft Edge 15以降
　　　　　・Mozilla Firefox 44以降
　　　　　・Safari 11以降

Brotliには0から11まで12段階の圧縮レベルが準備されており、数字が大きくなる程圧縮率が高くなる一方、より多くの計算リソースを消費し、結果としてブラウザのレンダリングやCDN側の負荷を高めることとなる可能性があるため、従来Cloudflareではレベル4を用いてきました。オリジンがBrotli圧縮に対応していない場合CDN側でコンテンツに対してレベル4圧縮を施しブラウザにレスポンスを戻すことが可能です。

一方でオリジンがBrotli圧縮レベル4より高い11等でレスポンスを戻す場合、今回のアップデートによりCloudflareではそのままの圧縮レベルでレスポンスを戻すことが可能となります。また同時にオリジンがBrotli圧縮に対応しているにもかかわらずブラウザがgzip圧縮のみに対応している場合、以下の図の通りCloudflare側で一度Brotliを解凍し、gzipで圧縮しなおすことが可能です。従来これはレベル4にまで対応していましたが今回のアップデートでレベル11まで対応しました。

やってみる

設定方法は簡単です。マネージメントコンソール、左ペインのSpeedから最適化を選びます。

コンテンツの最適化タブからBrotliのトグルをオンにするのみです。

尚Cloudflareでは今後Brotli圧縮がデフォルトでオンとなるため、この設定自体がなくなることが予告アナウンスされています。
この状態でDNS ProxyモードにセットしたHTMLを読み込みます。

オリジンへ直接アクセスした場合、以下の通り975Bを読み込んでいます。

一方CDN経由での読み込みの場合、以下の通り128Bを読み込んでいます。

Response HeaderにはContent-Encoding:brと表示されており、Brotli圧縮でコンテンツが戻されていることがわかります。

Request HeaderにはAccept-Encoding:gzip, deflate, brと表示されており、リクエスト時にブラウザが対応している圧縮方式を提出していることがわかります。

ちなみに、Accept-Encoding:gzipとしてBrotliを受け付けないようにRquest Headerを書き替えると以下の通りとなります。

883BとBrotliほどの効果はないものの圧縮により転送量は少し減っています。

Cloudflareではデフォルトで以下のコンテンツタイプに圧縮を適応させます。

text/html
text/richtext
text/plain
text/css
text/x-script
text/x-component
text/x-java-source
text/x-markdown
application/javascript
application/x-javascript
text/javascript
text/js
image/x-icon
image/vnd.microsoft.icon
application/x-perl
application/x-httpd-cgi
text/xml
application/xml
application/xml+rss
application/vnd.api+json
application/x-protobuf
application/json
multipart/bag
multipart/mixed
application/xhtml+xml
font/ttf
font/otf
font/x-woff
image/svg+xml
application/vnd.ms-fontobject
application/ttf
application/x-ttf
application/otf
application/x-otf
application/truetype
application/opentype
application/x-opentype
application/font-woff
application/eot
application/font
application/font-sfnt
application/wasm
application/javascript-binast
application/manifest+json
application/ld+json
application/graphql+json
application/geo+json

利用上の注意点

コンテンツを操作するタイプのCloudflare一部の機能をオンにしている場合（画像最適化＆圧縮など）オリジンが仮に圧縮されたコンテンツをCDNに戻したとしても、Cloudflare CDNでは一度その圧縮を解凍し、処理を施し、再度圧縮しなおします。この場合の処理負荷（パフォーマンス遅延）については皆さんの環境毎に検証が必要です。

特定のコンテンツやパスに対して圧縮機能をオフにする場合、https://developers.cloudflare.com/rules/configuration-rules/ から設定が可能です。