.htaccessファイルでブラウザキャッシュを設定する。

Webサイトの高速化表示もCWV対策になります。
今回は、ワードプレスに限らず使えるブラウザキャッシュを利用したサイト表示の高速化についてです。

目次非表示

サンプルファイル
- ファイルタイプを調べる
- 期間の設定
キャッシュさせない設定

サンプルファイル

サンプルなのでそれぞれカスタマイズしてご利用ください。
ファイルタイプと期間を設定しています。

<ifModule mod_expires.c>	ExpiresActive On	ExpiresDefault "access plus 7 days"	ExpiresByType text/html "access plus 3 hours"	ExpiresByType text/css "access plus 7 days"	ExpiresByType text/javascript "access plus 7 days"	ExpiresByType application/javascript "access plus 7 days"	ExpiresByType application/x-javascript "access plus 7 days"	ExpiresByType image/jpeg "access plus 1 month"	ExpiresByType image/png "access plus 1 month"	ExpiresByType image/gif "access plus 1 month"	ExpiresByType image/svg "access plus 1 month"	ExpiresByType image/webp "access plus 1 month"	ExpiresByType image/x-icon "access plus 1 month"
</ifModule>

ファイルタイプを調べる

ファイルタイプの種類については、MIMEタイプ(マイムタイプ) + 拡張子などで検索すると出てきます。

参考

よくある MIME タイプ – HTTP | MDN

MDN Web Docs

期間の設定

Googleによると、キャッシュ期間の適正値はコンテンツに応じて1週間〜1年の間がオススメとなっています。

秒 seconds
分 minutes
時 hours
日 days
週 weeks
月 months
年 years

キャッシュさせない設定

反対にテストサーバーなどで構築中の場合、キャッシュさせない設定になります。

#すべてのファイルのキャッシュ無効化
<Files ~ ".*">	Header set Pragma no-cache	Header set Cache-Control no-cache
</Files>

#一部のファイルのキャッシュ無効化
<Files ~ "\.(html|css|js|php|jpe?g|png|gif|svg|webp|ico)$">	Header set Pragma no-cache	Header set Cache-Control no-cache
</Files>