Spring Boot で gzip を有効化してフロント配信を軽くする
はじめに
Spring Boot をバックエンド兼フロントエンド配信サーバーとしてモノリシックな構成で使っているとき、レスポンスを gzip 圧縮しておくとネットワーク通信量をかなり削減できます。
なにが嬉しいのか
- HTML / JS / CSS などテキストベースのファイルは圧縮効率が高く、体感でも読み込みが速くなることが多い
- 設定は
application.ymlに数行書くだけ - ブラウザ側では特別な実装は不要（
Content-Encoding: gzipが付いて返ってきたレスポンスは、ブラウザが自動で伸長してくれる）
設定方法
application.yml の例
server:
compression:
enabled: true
mime-types: text/html,text/xml,text/plain,text/css,text/javascript,application/javascript,application/json
min-response-size: 2KB
各設定項目の説明
| 項目 | 説明 |
|---|---|
server.compression.enabled |
gzip 圧縮を有効化するフラグ |
server.compression.mime-types |
圧縮対象にする Content-Type。JS / CSS / JSON / HTML など、テキスト系を指定することが多い |
server.compression.min-response-size |
何バイト以上のレスポンスを圧縮するか。デフォルトは 2KB（小さすぎるものは圧縮してもあまり得をしないため） |
どのレスポンスが圧縮されるのか
ブラウザからサーバーへのリクエストには、標準で以下のようなヘッダーが付いています。
Accept-Encoding: gzip, deflate, br
Spring Boot 側で compression.enabled=true にしておくと、次の流れで圧縮が行われます。
- クライアントの
Accept-Encodingを見て gzip が使えそうか判断 - 対象の
mime-typesかつmin-response-size以上のレスポンスだけ gzip 圧縮 - 圧縮したレスポンスに
Content-Encoding: gzipを付けて返す
ブラウザ側では何もしなくてよい
フロントエンド側で解凍処理を書く必要はありません。
- ブラウザは
Content-Encoding: gzipを見て自動で伸長する - JavaScript から見ると普通のレスポンスと同じように扱える
-
fetchのresponse.text()/response.json()などもそのまま使える -
<script src="/app.js">などで読み込む場合も意識することはない
動作確認方法（ブラウザ DevTools）
Chrome を例に動作確認の手順を記載します。
- 対象のページを開く
- DevTools を開く（
Cmd + Option + I/F12など） - Network タブ を開いてページをリロード
- JS / CSS / HTML のリクエストを 1 つ選択
-
Headers タブの Response Headers を確認
-
Content-Encoding: gzipが付いていれば OK
-
Chrome の Network タブでは Size 列が 10.3 KB / 45.1 KB のように 転送サイズ / 展開後サイズ で表示されるので、「どのくらい圧縮されているか」をざっくり確認できます。
画像や動画はどうする？
PNG / JPEG / MP4 など、すでに圧縮されているバイナリについては以下の理由から mime-types に含めない方が無難
- さらに gzip してもほとんどサイズが変わらない
- CPU だけ余計に使う
まとめ
数行書くだけでコスパよく初回ロードの体感速度が変わるケースが多いので、Spring Boot でフロントを配信している場合はぜひ試してみてください。