【WEBサイト】ブラウザキャッシュは必要か、不要か

WEBサイト

変更したはずのWEBサイトの表示が変わらない。
「キャッシュが原因です」
と、お決まりのパターンです。

そもそも、キャッシュは必要なんでしょうか。
メリットとデメリットを考えてみました。

◆メリット
（1）WEBサイトの表示が早くなる
※ネット回線の速度が普通なら、体感的にはそんなに変わらない気がするけど…
（2）PageSpeed Insightsに言われたから
Googleのパフォーマンス測定ツール「PageSpeed Insights」でキャッシュをしなさいと指示されるために。
https://developers.google.com/speed/pagespeed/insights/?hl=ja

◆デメリット
いつまでたってもページ内容が変更されない。
詳しい方なら、キャッシュクリアをすれば更新される手段を試すのですが、
一般の方にはわかりにくいと思います。
とくにスマホだとキャッシュクリアも面倒です。

最新の内容が反映しにくいデメリットが大きいので、特別な理由がない限りはキャッシュは不要かなぁと思います。
デザインとか内容とかをほとんど変えないサイト（例えば弊社のサービス紹介サイト）
であればキャッシュ有効のほうが良いと思います。
つまり、サイトの内容次第になりますので正解はありません…

さて、キャッシュの無効化、有効化には設定が必要ですが、少しコツがありますので、
メモとしてまとめておきます。

◆キャッシュされているかを確認する。
上記画像の通り、Chromeコンソールで確認できます。
Chromeコンソールを開く
↓
Networkを選択する
↓
適当な要素（.jpg画像とか）を選択する
↓
Status Code に「form memory cache」とか表示されていればキャッシュされています。

◆キャッシュを有効にする
.htaccess　に下記の記述をします。
1 days　の部分は　1 week　とか　1 hours　とか指定できます。

<IfModule mod_expires.c>
	ExpiresActive On
	ExpiresDefault "access plus 1 days"
	ExpiresByType text/css "access plus 1 days"
	ExpiresByType text/js "access plus 1 days"
	ExpiresByType image/jpeg "access plus 1 days"
	ExpiresByType image/png "access plus 1 days"
	ExpiresByType image/x-icon "access plus 1 days"
	ExpiresByType image/vnd.microsoft.icon "access plus 1 days"
	ExpiresByType image/svg+xml "access plus 1 days"
	ExpiresByType application/javascript "access plus 1 days"
	ExpiresByType application/x-javascript "access plus 1 days"
</IfModule>

◆キャッシュを無効にする
（1）.htaccess　に下記の記述

php_flag opcache.enable Off
Header set Cache-Control "no-store" Header set Pragma "no-store"

（2）htmlのヘッダーに記載する。
※html5では意味なかったかも。うろ覚えですが、とりあえず記載しておきましょう。

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
CS3 ALiCE(シーエススリー アリス)

風俗向け管理システム
https://www.cs3.jp/

WEBサイト