WEBレスポンススピード高速化委員会〜nginxでgzip圧縮有効化編

事の始まりは弊社Webサイトのスピードテストをこれで計測したことからはじまった。

結果がコレだ！

なんてこったい・・・。POORなんて言われちまった。
Desktopはいいとして（いや、ダメだけど）Mobile全盛のこの時代にPOORはマズイ！

というわけで対応することに。

まず気になったのはコレ

ううむ。gzipで圧縮転送しなさいよってお話だ。

gzip圧縮とはそもそもなんだっけ？

ファイルサイズを小さくして転送するための圧縮方法のひとつ。ブラウザ-サーバー間の転送速度を向上させる。

まずはgzip圧縮が有効になっていないことを確認する

curl -I -H 'Accept-Encoding: gzip,deflate' http://www.noraneko.works

HTTP/1.1 200 OK
Server: nginx/1.8.1
Date: Thu, 14 Jul 2016 13:27:24 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 36205
Connection: keep-alive
X-Powered-By: Express
ETag: W/"8d6d-78T/WCIdSw9TD5m+UyS5/Q"

結果に Content-Encoding: gzip がない場合はgzipが有効に なっていない

nginx.confを編集してgzip圧縮を有効にする

nginx.conf

http{
  ...
  ...
  gzip on;
} 

を追加してnginxを再起動

curl -I -H 'Accept-Encoding: gzip,deflate' http://www.noraneko.works

HTTP/1.1 200 OK
Server: nginx/1.8.1
Date: Thu, 14 Jul 2016 13:35:33 GMT
Content-Type: text/html; charset=utf-8
Connection: keep-alive
X-Powered-By: Express
ETag: W/"8d6d-78T/WCIdSw9TD5m+UyS5/Q"
Content-Encoding: gzip

Content-Encoding: gzip が返ってきた！！

cssとjsもgzip圧縮する

なんとnginxはデフォルトではtext/htmlしか有効にならないらしい。確認してみる。

curl -I -H 'Accept-Encoding: gzip,deflate' http://www.noraneko.works/assets/js/scripts.js

HTTP/1.1 200 OK
Server: nginx/1.8.1
Date: Thu, 14 Jul 2016 13:37:35 GMT
Content-Type: application/javascript
Content-Length: 1230
Connection: keep-alive
X-Powered-By: Express
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Last-Modified: Mon, 11 Jul 2016 13:51:03 GMT
ETag: W/"4ce-155da39b939"

本当だ。ちくしょう。

nginx.conf

http{
  ...
  ...
  gzip on;
  gzip_types text/css text/javascript application/javascript;
} 

を追加して再起動

curl -I -H 'Accept-Encoding: gzip,deflate' http://www.noraneko.works/assets/js/scripts.js

HTTP/1.1 200 OK
Server: nginx/1.8.1
Date: Thu, 14 Jul 2016 13:40:53 GMT
Content-Type: application/javascript
Connection: keep-alive
X-Powered-By: Express
Cache-Control: public, max-age=0
Last-Modified: Mon, 11 Jul 2016 13:51:03 GMT
ETag: W/"4ce-155da39b939"
Content-Encoding: gzip

うまくいったみたい。

リベンジ

もう一度 https://testmysite.thinkwithgoogle.com/ で計測してみる

Yeah!!

効果があったようだ。ひとまずPOORの称号は返上した！
引き続き他の項目を対応していこう。

以上

続き
WEBレスポンススピード高速化委員会〜nginxでブラウザキャッシュ有効化編