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

前回までの高速化委員会

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

今回はこちら

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

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

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

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

リベンジ

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

GOODいただきました！！
でも1点かぁーーーーｗ