ブラウザのキャッシュを活用する
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 onRewriteRule \.(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越えが多くなりました。
当分の間、これで運用していこうと思います。