Web

HTTPレスポンスヘッダとブラウザキャッシュの関係を調査

投稿日：2017年6月29日 更新日：

目次

1. はじめに

Webサーバーからブラウザに返される HTTP レスポンスヘッダにいろいろな値をセットし、次回のアクセス時にブラウザがキャッシュを使うのかどうかを観察してみました。

今回、HTTP レスポンスヘッダの生成には PHP を使っており、PHP に特有の機能も試しています。

スポンサードリンク

2. 使用したツール

Webサーバー側

PHP

クライアント側

Firefox

  • OWASP ZAP をローカルプロキシとして使用するよう設定しました。
  • HTTP のヘッダは、Firefox に標準搭載されている機能でも見ることができますが、条件付きリクエストの場合の表示が分かりにくかったため、外部のローカルプロキシツールを使うことにしました。
  • 今回たくさんのパターンを試しましたが、1つのパターンをテストする毎に、Firefox の履歴データを全て削除しました。
  • 公式サイト： Firefox

OWASP ZAP

  • ヘッダを見るために使いました。
  • 公式サイト： OWASP ZAP

3. 使用する HTML (PHP) ファイル

Webサーバ側に 以下のPHPファイルを用意し、ウェブブラウザはこのファイルにアクセスします。

<?php
  // ここにヘッダを出力するコードを書く。
?>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" >
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>キャッシュのテスト</title>
</head>

<body>
  <h1>キャッシュのテスト</h1>

  <p>時間: <?php echo time(); ?></p>

  <a href="/cache-test/">このページへのリンクです。</a>

</body>
</html>
  • キャッシュが使用されたかどうか、画面を見れば分かるように、その時の時間を出力しています。
  • キャッシュが使われるかどうかを確かめるために、2回目のアクセスを行う方法として画面をリロード ( F5 や Ctrl + R などのキーボードショートカットキーでも可) してしまいがちですが、一般的なブラウザはリロードするとキャッシュを使わないようになっているため、画面上に同じページへのリンクを用意して、そこをクリックして 2回目のアクセスを行います。これであれば、ブラウザは リロードのために特別な動作は行わず、キャッシュが使えるなら使ってくれます。

4. 実験

パターン1

HTML (PHP)のヘッダ出力部分

  • 特別なヘッダは何も出力しない。

1回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Thu, 29 Jun 2017 01:08:49 GMT
Server: Apache
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

2回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Referer: https://misc.laboradian.com/cache-test/
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Thu, 29 Jun 2017 01:12:05 GMT
Server: Apache
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

画面の時間表示

  • 更新された。

キャッシュが使われたか？

  • ブラウザはキャッシュを使わない。

パターン2

HTML (PHP)のヘッダ出力部分

session_cache_limiter('nocache');

1回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Thu, 29 Jun 2017 01:13:01 GMT
Server: Apache
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

2回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Referer: https://misc.laboradian.com/cache-test/
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Thu, 29 Jun 2017 01:13:23 GMT
Server: Apache
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

画面の時間表示

  • 更新された。

キャッシュが使われたか？

  • ブラウザはキャッシュを使わない。
    • session_cache_limiter() は session_start() と合わせて使わないと意味がないので、パターン1と同じ動作になる。

パターン3

HTML (PHP)のヘッダ出力部分

session_cache_limiter('nocache');
session_start();

1回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Thu, 29 Jun 2017 01:14:21 GMT
Server: Apache
Set-Cookie: PHPSESSID=q91oh00v6kvh8lo1jg36ltkul1; path=/
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate
Pragma: no-cache
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

2回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Referer: https://misc.laboradian.com/cache-test/
Cookie: PHPSESSID=q91oh00v6kvh8lo1jg36ltkul1
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Thu, 29 Jun 2017 01:15:01 GMT
Server: Apache
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate
Pragma: no-cache
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

画面の時間表示

  • 更新された。

キャッシュが使われたか？

  • ブラウザはキャッシュを使わない。
  • そもそもキャッシュされていないはず（no-store が指定されているので）。

パターン4

HTML (PHP)のヘッダ出力部分

session_cache_limiter('private');
session_start();

1回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Wed, 28 Jun 2017 07:28:35 GMT
Server: Apache
Set-Cookie: PHPSESSID=vl3k9nvtk22gd2dtvd1kb0h6g1; path=/
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: private, max-age=10800
Last-Modified: Wed, 28 Jun 2017 07:07:11 GMT
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

2回目のアクセス

HTTP リクエストヘッダ

  • リクエストが発生しない。

HTTP レスポンスヘッダ

  • なし

画面の時間表示

  • 更新されなかった。

キャッシュが使われたか？

  • ブラウザのキャッシュが使用された。
    • ブラウザは Expires より max-age を優先してくれるようだ。

パターン5

HTML (PHP)のヘッダ出力部分

header("Cache-Control: no-cache");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // 過去の日時

1回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Wed, 28 Jun 2017 07:45:54 GMT
Server: Apache
Cache-Control: no-cache
Expires: Sat, 26 Jul 1997 05:00:00 GMT
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

2回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Referer: https://misc.laboradian.com/cache-test/
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Wed, 28 Jun 2017 07:47:06 GMT
Server: Apache
Cache-Control: no-cache
Expires: Sat, 26 Jul 1997 05:00:00 GMT
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

画面の時間表示

  • 更新された。

キャッシュが使われたか？

  • ブラウザはキャッシュを使わない。

パターン6

HTML (PHP)のヘッダ出力部分

header("Cache-Control: no-cache");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // 過去の日時
session_start();

1回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Wed, 28 Jun 2017 07:48:27 GMT
Server: Apache
Cache-Control: no-store, no-cache, must-revalidate
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Set-Cookie: PHPSESSID=h56trk1v4trp1th5mmnvlsbhh1; path=/
Pragma: no-cache
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

2回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Referer: https://misc.laboradian.com/cache-test/
Cookie: PHPSESSID=h56trk1v4trp1th5mmnvlsbhh1
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Wed, 28 Jun 2017 07:49:49 GMT
Server: Apache
Cache-Control: no-store, no-cache, must-revalidate
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Pragma: no-cache
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

画面の時間表示

  • 更新された。

キャッシュが使われたか？

  • ブラウザはキャッシュを使わない。

パターン7

HTML (PHP)のヘッダ出力部分

header("Cache-Control: no-cache");
header("Expires: Sat, 14 Oct 2020 05:00:00 GMT"); // 未来の日時

1回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Wed, 28 Jun 2017 07:51:13 GMT
Server: Apache
Cache-Control: no-cache
Expires: Sat, 14 Oct 2017 05:00:00 GMT
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

2回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Referer: https://misc.laboradian.com/cache-test/
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Wed, 28 Jun 2017 07:51:52 GMT
Server: Apache
Cache-Control: no-cache
Expires: Sat, 14 Oct 2017 05:00:00 GMT
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

画面の時間表示

  • 更新された。

キャッシュが使われたか？

  • ブラウザはキャッシュを使わない。
    • Expires は無視された。
    • Cache-Control: no-cache があるから？

パターン8

HTML (PHP)のヘッダ出力部分

header("Expires: Sat, 14 Oct 2020 05:00:00 GMT"); // 未来の日時

1回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Wed, 28 Jun 2017 07:54:33 GMT
Server: Apache
Expires: Sat, 14 Oct 2017 05:00:00 GMT
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

2回目のアクセス

HTTP リクエストヘッダ

  • なし

HTTP レスポンスヘッダ

  • なし

画面の時間表示

  • 更新されなかった。

キャッシュが使われたか？

  • ブラウザのキャッシュが使用された。
    • Expires が効いているようだ。
    • Cache-Control: no-cache がなければ、Expires を尊重してくれるようだ。

パターン9

HTML (PHP)のヘッダ出力部分

header("Cache-Control: max-age=7776000");
header("Expires: Sat, 14 Oct 2020 05:00:00 GMT"); // 未来の日時

1回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Wed, 28 Jun 2017 07:57:17 GMT
Server: Apache
Cache-Control: max-age=7776000
Expires: Sat, 14 Oct 2017 05:00:00 GMT
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

2回目のアクセス

HTTP リクエストヘッダ

  • なし

HTTP レスポンスヘッダ

  • なし

画面の時間表示

  • 更新されなかった。

キャッシュが使われたか？

  • ブラウザのキャッシュが使用された。
    • Expires もあるし、Cache-Control: max-age=7776000 もあるので、ブラウザはキャッシュを使ってくれた。

パターン10

HTML (PHP)のヘッダ出力部分

session_cache_limiter('public');
session_start();

1回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Wed, 28 Jun 2017 08:15:22 GMT
Server: Apache
Set-Cookie: PHPSESSID=ars31rm7g771kjshncqptgo7e0; path=/
Expires: Wed, 28 Jun 2017 11:15:22 GMT
Cache-Control: public, max-age=10800          <-- 3時間
Last-Modified: Wed, 28 Jun 2017 08:14:02 GMT  <-- レスポンスが返ってきた時間
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

2回目のアクセス

HTTP リクエストヘッダ

  • なし

HTTP レスポンスヘッダ

  • なし

画面の時間表示

  • 更新されなかった。

キャッシュが使われたか？

  • ブラウザのキャッシュが使用された。
    • Expires と max-age が効いているようだ。

パターン11

HTML (PHP)のヘッダ出力部分

session_cache_limiter('private_no_expire');
session_start();

1回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Wed, 28 Jun 2017 08:18:14 GMT
Server: Apache
Set-Cookie: PHPSESSID=tgo9oas9egpnv0uqmc984u6bm7; path=/
Cache-Control: private, max-age=10800          <-- 3時間
Last-Modified: Wed, 28 Jun 2017 08:18:02 GMT   <-- レスポンスが返ってきた時間
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

2回目のアクセス

HTTP リクエストヘッダ

  • なし

HTTP レスポンスヘッダ

  • なし

画面の時間表示

  • 更新されなかった。

キャッシュが使われたか？

  • ブラウザのキャッシュが使用された。
    • max-age が効いているようだ。

パターン12

HTML (PHP)のヘッダ出力部分

header("Cache-Control: public, max-age=0");
header("Last-Modified: Mon, 03 Jan 2011 17:45:57 GMT");  // 過去の日時

1回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Wed, 28 Jun 2017 09:14:57 GMT
Server: Apache
Cache-Control: public, max-age=0
Last-Modified: Mon, 03 Jan 2011 17:45:57 GMT
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

2回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Referer: https://misc.laboradian.com/cache-test/
Connection: keep-alive
Upgrade-Insecure-Requests: 1
If-Modified-Since: Mon, 03 Jan 2011 17:45:57 GMT
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Wed, 28 Jun 2017 09:16:10 GMT
Server: Apache
Cache-Control: public, max-age=0
Last-Modified: Mon, 03 Jan 2011 17:45:57 GMT
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

画面の時間表示

  • 更新された。

キャッシュが使われたか？

  • ブラウザのキャッシュは使用されない。
    • If-Modified-Since がリクエスト （条件付きリクエスト）されるが、サーバー側で 304 ステータスを返すような処理はないので、用意されたコンテンツが 200ステータスで返される。

パターン13

HTML (PHP)のヘッダ出力部分

header("Cache-Control: public, max-age=172800");
header("Last-Modified: Fri, 30 Jun 2017 09:14:00 GMT");  // 未来の日時

1回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Wed, 28 Jun 2017 09:22:34 GMT
Server: Apache
Cache-Control: public, max-age=172800
Last-Modified: Fri, 30 Jun 2017 09:14:00 GMT
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

2回目のアクセス

HTTP リクエストヘッダ

  • なし

HTTP レスポンスヘッダ

  • なし

画面の時間表示

  • 更新されない。

キャッシュが使われたか？

  • ブラウザのキャッシュが使用された。

パターン14

HTML (PHP)のヘッダ出力部分

header("Cache-Control: public, max-age=172800");
header('ETag: "12345678"');

1回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Wed, 28 Jun 2017 09:30:25 GMT
Server: Apache
Cache-Control: public, max-age=172800
ETag: "12345678"
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

2回目のアクセス

HTTP リクエストヘッダ

  • なし

HTTP レスポンスヘッダ

  • なし

画面の時間表示

  • 更新されなかった。

キャッシュが使われたか？

  • ブラウザのキャッシュが使用された。

パターン15

HTML (PHP)のヘッダ出力部分

header("Cache-Control: public, max-age=0");
header('ETag: "12345678"');

1回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Wed, 28 Jun 2017 09:32:32 GMT
Server: Apache
Cache-Control: public, max-age=0
ETag: "12345678"
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

2回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Referer: https://misc.laboradian.com/cache-test/
Connection: keep-alive
Upgrade-Insecure-Requests: 1
If-None-Match: "12345678"
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Wed, 28 Jun 2017 09:33:00 GMT
Server: Apache
Cache-Control: public, max-age=0
ETag: "12345678"
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

画面の時間表示

  • 更新された。

キャッシュが使われたか？

  • ブラウザのキャッシュは使用されない。
    • If-None-Match がリクエストされるが（条件付きリクエスト）、サーバー側で 304 ステータスを返すような処理はないので、用意されたコンテンツが 200ステータスで返される。

パターン16

HTML (PHP)のヘッダ出力部分

header("Last-Modified: Fri, 30 Jun 2017 09:14:00 GMT");  // 未来の日時

1回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Wed, 28 Jun 2017 14:55:27 GMT
Server: Apache
Last-Modified: Fri, 30 Jun 2017 09:14:00 GMT
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

2回目のアクセス

HTTP リクエストヘッダ

GET https://misc.laboradian.com/cache-test/ HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Referer: https://misc.laboradian.com/cache-test/
Connection: keep-alive
Upgrade-Insecure-Requests: 1
If-Modified-Since: Fri, 30 Jun 2017 09:14:00 GMT
Host: misc.laboradian.com

HTTP レスポンスヘッダ

HTTP/1.1 200 OK
Date: Wed, 28 Jun 2017 14:56:02 GMT
Server: Apache
Last-Modified: Fri, 30 Jun 2017 09:14:00 GMT
Content-Length: 416
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

画面の時間表示

  • 更新された。

キャッシュが使われたか？

  • ブラウザのキャッシュは使用されない。
    • If-Modified-Since がリクエストされるが（条件付きリクエスト）、サーバー側で 304 ステータスを返すような処理はないので、用意されたコンテンツが 200ステータスで返される。
    • Last-Modified の日時が未来であっても、次に同じURLにアクセスしたら、条件付きリクエストが送られる。

5. まとめ

  1. max-age と Expires を使って、未来を示す期間・日時を指定すれば、動的なページであってもウェブブラウザはキャッシュを使ってくれる。
    • Expires は HTTP/1.0 からあるフィールドである。Cache-Control: max-age は、HTTP/1.1 で追加されたフィールドである。古いブラウザのことも考えて、両方指定しておくとよい。
  2. ブラウザは Expires より max-age を優先してくれる。
  3. Webサーバー側で 「条件付きリクエストに対する判定処理」 を実装しておき、条件が合致しなければ304 ステータスコードを返すようにしておけば、Last-Modified もしくは ETag を使うことによって、ブラウザのキャッシュを使わせることができる。

6. 参考

📂-Web

執筆者：labo

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

PWA

Webブラウザと PWA は切り離して欲しい

マイクロソフトはWeb技術を用いてネイティブアプリケーションのように動作するProgressive Web Apps（PWA）を、WebブラウザのEdgeにとどまらず、Windows10のデスクトップ …

Chrome

Chrome: ツールバー上の拡張機能アイコンをメニューに移動させる方法

Chromeで、ツールバー上の拡張機能アイコンをメニューに移動させる方法について説明します。

Web

AMP for WordPress プラグインを使って WordPressサイトをAMP対応する手順

目次1. AMP とは？なぜ、AMP が必要なのか？AMP フレームワーク1. AMP HTML2. AMP JS3. AMP キャッシュその他2. AMP for WordPress プラグインにつ …

Chrome

ブロックされた Cookie を確認する方法 (Chrome の場合)

Chrome ブラウザにおいて、ブロックされた Cookie を確認する方法について説明します。

Chrome

Chrome の「ピクチャー イン ピクチャー」機能を使って、YouTube の動画を最前面で再生する

目次1. Chrome の「ピクチャー イン ピクチャー」機能2. ピクチャー イン ピクチャーを行う方法3. プレイヤーの操作など3. おわりに 1. Chrome の「ピクチャー イン ピクチャー …

PREV
CSS の基礎
NEXT
ウェブブラウザのリロード処理
↑