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


事の始まりは[弊社Webサイト](http://www.noraneko.works/)のスピードテストを[これ](https://testmysite.thinkwithgoogle.com/)で計測したことからはじまった。

結果がコレだ！
![Screen Shot 2016-07-14 at 22.45.38.png](https://qiita-image-store.s3.amazonaws.com/0/10058/9a745631-bc63-63d2-ec9f-8e29826dd32b.png "Screen Shot 2016-07-14 at 22.45.38.png")

![Screen Shot 2016-07-14 at 22.50.38.png](https://qiita-image-store.s3.amazonaws.com/0/10058/9f77e84b-a716-db7c-cd39-4ac0c374ea17.png "Screen Shot 2016-07-14 at 22.50.38.png")

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

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

まず気になったのはコレ
![Screen Shot 2016-07-14 at 22.45.46.png](https://qiita-image-store.s3.amazonaws.com/0/10058/46579e16-ca5d-92d6-7ed3-f3adbf3440d1.png "Screen Shot 2016-07-14 at 22.45.46.png")

ううむ。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/ で計測してみる

![Screen Shot 2016-07-14 at 23.05.59.png](https://qiita-image-store.s3.amazonaws.com/0/10058/8b3c3c92-7d84-acb3-0b2e-fb5d34d3ea11.png "Screen Shot 2016-07-14 at 23.05.59.png")
![Screen Shot 2016-07-14 at 23.06.41.png](https://qiita-image-store.s3.amazonaws.com/0/10058/e4b8efca-5e42-772b-5553-adaf2d533ab4.png "Screen Shot 2016-07-14 at 23.06.41.png")

Yeah!!

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


以上

続き
[WEBレスポンススピード高速化委員会〜nginxでブラウザキャッシュ有効化編](http://qiita.com/master-of-sugar/items/5ac6a1597431468d2583)