« Google アナリティクスで画像を最適化する | トップページ

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越えが多くなりました。
当分の間、これで運用していこうと思います。

|

« Google アナリティクスで画像を最適化する | トップページ

Linux」カテゴリの記事

おすすめサイト」カテゴリの記事

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/81940/64906284

この記事へのトラックバック一覧です: Apacheウェブサーバで画像ファイル等をブラウザにキャッシュさせる:

« Google アナリティクスで画像を最適化する | トップページ