そうなんです。
今どうがんばっても「静的なアセットと効率的なキャッシュポリシーの配信」の警告が出て困っています。
いくらキャッシュ時間を設定しても、「キャッシュの TTL」がNoneに・・・。
これはなぜなのか。
もしかしたらPageSpeed Insights側（Lighthouse側）の問題かも知れないよね。
クロームのデベロッパーツールで、しっかりとブラウザキャッシュの時間が反映されていれば気にしなくていいんじゃないかな～。
ということで、「静的なアセットと効率的なキャッシュポリシーの配信」を改善するために試行錯誤したことをメモします☆
そもそも、静的なアセットと効率的なキャッシュポリシーの配信の警告が出る原因は？
ブラウザキャッシュが設定されていないからです。
ググるとブラウザキャッシュの設定方法を解説している記事はたくさん出てきます。
.htaccessで設定すると思うんだけど、「Cache-Control」で設定するのと、「Expires」で設定するのの2通りあるみたいだね。
で、Googleではより古いブラウザでも対応できる「Expires」を推奨だって。
↑この記事を参照しました。
「Expires」での設定っていうのはよく見かける以下のやつ。
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 1 days"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/webp "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType font/eot "access plus 1 year"
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
</IfModule>キャッシュの時間ってどれくらいがいいの？
上のコードでいう、
- 1 days
- 1 month
- 1 year
とかの部分でキャッシュ時間を指定してるんだけど、推奨は「1 year」つまり1年です。
https://web.dev/uses-long-cache-ttl/
理由はGoogleが推奨しているから。
ただし、注意書きとしてキャッシュの時間に正解はなく、最適な時間を決めるのはあなたです。
みたいなことも書いてありました。
まぁでも基本的には1年でいいんじゃないかな？
1ヶ月とか半年とかで設定しても、ファイルが更新されたらキャッシュのクリアをする必要はあるだろうし。
.htaccessを設定しても「静的なアセットと効率的なキャッシュポリシーの配信」の警告が出る
ここからが本題です。
なぜか出ちゃうんです(;´Д｀)
※テストサイトのドメインなのでモザイクかけてますorz
キャッシュのTTLっていうのはキャッシュ時間です。
これが「None」になっている！
なんでやねん！（ﾊﾟｺｰﾝ
考えられる原因は、
- .htaccessの設定をミスってる
- キャッシュの時間が短すぎる
- PageSpeed Insights側（Lighthouse側）の問題
かな～。
ブラウザキャッシュがきちんと設定されているか確認する方法
さっきの https://web.dev/uses-long-cache-ttl/ を参照すれば分かるけど、大事なので解説します。
手順は次の通り。
- クロームで確認したいサイトを表示する
- 「F12」キーでデベロッパーモード起動
- 「Network」をクリック
- 調べたいファイルをクリック
- キャッシュ時間を確認
「Network」っていうのは以下のところです。
キャッシュ時間は、 「Cache-Control: max-age=〇〇〇」のところで確認できます。
何時間でも何日でも秒に換算されて表示されています。
例えば、
- Cache-Control: max-age=86400 なら 1日
- Cache-Control: max-age=604800 なら 1週間（7日）
- Cache-Control: max-age=2592000 なら 1ヶ月（30日）
- Cache-Control: max-age=15552000 なら 半年（180日）
- Cache-Control: max-age=31536000 なら 1年（365日）
といった具合です。
これが確認できれば、ブラウザキャッシュはうまく設定されているはず。
それなのに「静的なアセットと効率的なキャッシュポリシーの配信」の警告が出るのは・・・
ちなみにキャッシュが残っているとうまく確認できません。
なのでキャッシュはクリアしてから確認するのが間違いないです。
↓やり方はこのツイートのような感じで。
キャッシュの時間が短すぎる
PageSpeed Insights の下の方を見るとこうあります。
ご意見をお寄せください
PageSpeed Insights の使用についてご質問がございましたら、Stack Overflow に質問を投稿してください。全般的なフィードバックやご意見がございましたら、メーリング リストのスレッドをご利用ください。
ということで、 Stack Overflow を見てみた。
リンク先はタグが [pagespeed-insights] になっているので、「静的なアセットと効率的なキャッシュポリシーの配信」の英語表記「Serve static assets with an efficient cache policy」で検索し直します。
するといくつかQ&Aが出てきたけど、回答として多かったのはキャッシュの時間が短すぎるんじゃない？
ってやつです。
確かに質問している人は1週間とか30日とかで、短い気はするね。
でもわたしは1年でがっつり設定してるんだけど・・・
PageSpeed Insights側（Lighthouse側）の問題なんじゃないの？
う～ん、デベロッパーツールでちゃんとキャッシュ時間が設定されているのは確認できたし、そうなると疑いたくなるよね・・・。
何か別な要素があるのかな？
今日1日潰して調べたけど、結局分からなかったorz
まぁ、デベロッパーツールではちゃんと設定されているのを確認したし、良しとしよう！
解散！！
あとがき
Google翻訳は素敵すぎる♪
クロームにGoogle翻訳のアドオンは入れてる？
Stack Overflow は英語だらけだけど、Google翻訳さえあればけ結構分かるよ。
Google翻訳のサイトで翻訳するのもいいけど、クロームのアドオンの方が見やすいのでおすすめです(*‘∀‘)b
そうそう、回答の中に興味深いものもありました。
Lighthouse will warn you to serve static assets with an efficient cache policy if your score for that audit is not greater than or equal to 90. It will also list all of your static assets in the details summary (regardless of whether they pass or not).
Since you do not have control over some of your static assets, your score appears to be lower than 90, and therefore, you are still seeing your static assets that pass the audit in the details summary.
訳すと、
Lighthouseは、監査のスコアが90以上でない場合、効率的なキャッシュポリシーで静的アセットを提供するよう警告します。また、詳細サマリーにすべての静的アセットをリストします（合格かどうかに関係なく） 。
一部の静的資産を制御できないため、スコアは90未満であるように見えるため、詳細サマリーで監査に合格した静的資産が引き続き表示されています。
スコア90未満の時は有無を言わず「静的なアセットと効率的なキャッシュポリシーの配信」警告が出るってこと？
ん？いやいや、スコア100でも出たんだけど（汗
確かに警告は出なくても、「合格した監査」のところに項目はあったりするんだけどね。
時間が解決してくれると思いたい(*´ω｀*)
コメントを残す