ブラウザのキャッシュ

Question

PageSpeed Insightsでチェックすると

静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザがネットワークからではなくローカル ディスクから以前にダウンロードしたリソースを読み込むようになります。

https://www.googletagmanager.com/gtm.js?id=GTM-5QBHFP (15 分)
https://connect.facebook.net/ja_JP/sdk.js (20 分)
https://www.google-analytics.com/analytics.js (2 時間)

となりますが有効期日や最大経過時間を設定する方法をご教授くだされないでしょうか？

Answer 1

サーバにmod_expiresが入っているならそれを設定することでもキャッシュをコントロールできます。

【Apacheのmod_expiresでファイルタイプごとにキャッシュをコントロールする方法 | OXY NOTES】
http://oxynotes.com/?p=6024

【.htaccessのmod_expiresでブラウザキャッシュで高速化でSEO対策！ | エス技研】
https://blog.s-giken.net/223.html

【Apacheのmod_expiresというキャッシュモジュールを使ってWEBサイトを高速化しよう - $yuzu->log();】
http://yuzurus.hatenablog.jp/entry/mod_expires

Comments

[退会済みユーザー]

ご回答くださり誠にありがとうございます。
質問させていただきたいのですが
どのサイトも記述はあるもののキャッシュをコントロールが出来ていませんが現実そのようなものでしょうか？
また、googleanalytics.js やfacebook.net/ja_JP/sdk.js に限っておきている現象ですが
これは、どういったことなのでしょうか？
もし可能でございましたらご教授くだされないでしょうか？

[kei344]

> どのサイトも記述はあるもののキャッシュをコントロールが出来ていませんが
どこの何を見てそう判断されているのでしょうか。こちらで確認したところ、指定されたものにキャッシュが取れているように見えますよ。

[退会済みユーザー]

ご回答くださり誠にありがとうございます。
度々申し訳けございません。
http://seocheki.net/ のサイトで
PageSpeed Insights（ページの表示速度をチェック）を見る限り取れていませんが
もし、可能でしたら他に判断出来うるサイトがございましたらご教授くだされないでしょうか？

[kei344]

https://developers.google.com/speed/pagespeed/insights/?url=http://oxynotes.com/?p=6024
これのことですか？「次のキャッシュ可能なリソースでブラウザのキャッシュを活用してください:」のリソースの中に「oxynotes.com」はありますか？

.htaccess は置かれたサーバで効力があるものなので、ほかのサーバについてキャッシュをコントロールするものではありません。

デベロッパーツール でレスポンスヘッダを確認できます。

【Chrome デベロッパーツール Networkパネルの使い方 | Web Tips】
http://weback.net/utility/1491/#contents-6

[退会済みユーザー]

お世話になります。
ご回答をくださりありがとうございます
仰せのとうりです。
https://developers.google.com/speed/pagespeed/insights/?url=http://oxynotes.com/?p=6024
です。
「oxynotes.com」はありますか？はい、あります。
出来ていないような気がします。
おっしゃってくださっている
.htaccess は置かれたサーバで効力があるものなので、ほかのサーバについてキャッシュをコントロールするものではありません。
とは、どういう意味でしょうか？
また、ご教授くだっさたデベロッパーツールについては今後勉強ができればと思っております。
今回は大変お手間をお掛けして申し訳けございませんでした。
これ以上kei344お手数をお掛けすることは出来ないと思いますので失礼いたします。
ありがとうございました。

[kei344]

> はい、あります。
「適用可能な最適化」の「ブラウザのキャッシュを活用する」にはありませんよ。同じページを見て違う結果が出ることはあまりないので、見方の問題だと思います。

> .htaccess は置かれたサーバで効力があるものなので、ほかのサーバについてキャッシュをコントロールするものではありません。
> とは、どういう意味でしょうか？
自分のサーバに.htaccessを置いたら、自分のサーバのドメインのキャッシュについてコントロールできますが、PageSpeed Insights で表示されている他のドメインについてはそれぞれのサーバでしかキャッシュコントロールが出来ない、ということです。

[退会済みユーザー]

大変お手数にも関わらずご回答をくださりありがとうございます。
度々申し訳けございません。
自分のサーバに.htaccessを置いたら、自分のサーバのドメインのキャッシュについてコントロールできますが、PageSpeed Insights で表示されている他のドメインについてはそれぞれのサーバでしかキャッシュコントロールが出来ない、ということです。
と言うことは他人のパソコンから見たら違う結果が表示するということでしょうか？

[kei344]

> と言うことは他人のパソコンから見たら違う結果が表示するということでしょうか？
パソコンの話はしていませんよ。「キャッシュコントロール」はサーバ側の話です。

[退会済みユーザー]

お世話になります。
度々申し訳けございません。
・・・・・～
function lazyLoadScript(scriptSrc) {
//
var scrollFirstTime = 1;

//
window.addEventListener("scroll", oneTimeFunction, false);

function oneTimeFunction() {
if (scrollFirstTime === 1) {

//
scrollFirstTime = 0;

//
var adScript = document.createElement("script");
adScript.src = scriptSrc;

//
adScript.setAttribute("async", "async");

//
document.body.appendChild(adScript);

//
window.removeEventListener("scroll", oneTimeFunction, false);
}
}
}
//
～・・・・・

でおこなった結果
https://www.googletagmanager.com/gtm.js?id=GTM-5QBHFP (15 分)
https://www.google-analytics.com/analytics.js (2 時間)
に限り改善できました。

[退会済みユーザー]

追記といたしましてはGulpでCSSやJavaScriptをHTMLにインライン挿入をおこなえばよいのかもしてませんが。
失礼致します。

[kei344]

キャッシュの話からずれていますよ。

[退会済みユーザー]

お世話になりありがとうございます。
ベストアンサーに選ばせていただきます。
今回はどうもありがとうございました。
では、失礼いたします。

Answer 2

apacheなら.htaccessファイルに書きます。他の種類WEBサーバーならそのアプリケーションによって変わります。

<Files ~ "\.html$">
	Header set Cache-Control "max-age=900, public"
</Files>

とかです。この場合は60秒x15分=900の間キャッシュされます。

html4の場合はmetaタグにチョロっと書けたのですが、html5になると仕様で書けなくなりました。
そして、その変わりとなっていたマニュフェストファイルの使用も非推奨化されて、HTML5のキャッシュはWEBサーバーのシステムに依存した書き方がほぼ必須になった感じです。

Comments

[退会済みユーザー]

お世話になります、
html５の場合は.htaccessにご回答をくださった記述を書くと改善するのでしょうか？
宜しくお願い致します。

[退会済みユーザー]

追伸
今,.htaccessにご回答くださった記述を試みましたが改善しません。

[退会済みユーザー]

今確認したところ
HTTP/1.1 200 OK
Date Thu, 08 Jun 2017 02:07:33 GMT
Server Apache/2.2.15 (CentOS)
Last-Modified Thu, 08 Jun 2017 01:04:40 GMT
ETag "7051-551686ffeac39"
Accept-Ranges bytes
Content-Length 28753
Cache-Control max-age=900, public
Expires Thu, 08 Jun 2017 02:07:34 GMT
Vary Accept-Encoding
Strict-Transport-Security max-age=315360000;
Connection keep-alive, close
Content-Type text/html; charset=utf-8

となっておりました。
もし可能でございましたらご教授くだされないでしょうか？

[oskbt]

あれ？できてないですか？
Cache-Control max-age=900, public　って書いてあるからこのHTMLは、リクエストヘッダーでキャッシュを拒否しない限り、15分の期限内なら過去の物を使うはずです。

もしかして　Content-Type text/html; charset=utf-8って書いてあるから、キャッシュ指定の一例で書いたhtmlのみ指定して、jsの方を書かずにjsのキャッシュを見ている感じでしょうか？
それならもっと具体的に書きます。

htaccess
```
<Files ~ "hoge\.js$">
Header set Cache-Control "max-age=900, public"
</Files>
```

index.html
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="./hoge.js"></script>
</head>
<body></body>
</html>
```

hoge.js
```javascript
alert('1');
```

それで一度閲覧してからhoge.jsの数字を変えてから、再度閲覧すれば、過去のjsが読み込まれていることが確認できますよ。

[退会済みユーザー]

ご回答くださり誠にありがとうございます。
度々申し訳けございません。
<Files ~ "hoge\.js$"> とはどのようなものでしょうか？
現在他のjavascriptについては制御できているのですが
https://www.googletagmanager.com/gtm.js?id=GTM-5QBHFP (15 分)
https://connect.facebook.net/ja_JP/sdk.js (20 分)
https://www.google-analytics.com/analytics.js (2 時間)
のみ改善できておりません。

[退会済みユーザー]

お世話になりありがとうございます。

今回はどうもありがとうございました。
では、失礼いたします。

Answer 3

(コメントに横から書こうと思ったのですが、長くなったので回答で...)

キャッシュコントロールしたいのは、下記のスクリプトと言うことでしょうか？

https://www.googletagmanager.com/gtm.js?id=GTM-5QBHFP (15 分)
https://connect.facebook.net/ja_JP/sdk.js (20 分)
https://www.google-analytics.com/analytics.js (2 時間)

そうであれば、各ファイルを置いてあるサーバの管理者しかキャッシュの設定はできませんので、あなたは設定できないと思います。
(例えば、https://www.googletagmanager.com/gtm.js?id=GTM-5QBHFP のキャッシュを変更するためには、www.googletagmanager.com のサーバで、キャッシュの設定を変更する必要がありますが、あなたは変更できる権限をお持ちじゃないですよね？)

キャッシュの期間等を設定できるのは、自分の管理しているサーバに置いてあるファイルだけです。
他人のサーバから読み込んでいるファイルに対して、指定することはできません。