このブログはエックスサーバーのレンタルスペースで動いている訳ですが、表示速度の高速化を図るべく mod_expires の設定をしたので覚え書き。
.htaccess で設定してみる
WEB サーバーはレンタルサーバーだからサーバー自体の設定変更ができないので .htaccess に以下の内容を記述しました。
# BEGIN CACHE
<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif “access plus 30 days”
ExpiresByType image/jpeg “access plus 30 days”
ExpiresByType image/png “access plus 30 days”
ExpiresByType application/rss+xml “access plus 30 minutes”
ExpiresByType application/x-javascript “access plus 20 days”
ExpiresByType text/html “modification plus 1 days”
ExpiresByType text/css “access plus 1 days”
</ifModule>
# END CACHE
.htaccess は配置場所以下全てのディレクトリに設定内容が適用されます。とりあえず.htaccess はトップディレクトリに置いてみました。
実際の作業はこれだけで mod_expires の設定は終わりです。以下は設定ファイル（.htaccess）の書き方とか。
.htaccess 記述ルール
まず初めに、
ExpiresActive On
と書くことによって、mod_expire を有効にします。
次に、ExpiresByType を使ってキャッシュ対象のファイル指定などをします。ExpiresByType は、
ExpiresByType ファイルタイプ “ベース plus N タイプ”
と書けば良いみたい。
どの種類のファイルを（ファイルタイプ）、いつから（ベース）、いつまで（タイプ）キャッシュするのか？を設定します。
ExpiresByType のファイルタイプ（どの種類のファイルを）の設定
「ファイルタイプ」は MiME で指定します。- image/gif
- image/jpeg
- image/png
- text/html
- text/css
など、キャッシュしたい対象のファイルの種類を指定します。PHP ファイルは、text/html に含まれるようです。
参考：MIME Type 一覧表
参考：Multipurpose Internet Mail Extensions – Wikipedia
ExpiresByType のベース（いつから）の設定
「ベース」にはキャッシュされる起点（条件）を指定します。
- access
- now (‘access’ と同じ)
- modification
のいずれか（実質、acccess か modification）が指定でき、access は、対象ファイルがアクセスされた時から、modification は、対象ファイルが変更（修正）された時から、を起点にキャッシュされるようです。
ExpiresByType のタイプ（いつまで）の設定
最期に「タイプ」を指定する訳ですが、「タイプ」でキャッシュされる期間をしていします。「タイプ」には、
- years
- months
- weeks
- days
- hours
- minutes
- seconds
の中から指定します。例えば、3日であれば 3 days。ってそのまんまですね。
ExpiresByType の設定例
例えば、jpg 画像を アクセスされてから 30 日間キャッシュしたい場合は、
ExpiresByType image/jpeg “access plus 30 days”
となります。ちなみに、ここまで説明してきた書き方は代替構文のようで、より単純に、
ExpiresByType image/jpeg A2592000
と書くこともできます。（というかこちらがオリジナル）
access の代わりに A を、modification の場合は M を指定して秒数を指定すればおっけー。（上記例は、2,592,000秒＝30日）
こちらの書き方の方がシンプルだけど意味がわかりにくいかな。なんかプロっぽいけど好みに応じてどちらの書き方にするか決めれば良いと思います。
参考：mod_expires – Apache HTTP サーバ
ちゃんと expires ヘッダが追加されているかどうかを確認してみる
設定が終わったら、ちゃんとexpires ヘッダが追加されているかどうかを Chrome Developer Tools で確認してみます。
-
Chrome Developer Tools を起動して、Network を開きます。
-
ブラウザで自分のブログにアクセスします。そうすると、設定した対象のファイルがキャッシュされたはず。
そして、ブラウザでリンクをクリックします（リロードはNG）。サイドバーに使っている画像など、1回目にアクセスしたページと同じファイルで表示されていて、かつ .htaccess でキャッシュ対象として設定したファイル（gif, jpeg など）は、WEB サーバーからではなくて、キャッシュから読み込まれているはず。
Chrome Developer Tools にずらずらーっと表示された中で、キャッシュ対象のファイルの Size が （from cache）となっていれば成功です。
なんか、ちょっとうれしい。
もうちょっと詳しく確認してみる
キャッシュから読み込まれていることは確認できたけど、ちゃんと指定した通りの期間、キャッシュが有効になっているかどうかを確認してみます。
- 左側からキャッシュ対象のファイルをクリックすると、右側に HTTP Response Header が表示されます。（下までスクロールしてください。）
下の画像のように数行しか表示されない場合は、一度元の画面に戻って別のファイルを選択し直してください。
Response Header とは、対象ファイル（この場合は png ファイル）が WEB サーバーから送られてくるときに、WEB サーバーから一緒に送られる情報です。
っで、Response Header が表示されたらその中に、Cache-Control:max-age=1209600
Expires:Wed, 05 Dec 2012 02:48:01 GMTがあることを確認します。これは png ファイルの Response Header の内容ですが、上記 .htaccess で設定したとおり、Cache-Control の max-age が、1,209,600秒（14 days）になっています。
Expires は、表示されている日時までキャッシュが有効ですよ、という意味。ちゃんと約2週間後になってます。
当然、.htaccess でキャッシュ有効期間を再設定すれば、Cache-Control などの値は変わりますので、.htaccess を修正した場合は、Response Header を確認してちゃんと意図通りの設定が反映されているか確認すると安心。
なんかプロっぽくなってきた（笑）。
実際の効果
サイトの作り方（画像ファイルなどの量）にもよりますが、このブログでは ページの読み込み速度が 0.5秒～0.8秒ほど早くなりました。
たった、0.5～0.8秒かよ、と思うかもしれませんが、0.5秒の差は大きいです。体感できるレベル。モッサリ感も多少無くなった。
ページの表示速度（読み込み速度）の確認方法については Google の Chrome Developer Tools で サイトの表示速度を計測してみた をご覧ください。
まとめ
レンタルサーバーによっては、mod_expires がインストールされていない事もあるみたいですが、エックスサーバー
であれば何ら問題なく使えちゃいます。
エックスサーバー さいこーです。
でわでわ。
