Edited at

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

More than 3 years have passed since last update.

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

結果がコレだ!

Screen Shot 2016-07-14 at 22.45.38.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

ううむ。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

Screen Shot 2016-07-14 at 23.06.41.png

Yeah!!

効果があったようだ。ひとまずPOORの称号は返上した!

引き続き他の項目を対応していこう。

以上

続き

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