「ブラウザのキャッシュを活用する」にはApacheモジュールmod_expiresを設定

サイトのページ表示速度高速化のひとつとしてページのキャッシュを考えてみた。

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

以下のリソースではキャッシュの有効期間が短くなっています。少なくとも 1 週間以上先の有効期間を以下のリソースに対して指定してください

画像やスタイルシートなど（有効期限が指定されていません）と表示されている。
今回はこの「ブラウザのキャッシュを活用する」を対応してみる。

方法はいくつかあるみたいだけれど、Webサーバー Apache モジュールの一つのmod_expiresを検討してみる。
ブラウザキャッシュの有効期間を設定できるようだ。

閲覧したページをクライアントのブラウザ側でデータをキャッシュすることで一度閲覧したページはローカルのデータキャッシュを使用するため、さくさく表示されるようになるとのこと。

キャッシュを設定していないと同じページや同じ画像を画面に表示させるたびに、サーバーに情報をリクエストするので毎回毎回サーバーから情報を取りに行くことになる。それを自分のPC側にキャッシュさせたデータを使うことで負荷を軽くさせるということ。

だいたいみんなが知っているようなWEBサービスのサイトはどこもやっているような設定。

mod_expiresの使い方、設定方法

今回は.htaccessに記述してみた。
以下内容を記述。cssやjavascript、画像などの有効期間を設定。

<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/png "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType text/css "access plus 1 months"
ExpiresByType text/javascript "access plus 1 months"
ExpiresByType application/x-javascript "access plus 1 months"
ExpiresByType application/x-shockwave-flash "access plus 1 months"
ExpiresDefault "access plus 1 days"
</IfModule>

設定した内容：
画像のpng、jpg、gifファイルは１ヵ月間で指定。
cssファイルは１ヵ月間。javascriptとフラッシュも１ヵ月間。
基本のキャッシュは１日で指定。

これで完了。ブラウザ側でキャッシュを強制的に削除するか、ページをリロード、再読み込み（F5）をしない限りはキャッシュが残る設定になる。

PageSpeed Insightsで確認↓

いくつか設定されていないファイルが残っているけどほとんど表示がなくなった。

実際には体感的な表示速度が大幅に向上した感じでした。

この設定をするうえで、問題点というか懸念点としては、キャッシュの設定をしたファイルを更新した場合にブラウザにキャッシュが残っているので、クライアント側でキャッシュを消したり、リロードしたりしないと変更内容が変わらないというところです。なので変更したファイルはファイル名を変えるなどの対応をしないと瞬時には変更内容が反映されない。

これでは運営上、支障がきたしてしまうので、cssやjavascriptではヘッダの読み込み箇所に何らかのパラメータを付与することで別ファイルと認識させて対応することにしました。

呼び出しファイルのパスに更新日時のパラメータを付与する。

<link rel="stylesheet" href="http://example/css/style.css?ver=201211081002" 　type="text/css" />
<script src="http://example/js/script.js?ver=201211081002" type="text/javascript"></script>

PHPの場合

PHPでファイルの更新日時を取得してファイル名のあとに日時のパラメータを付与する。以下PHPの記述時方法。

ヘッダのcss呼び出しの記述

<link rel="stylesheet" href="http://example/css/style.css?ver=<?php echo date('ymdHi', filemtime('http://example/css/style.css'));?>" type="text/css" />

斜体の箇所はcssのパスを記述。
filemtime(‘更新日時を取得する対象ファイルのパス’)

ヘッダのjavascript呼び出しの記述

<script src="http://example/js/script.js?ver=<?php echo date('ymdHi', filemtime('http://example/js/script.js'));?>" type="text/javascript"></script>

斜体の箇所はjavascriptのパスを記述。
filemtime(‘更新日時を取得する対象ファイルのパス’)

上記の設定をすることでファイルが更新された場合呼び出しファイルに更新年月日時分が追加されるのでブラウザがキャッシュしている変更前のファイルは呼び出されないように対応できる。