Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

前回までの高速化委員会

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away