LoginSignup
24

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-07-14

事の始まりは弊社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でブラウザキャッシュ有効化編

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24