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

nginx nginx

前回までの高速化委員会

Screen Shot 2016-07-14 at 23.05.59.png

WEBレスポンススピード高速化委員会〜nginxでgzip圧縮有効化編POORを返上した。

今回はこちら
Screen Shot 2016-07-22 at 12.14.35.png

ブラウザキャッシュを効果的に使いなさいよってお話だ。

ブラウザキャッシュを有効にするってどういうことだっけ?

Googleさんにお伺いを立てると次のような回答が。

キャッシュできるすべてのリソースで、Expires と Cache-Control: max-age のいずれか、Last-Modified と ETag のいずれかを指定することが大切です。

なるほど。やってみよう。

ブラウザキャッシュが有効になっていないことを確認する

curl -I -H 'Accept-Encoding: gzip,deflate' http://www.noraneko.works
HTTP/1.1 200 OK
Server: nginx/1.8.1
Date: Fri, 22 Jul 2016 03:17:27 GMT
Content-Type: text/html; charset=utf-8
Connection: keep-alive
X-Powered-By: Express
ETag: W/"8dbd-lkDUGFuDSQ35k3PpKYHqdg"
Content-Encoding: gzip

EtagはあるがExpiresがない。

nginx.confを編集してExpiresを有効にする

以下のように追記する。キャッシュ期間は最低限の7日にしてみる。最長は1年が推奨されているみたい。

nginx.conf
expires 7d;

再起動してもう一度試してみる。

curl -I -H 'Accept-Encoding: gzip,deflate' http://www.noraneko.works
HTTP/1.1 200 OK
Server: nginx/1.8.1
Date: Fri, 22 Jul 2016 03:20:33 GMT
Content-Type: text/html; charset=utf-8
Connection: keep-alive
X-Powered-By: Express
ETag: W/"8dbd-lkDUGFuDSQ35k3PpKYHqdg"
Expires: Fri, 29 Jul 2016 03:20:33 GMT
Cache-Control: max-age=604800
Content-Encoding: gzip

Expiresヘッダが付与された!!

ちょっと待て

完全に静的なサイトで更新もほぼないならこれでいいのかもしれないけれど、htmlを動的に生成するWEBアプリなんかだとキャッシュされたら困る場合のほうが多い。
ある特定のコンテンツタイプのときだけキャッシュを有効にしてみよう。

nginx.conf
map $sent_http_content_type $expires {
  default         off;
  text/css 8d;
  text/javascript 8d;
  application/javascript 8d;
  ~image/         30d;
}
expires $expires;

こんな感じで設定してみる。

curl -I -H 'Accept-Encoding: gzip,deflate' http://www.noraneko.works
HTTP/1.1 200 OK
Server: nginx/1.8.1
Date: Fri, 22 Jul 2016 03:46:31 GMT
Content-Type: text/html; charset=utf-8
Connection: keep-alive
X-Powered-By: Express
ETag: W/"8dbd-lkDUGFuDSQ35k3PpKYHqdg"
Content-Encoding: gzip
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: Fri, 22 Jul 2016 03:46:35 GMT
Content-Type: application/javascript
Connection: keep-alive
X-Powered-By: Express
Cache-Control: max-age=691200
Last-Modified: Fri, 15 Jul 2016 15:44:40 GMT
ETag: W/"4ce-155ef3b2ddb"
Expires: Sat, 30 Jul 2016 03:46:35 GMT
Content-Encoding: gzip

うむ。想定通り。
あとでもっと細かく設定する。

リベンジ

もう一度ここで計測してみる。

Screen Shot 2016-07-22 at 12.53.54.png

GOODいただきました!!
でも1点かぁーーーーw