Apacheウェブサーバで画像ファイル等をブラウザにキャッシュさせる

ブラウザのキャッシュを活用する

Google アナリティクスのレポート→行動→サイトの速度→速度の提案で、

ブラウザのキャッシュを活用する
静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザがネットワークからではなくローカル ディスクから以前にダウンロードしたリソースを読み込むようになります。
次のキャッシュ可能なリソースでブラウザのキャッシュを活用してください:

で、どうすればキャッシュさせるか調べてみました。

「静的リソース(HTML,JS,CSS,画像)のブラウザキャッシュを制御」を大いに参考にさせてもらいました。

# For dynamic contents

Header set Cache-Control "no-cache" env=X_CACHE_PATTERN1

Header unset Expires env=X_CACHE_PATTERN1

Header unset Last-Modified env=X_CACHE_PATTERN1

Header unset Etag env=X_CACHE_PATTERN1

# For HTML files

Header set Cache-Control "max-age=0" env=X_CACHE_PATTERN2

Header set Expires "Mon, 26 Jul 1997 05:00:00 GMT" env=X_CACHE_PATTERN2

# For CSS,JavaScript files

Header set Cache-Control "max-age=600" env=X_CACHE_PATTERN3

# For Image files

Header set Cache-Control "max-age=86400" env=X_CACHE_PATTERN4

で、何秒キャッシュさせるのがいいのか?と思って調べたのですが、なかなか答えのあるサイトは見つかりませんでした。
上記サイトと同じでいいかな、とも思ったんですが、これもやはりGoogle アナリティクスのPageSpeed Insightsに書いてありました。
回答はなんと!

• 画像ファイルは1週間から1年
• JSファイル・CSSファイルは1日以上

ブラウザのキャッシュを活用する

推奨される解決方法
サーバーでブラウザのキャッシュを有効にします。静的なリソースのキャッシュの有効期間は 1 週間以上にしてください。広告やウィジェットなどのサードパーティ リソースの場合は、キャッシュの有効期間を 1 日以上にします。キャッシュ可能なすべてのリソースで、次のような設定をおすすめします:

画像ファイルの1週間は長すぎる、と思ったけど、サイトデザインで背景に画像を使うようなサイト(私のサイトがそうです)なら1週間でもいいかな、と。
差し替えた画像ファイルは、ファイル名を変更する運用でいけばいいかと。実際、Google アナリティクスにもそのようなことが書いてあります。

URL フィンガープリントの使用

ときどき変更されるリソースの場合、サーバー上でリソースが変更され、サーバーがブラウザに新しいバージョンが提供されたことを通知するまで、ブラウザでリソースをキャッシュしておくことができます。リソースの各バージョンに一意の URL を指定すると、この方法を実現できます。たとえば、「my_stylesheet.css」というリソースがあるとします。このファイル名を「my_stylesheet_fingerprint.css」に変更できます。リソースが変更されると、フィンガープリントも変更されるため、URL も変わります。URL が変更されるとすぐに、ブラウザはリソースの再取得を強制されます。フィンガープリントを使用すると、頻繁に変更されるリソースでも、有効期限をそれより先の方の日付に設定できるようになります。

フィンガープリントの一般的な方法として、ファイルのコンテンツのハッシュをコード化した 128 ビットの 16 進数が使用されます。

そんな訳で、自分なりに導き出したApacheの設定は以下の通りです。

以下の内容をhttpd.confのVirtualHostディレクティブに書くか、.htaccessに書きます。

RewriteEngine on

RewriteRule \.(php|pl|cgi)$ - [L,E=x_dynamic_file:]

RewriteRule \.html$ - [L,E=x_html_file:]

RewriteRule \.(css|js)$ - [L,E=x_static_file:]

RewriteRule \.(gif|jpe?g|png)$ - [L,E=x_image_file:]

# dynamic files

Header set Cache-Control "no-cache" env=x_dynamic_file

Header unset Expires env=x_dynamic_file

Header unset Last-Modified env=x_dynamic_file

Header unset Etag env=x_dynamic_file

# html files

Header set Cache-Control "max-age=0" env=x_html_file

Header set Expires "Sat, 1 Jan 2000 00:00:00 GMT" env=x_html_file

# CSS, JavaScript files - 10 minutes

Header set Cache-Control "max-age=600" env=x_static_file

# Image files - 1 week

Header set Cache-Control "max-age=604800" env=x_image_file

• 動的ページ(.php, .pl, .cgi)はキャッシュさせない。
• htmlファイルもキャッシュさせない。
• CSS, JavaScriptは10分間キャッシュさせる。サイトの滞在時間からそんなもんかな、と考えました。
• 画像ファイルは1週間キャッシュさせる。

この設定をして、

• 画像が10個程度のウェブページのPageSpeedスコアが、(前回70→)86→96に!
• 全部をPerlで書いてあるWikiページは、84→86に

なりました。
他のページも90越えが多くなりました。
当分の間、これで運用していこうと思います。