html、cssはgzip圧縮されており、jsのみがなぜか圧縮されていないという現象が起きたので、改めてサーバからクライアントへのデータ通信量を減らす方法であるgzipについてブログします🤔
■そもそも圧縮通信のメリット/デメリット
- ネットワークの通信量を削減できる
- ブラウザのレンダリングの開始を早く行える
- 圧縮アルゴリズムをサポート必須
- 処理負荷が高くなる
ちなみに圧縮アルゴリズムはHTTPリクエストの際にAccept-Encodingヘッダを付与するとサーバに伝えられます。そして、サーバ側はそのヘッダで教えてもらった圧縮アルゴリズムをサポートしていると、コンテンツを圧縮して応答するイメージ👍
・curl -I -H
実際にcurlコマンドでこのブログのAccept-Encodingを覗いて見ると・・・
gzipされていることがわかります。🙆🏻♂️
1 2 3 4 5 6 7 8 9 10 | $ curl -I -H 'Accept-Encoding: gzip,deflate' https://blog.adachin.me HTTP/2 200 server: h2o/2.2.5 date: Tue, 22 Jan 2019 13:29:22 GMT x-powered-by: PHP/7.2.10-0ubuntu0.18.04.1 content-type: text/html; charset=UTF-8 vary: Accept-Encoding, Cookie cache-control: max-age=3, must-revalidate content-encoding: gzip content-length: 20708 |
■JSがgzipされていない理由と対応
・nginx.conf
1 2 3 4 5 6 7 | gzip on; gzip_min_length 0; gzip_buffers 4 8k; gzip_types text/plain text/xml application/x-javascript text/css; gzip_disable "msie6"; gzip_vary on; gzip_static on; |
“application/x-javascript”の設定が入っているのにもかかわらず、JSがgzipされていない理由としてはブラウザがどのようなパターンで入ってくるのか未知数で、互換も込みで指定する際は以下3つの書式が必要になるそうです。
- text/javascript
- application/x-javascript
- application/javascript
ちなみに2006年にMIME-Typeが定義されているので、“application/javascript”が主流みたい。
(http://xn--lcki7of.jp/153/より)
なので、以下のように追加してみたところ！！！
1 | gzip_types text/plain text/xml application/x-javascript application/javascript text/css; |
👍
■まとめ
ちなみにH2Oでは“gzip: ON”するだけ！
