カテゴリー
【Linuxコマンドでウェブサイト運営術】Alpine LinuxでGzip/Brotliを試す
※ 当ページには【広告/PR】を含む場合があります。
2021/01/21
今回はAlpineLinuxでのBrotli圧縮形式でのちょっとしたテクニックとAWS S3バケットへのアップロードをするやり方を解説してみようと思います。
無圧縮ではレスポンスが重すぎる
SPA・PWAをサーバー側から供給するわけですが、少しでも軽量なサイズにしたいということを考えます。
現在ではgzipは元より全てのブラウザに対応していますし、brotli形式でもほぼ全てのブラウザで展開できる状況になっています。
参考先:
昨今のSPAでもHTML5ゲームなど100MB近くの容量のリソースファイルをオンデマンドで取り扱うケースもないわけではないので、無圧縮では対応できないシーンも出てしまします。
また他のモチベーションとしては、静的ホスティングしたウェブサイトにアクセスする際のリソース転送量の低減によるコストカット効果も見込まれます。
20MBのファイルで月間10万回アクセスこれが転送料半分の
10MBのファイルで月間10万回アクセスさて以下では、高圧縮率を誇る
Brotliの使い方
AlpinelinuxへのGzip・Brotliの導入方法と、ちょっとした応用を以降で解説していきます。
BrotliとGzipを簡単な使い方
まずはalpineの環境に
brotli $ apk update && apk upgrade && apk add --no-cache brotli
$ brotli --version
brotli 1.0.7
なお
gzip $ gzip --version
gzip: unrecognized option: version
BusyBox v1.31.1 () multi-call binary.
たとえばSPAのアプリをdistフォルダに吐き出した後、サイズの確認をしてみると、
$ ls -lh dist/
total 17M
12.2K extension-worker.js
33.7K favicon.ico
1.5K fcec474a1ea82bfe2add.worker.js
869 index.html
16.7M main.js
869 player.html
となっています。
今回は特に一纏めにバンドルしたメインのjsファイルの容量が大きいようです。
で、そこからこの
main.js $ ls -lh
16.7M main.js
#👇best compression level (=11)
$ brotli -v -n -k -q 11 main.js
5.1M main.js.br
#👇high compression level (=9)
$ brotli -v -n -k -q 9 main.js
5.7M main.js.br
#👇moderate compression level (=5)
$ brotli -v -n -k -q 5 main.js
6.3M main.js.br
#👇lowest compression level (=0)
$ brotli -v -n -k -q 0 main.js
7.7M main.js.br
圧縮レベルを11くらいにすると三分の一になっています。 また圧縮レベルゼロでも圧縮しないわけでは無さそうです。
比較としてgzipのほうも試してみます。
#👇best compression level (=9)
$ gzip -k9 main.js
6.6M main.js.gz
#👇moderate compression level (=5)
$ gzip -k5 main.js
6.9M main.js.gz
#👇lowest compression level (=1)
$ gzip -k1 main.js
7.1M main.js.gz
結果はbrotliの方がベスト圧縮設定のときと比較して1.5MBほども小さくできるようで、これは予想どおりです。
AWS S3から配信する
ただファイルを圧縮しただけでは物足りないので、AWS S3バケット上にアップロードして利用できるかを試してみます。
まずbrotliで圧縮したファイルをS3バケットにアップロードして、そのファイルの
プロパティ
メタデータに以下のように
Content-Encodingbr
ブラウザのデバッグコンソールからアクセス時のレスポンスヘッダーを確認すると、ちゃんと
br
AWS CLIでのアップロード対応
先程はAWS S3のダッシュボードコンソールから手動でContent-Encodingを切り替えましたが、アップロードするリソースファイルが大量にあるととても手で変更なんかしてられません。
たとえばaws s3のコマンドには
--content-encoding $ aws s3 sync [アップロードするローカルのフォルダパス] s3://[アップロード先のS3バケットのパス]/ \
--exclude '*' --include 'index.html' --include '*.js' --include '*.css'\
--content-encoding='br' --delete
などとすると、アップロードする全てのファイルに圧縮形式が付与されるようになります。
まとめ
今回はサーバー側で使うリソースの圧縮形式のお話を中心に解説しました。
より圧縮率の高いBrotliを利用することで、よりSEO効果の高いウェブサイト制作が捗るものと思います。
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー