1. HOME
  2. 開発・ブログ運営
  3. WEB パフォーマンス
  4. エックスサーバーでブラウザキャッシュ(mod_expires)の設定をしてみた
2014年08月08日
Chrome で WEB レスポンスヘッダ と リクエストヘッ ...
2014年09月23日
CSS と Javascript の読み込み順序を変えてみた ...
2012年11月17日
Google の Chrome Developer Tools ...
2013年12月15日
WordPress で構築したブログの表示速度を計測する方法 ...
2016年07月29日
AMP ページに Google Analytics のトラッキ ...
2012年11月16日
Google の Chrome Developer Tools ...

エックスサーバーでブラウザキャッシュ(mod_expires)の設定をしてみた

mod_expires の設定は簡単に出来て効果抜群だったので、忘れないように覚え書き。

このブログはエックスサーバーのレンタルスペースで動いている訳ですが、表示速度の高速化を図るべく 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 で指定します。

  1. image/gif
  2. image/jpeg
  3. image/png
  4. text/html
  5. text/css

など、キャッシュしたい対象のファイルの種類を指定します。PHP ファイルは、text/html に含まれるようです。

参考:MIME Type 一覧表
参考:Multipurpose Internet Mail Extensions – Wikipedia

ExpiresByType のベース(いつから)の設定

「ベース」にはキャッシュされる起点(条件)を指定します。

  1. access
  2. now (‘access’ と同じ)
  3. modification

のいずれか(実質、acccess か modification)が指定でき、access は、対象ファイルがアクセスされた時から、modification は、対象ファイルが変更(修正)された時から、を起点にキャッシュされるようです。

ExpiresByType のタイプ(いつまで)の設定

最期に「タイプ」を指定する訳ですが、「タイプ」でキャッシュされる期間をしていします。「タイプ」には、

  1. years
  2. months
  3. weeks
  4. days
  5. hours
  6. minutes
  7. 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 で確認してみます。

  1. Chrome Developer Tools を起動して、Network を開きます。



  2. ブラウザで自分のブログにアクセスします。そうすると、設定した対象のファイルがキャッシュされたはず。

    そして、ブラウザでリンクをクリックします(リロードはNG)。サイドバーに使っている画像など、1回目にアクセスしたページと同じファイルで表示されていて、かつ .htaccess でキャッシュ対象として設定したファイル(gif, jpeg など)は、WEB サーバーからではなくて、キャッシュから読み込まれているはず。

    Chrome Developer Tools にずらずらーっと表示された中で、キャッシュ対象のファイルの Size が (from cache)となっていれば成功です。


なんか、ちょっとうれしい。

もうちょっと詳しく確認してみる

キャッシュから読み込まれていることは確認できたけど、ちゃんと指定した通りの期間、キャッシュが有効になっているかどうかを確認してみます。

  1. 左側からキャッシュ対象のファイルをクリックすると、右側に 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 がインストールされていない事もあるみたいですが、エックスサーバー であれば何ら問題なく使えちゃいます。

    エックスサーバー さいこーです。

    でわでわ。








この記事にコメントする





Copyright © 2012 - 2014 MacBook Air とWordPressでこうなった All rights reserved
Powered by WordPress.