ブラウザのキャッシュをコントロールする(1)

2013年11月30日 公開

グーグル先生から「いちいち読み込みファイルが多いし、もうちとキャッシュとか利用した方がえぇんちゃう?」と指摘された。ですよねー! 自分でも、本文に行くまでに何行あんるんだとうんざりする設定ファイル群や、毎度同じロゴ画像たちを何とか始末してやらねばと思っていました。

というわけで、.htaccessでキャッシュコントロール指示を加えることにした。ブラウザにキャッシュさせる時間を指定することで読込の効率化を図ります。

cashew nuts

FilesMatchを使って一括指定

<Filesmatch "\.(jpg|jpeg|png|gif|js|css|swf|ico)$">
    ExpiresActive on
    ExpiresDefault "access plus 2 days"
</Filesmatch>

個人的な感想を述べると、「js」は効いたり効かなかったりするような気がするので少々心配ですが、心配があるファイルはファイルタイプごとに指定するとかそういうことでよいと思います。

個別にファイルタイプごとに指定

ExpiresActive On
ExpiresDefault "access plus 1 hours"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 4 weeks"
ExpiresByType image/png "access plus 1 month"
ExpiresByType application/pdf "access plus 3 month"
ExpiresByType text/html "access plus 15 minutes"
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"

ファイルタイプによって個別にキャッシュ期間を指示できます。この例では、基本的には1時間とし、その他ファイルタイプごとに指定しています。一括指定しなかったものについてだけ書き加えるというやりかたでいいでしょう。

中途半端な時間指定は「2 days 12 hours」のようにできます。2.5 days とか無いんですね。

細かいコトを言えば、1 month の長さがよくわからない。そういうヒトは「4 weeks」とか、「30 days」といった指定の仕方で、スッキリしてください。それと、この手のコマンドはいちいち複数形なのでご注意を。

【参考】How to add Apache Module mod_expires to your .htaccess

動かないサーバーがあります

サーバーがApacheであること以外にも、管理側の都合により禁止していたり、コマンドが認められていなかったりすることがあります。mod_expires が使えない場合はエラーとなりますので事前にご確認を。

.htaccessは末尾に改行が必要です

動かねーぜ! という場合、末尾に改行をいれるだけで動き出すことがあります。

ファイルをキャッシュさせる理由

一度読み込んでキャッシュしたファイルは、指定期間中は基本的に改めて読みに行かず、ブラウザがパソコンに保存しているものが参照されます。そうすることで通信量が減り、表示するまでの読み込み時間が短縮され、表示速度が向上します。

使用頻度が高い Javascript や css、ロゴ画像なんかはそっちで憶えといてね! ということです。

閲覧者側で、キャッシュを禁止したり、ブラウザを終了するとキャッシュも破棄したりと、いろいろな設定がありますので、100%すべてが期待したとおりの動作をするとは限りませんが、一般的にはブラウザ側でも期間や量を定めてキャッシュする設定であることが多いようです。

カシューナッツとは無関係

カシューナッツは「cashew nuts」ですが、キャッシュは「cache」です。現金「cash」とも違います。

.