レンタルサーバー比較

ブラウザキャッシュの設定方法【.htaccessの書き方】

ブラウザキャッシュの設定方法
更新日：2021年2月17日

ブラウザキャッシュとは？

ブラウザキャッシュとは、Webサイトにはじめてアクセスした時にサイトのデータをブラウザに一時保存しておき、2回目以降のアクセスではサーバーからでなくブラウザからデータを読み込むという仕組みのことです。

ブラウザキャッシュを使用することでサーバーとブラウザ間のやりとりが減るため、サイトの高速化や転送量を削減できるというメリットがあります。

ブラウザキャッシュのメリット

ブラウザにキャッシュさせるファイルと有効期間は自由に設定することができますが、更新頻度の高いファイルや動的コンテンツなどをキャッシュさせてしまうと、サイトの変更が反映されなかったり正しく動作しなくなるといった不具合が出るので注意が必要です。

キャッシュには他にも多くの種類があり、例えばサーバー側にキャッシュする仕組みのことをサーバーキャッシュといいます。

.htaccessでブラウザキャッシュの設定をする

.htaccessとは、Webサーバーの挙動を設定できるファイルのことで、ApacheというWebサーバーを採用しているレンタルサーバーで使用することができます。
.htaccessでブラウザキャッシュの設定する方法は少しややこしいのですが、キャッシュさせるファイルや有効期間を自由に設定できるというメリットがあります。

.htaccessでブラウザキャッシュの設定をするには、「Cache-Controlヘッダー」で設定する方法と「Expiresヘッダー」で設定する方法があり、両方とも設定している場合はCache-Controlヘッダーが優先されます。
Googleは以前まで古いブラウザのためにExpiresヘッダーを推奨していましたが、現在はCache-Controlヘッダー推奨に変更されているようです。

参考：ブラウザのキャッシュを活用する（Google Developers）

※.htaccessは挙動にかかわる重要なファイルなので、必ずバックアップをとり、記入間違いのないように注意してください。

※.htaccessのルールとして、最後の行を必ず改行（空白の行）にしてください。

※メモ帳で.htaccessの編集をすると「.htaccess.txt」というファイルになってしまうので、FTPソフトでレンタルサーバーにアップロードした後、FTPソフト上で「.txt」の部分を削除してください。

Cache-Controlヘッダーによるブラウザキャッシュの設定

Cache-Controlヘッダーでブラウザキャッシュの設定をするには、「FilesMatch」にキャッシュするファイルを拡張子で指定し、「Cache-Control max-age」にキャッシュの有効期間を秒数で指定します。
キャッシュの有効期間は1週間以上～1年未満（604800秒～31536000秒）が推奨とされています。

静的ファイルを1週間キャッシュする設定の場合は、下記コードのように記述します。

# 静的ファイルを1週間キャッシュする
<FilesMatch "\.(css|js|jpg|jpeg|gif|png|svg|svgz|webp|ico|bmp|woff|woff2|ttf|otf)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>

静的ファイルを1週間キャッシュするけど、CSSとJavaScriptファイルはキャッシュしない設定の場合は、下記コードのように記述します。

# 静的ファイルを1週間キャッシュする
<FilesMatch "\.(jpg|jpeg|gif|png|svg|svgz|webp|ico|bmp|woff|woff2|ttf|otf)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>

# CSSとJavaScriptファイルはキャッシュしない
<FilesMatch "\.(css|js)$">
Header set Cache-Control no-cache
Header set Pragma no-cache
</FilesMatch>

音声や動画ファイルもキャッシュさせたい場合は下記コードを参考ください。

# 静的ファイルを1週間キャッシュする（音声と動画ファイルを追加）
<FilesMatch "\.(css|js|jpg|jpeg|gif|png|svg|svgz|webp|ico|bmp|woff|woff2|ttf|otf|mp3|m4a|ogg|mid|midi|mp4|mpg|mpeg|webm|mov|wmv|avi)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
FilesMatch
キャッシュするファイルを拡張子で指定します。
（）内に拡張子を記述し、区切りにはバーティカルバー（半角パイプ）を使用します。
Header set Cache-Control "max-age="

キャッシュの有効期間を秒数で指定します。
1日～1年を秒数に換算すると以下のようになります。

  • 1日＝86400秒
  • 1週＝604800秒
  • 1ヶ月（30日）＝2592000秒
  • 1年（365日）＝31536000秒
Header set Cache-Control no-cache
キャッシュしないための設定ですが、正確にはアクセスの度に毎回サーバーへ問い合わせをし、内容に変更があればキャッシュを使用してはいけないという意味です。
一切キャッシュを保存しない設定にする場合は「no-store」と指定します。
Header set Pragma no-cache
古い環境に対応するための設定です。
Header set Cache-Control no-cacheと同じ動作をします。

Expiresヘッダーによるブラウザキャッシュの設定

Expiresヘッダーでブラウザキャッシュの設定をするには、「ExpiresByType」にキャッシュするファイルをMIMEタイプで指定し、「access plus」にキャッシュの有効期間を秒から年の単位で指定します。

キャッシュするファイルはMIMEタイプで指定するということに注意してください。
MIMEタイプがわからない場合は、拡張子をWikipediaで検索すると出てきます。

参考：MIMEタイプとは？【.htaccessで追加する方法】

キャッシュの有効期間は1週間以上～1年未満が推奨とされていますが、月や年では日数が変動してしまうため、週以下の単位で指定することをおすすめします。
また、Cache-Controlヘッダーと両方設定する場合は、キャッシュの有効期間が同じになるように設定してください。

静的ファイルを1週間キャッシュする設定の場合は、下記コードのように記述します。

# 静的ファイルを1週間キャッシュする
<ifModule mod_expires.c>
ExpiresActive On

ExpiresDefault "access plus 1 seconds"

ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/svg+xml "access plus 1 weeks"
ExpiresByType image/webp "access plus 1 weeks"
ExpiresByType image/vnd.microsoft.icon "access plus 1 weeks"
ExpiresByType image/bmp "access plus 1 weeks"
ExpiresByType font/woff "access plus 1 weeks"
ExpiresByType font/woff2 "access plus 1 weeks"
ExpiresByType font/ttf "access plus 1 weeks"
ExpiresByType font/otf "access plus 1 weeks"
</IfModule>

音声や動画ファイルもキャッシュさせたい場合は下記のコードを参考ください。

# 静的ファイルを1週間キャッシュする（音声や動画ファイルを追加）
<ifModule mod_expires.c>
ExpiresActive On

ExpiresDefault "access plus 1 seconds"

ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/svg+xml "access plus 1 weeks"
ExpiresByType image/webp "access plus 1 weeks"
ExpiresByType image/vnd.microsoft.icon "access plus 1 weeks"
ExpiresByType image/bmp "access plus 1 weeks"
ExpiresByType font/woff "access plus 1 weeks"
ExpiresByType font/woff2 "access plus 1 weeks"
ExpiresByType font/ttf "access plus 1 weeks"
ExpiresByType font/otf "access plus 1 weeks"

ExpiresByType audio/mpeg "access plus 1 weeks"
ExpiresByType audio/aac "access plus 1 weeks"
ExpiresByType audio/ogg "access plus 1 weeks"
ExpiresByType audio/midi "access plus 1 weeks"
ExpiresByType video/mp4 "access plus 1 weeks"
ExpiresByType video/mpeg "access plus 1 weeks"
ExpiresByType video/webm "access plus 1 weeks"
ExpiresByType video/ogg "access plus 1 weeks"
ExpiresByType video/quicktime "access plus 1 weeks"
ExpiresByType video/x-msvideo "access plus 1 weeks"
</IfModule>
<ifModule mod_expires.c>
mod_expires機能が使用可能であれば、タグで囲った設定が実行されるという意味です。
ExpiresActive On
ExpiresとCache-Controlのヘッダー生成を有効にする設定です。
ExpiresDefault "access plus 1 seconds"
すべてのファイルでキャッシュの有効期間を1秒にする設定です。
はじめにキャッシュをリセットするという目的で設定します。
ExpiresByType

キャッシュするファイルをMIMEタイプで指定し、access plusにキャッシュの有効期間を指定します。
有効期間は秒から年の単位で指定できます。

  • 秒＝second
  • 分＝minute
  • 時＝hour
  • 日＝day
  • 週＝week
  • 月＝month
  • 年＝year

レンタルサーバーの機能でブラウザキャッシュの設定をする

レンタルサーバーによっては、高速化機能としてブラウザキャッシュの設定ができる場合があります。
キャッシュさせるファイルと有効期間を自由に設定できないというデメリットはありますが、.htaccessによる設定と効果は同じなので、ややこしい設定が苦手な方にはこの方法がおすすめです。

例えばエックスサーバーの場合、下画像のように設定することが可能です。

エックスサーバーのブラウザキャッシュ設定

ブラウザキャッシュの確認方法

ブラウザキャッシュが正しく動作しているかは、ブラウザの検証ツールで確認することができます。
Google Chromeの場合は以下の手順で確認できます。

  1. 調べたいページでキーボードの「F12」を押す
  2. 「Network」をクリック
  3. 再読み込みをする
  4. 調べたいファイルをクリック
ブラウザキャッシュの確認

※Expiresヘッダーの値は、キャッシュの有効期限を表しています。
※Cache-ControlヘッダーとExpiresヘッダーを両方設定している場合、Cache-Controlヘッダーの設定が優先されます。

ブラウザキャッシュ以外のキャッシュについて

キャッシュにはブラウザキャッシュ以外にも、サーバーキャッシュやCDNキャッシュといった様々な種類のキャッシュがあります。
詳しく知る必要はありませんが、簡単に言うと「どこでキャッシュされるか」というだけです。

レンタルサーバーにもよりますが、ブラウザキャッシュ以外のキャッシュ機能を提供している場合があります。
下記はレンタルサーバーが提供しているキャッシュ機能の一例です。

サーバー名機能名キャッシュの種類
エックスサーバーXアクセラレータサーバーキャッシュ
OPcachePHPプログラムのキャッシュ
さくらのレンタルサーバーコンテンツブーストCDNキャッシュ

レンタルサーバーの機能については、レンタルサーバー比較｜料金と機能の一覧をご覧ください。

ブラウザキャッシュの注意点

ブラウザキャッシュはサイトの高速化や転送量の削減に役立ちますが、間違った設定をしてしまうとサイトの更新が反映されなかったり、サイトが正しく動作しなくなるなどの危険性があります。

繰り返しになる部分もありますが、ブラウザキャッシュの注意点をまとめておきます。

  • キャッシュされているファイルは、更新しても有効期間が切れるまで反映されなくなるので、更新頻度の高いファイルはキャッシュしないか有効期間を短くしてください。
  • 個人情報や企業情報を扱うような重要なファイルは、キャッシュさせてしまうと情報漏洩の危険があるので、絶対にキャッシュさせないようにしてください。
  • プログラムによって毎回表示が変わる動的コンテンツは、キャッシュさせてしまうと正しく動作しなくなる可能性があるので、基本的には静的コンテンツのみをキャッシュするという設定にしておくことをおすすめします。
  • .htaccessファイルは必ずパックアップを取り、編集後はサイトの表示や動作に問題がないか確認してください。
  • .htaccessによるブラウザキャッシュと、レンタルサーバーが提供しているブラウザキャッシュ機能を併用しても意味がないので、設定するのはどちらか片方だけにしてください。
  • .htaccessによるブラウザキャッシュに加えて、レンタルサーバーが提供しているサーバーキャッシュ機能や高速化機能を併用すると、サイトの表示が崩れるなどの不具合が出ることがあるので、併用する場合はサイトに不具合がないか確認するようにしてください。

サイト高速化についての関連ページ

ブラウザキャッシュ以外のサイト高速化については、下記のページもご参考ください。

gzip圧縮の設定方法【.htaccessの書き方】

totopアイコン