mod_expiresの設定方法、ブラウザキャッシュの期限を定義

Apacheの「mod_expires」モジュールを利用してキャッシュする方法
「mod_expires」 は、キャッシュの処理期限を定義するモジュール

ブラウザのキャッシュを利用する設定を行うことで、表示速度を高速にする仕組み


ブラウザ「キャッシュ」とは、
ブラウザで表示したWEBページのデータを一時的にコンピューターに保存

次に、同じページをアクセスすると、インターネット上のデータからではなく
保存されているデータを参照するので、素早くページを表示させることができる

キャッシュとは




ブラウザのキャッシュ機能は、一時的にコンピュータ内に保存することで
次に同じページをアクセスしたときに、保存されたデータを参照する機能で、


ページをスムーズに表示するメリットがあるので、
快適な閲覧環境を提供する上で、ブラウザの「キャッシュ機能」が有効的になる


但し、キャッシュは古いものから自動的に削除される仕組みになっていて
保存されたキャッシュも、決められた一定内の容量範囲となっている!

決まった容量にどんどん貯めて、古いものから削除されていく仕組み
また、ユーザー側で、キャッシュ(インターネット一時ファイル)の削除も可能となる



Webページのパフォーマンス改善

「mod_expires」モジュールは、
ブラウザのキャッシュ機能を活用した上で、有効期限の設定を行う

キャッシュの再読込み期限を設定してブラウザにキャッシュ!

強力キャッシュとして、ファイルを何度も読み込むことがなくなり、
転送量の削減と、WEBページを速く表示させるために効果である


データ通信量が大幅に減り、転送量の削減ができる
負荷が低減され、Webページの表示速度を改善できる



無駄なリクエストが減る!サーバーリソースに優しい!
ユーザーにとっては、表示速度向上されるメリットが継続される

因みに、ブラウザのアドレスバーにある「」を、クリックすることで、
そのページを再読み込みして、最新のページを表示させられる

もちろん、ユーザー側でキャシュを削除することも可能である




Googleでも、表示速度を改善させるのに「キャッシュ」を推薦している

Google推薦

「静的なリソースのキャッシュの有効期間は 1 週間以上」
「広告やウィジェットなどの場合は、キャッシュの有効期間を 1 日以上」

ガイドラインに違反するので、1 年以上先には設定しないこと
Google推薦:ブラウザのキャッシュを活用する

頻繁にページを更新してる場合などは、
古いページが表示されてしまうので、その辺を見極めて期限を設定すること

「Cache-Control: max-age よりも Expires をおすすめします」とある!






「mod_expires」を活用して、ブラウザのキャッシュする方法

WEBサイトのデータ(CSS、JavaScript、画像)などを
「.htaccess」ファイルを使って、キャッシュの処理時間を定義させる

WEBサーバの「Apache」が利用できる環境で
「mod_expires」モジュールをインストールされていれば利用が可能

Apacheの「mod_expires」モジュールを活用

注意事項

Apacheのファイルを編集することで、設定することが可能ですが
共用サーバーは、「Apache 」を編集することができないので、


「.htaccess」ファイルを使って、記述して有効に設定させます

但し、サーバー仕様で、「Apache」が利用でき、
尚且つ「mod_expires」のモジュールがインストールされているサーバー

エックスサーバー、ロリポップ!、ヘテムル、お名前.com、さくらのサーバーなど
「mod_expires」が対応になっているレンタルサーバー

分からない場合は、レンタルサーバー会社に確認が必要になる
ただ、モジュール関連は、CPUに負荷を掛ける傾向なので非対応が多い!


「CSS、GIF、JPG、JPEG、PNG、javascript」の期限を設定
「.htaccess」ファイルに、以下をコピペして記述する(単位は任意に変更)

ExpiresActive On
ExpiresByType text/css "access plus 1 days"
ExpiresByType text/javascript "access plus 10 days"
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"
ExpiresByType application/pdf "access plus 10 days"
ExpiresByType application/javascript "access plus 10 days"
ExpiresByType application/x-javascript "access plus 10 days"

「CSS、GIF、JPG、JPEG、PNG、javascript」を定義
「ExpiresActive On」・・モジュールを有効に設定
「ExpiresByType」 ・・・デフォルトの有効期限を定義
「ExpiresDefault」 ・・・全てのファイルを対象
「acces」・・・・・・・・アクセスしてからの時間を指定

年 years
月 months
週 weeks
日 days
時 hours
分 minutes
秒 seconds




「Cache-Control: max-age」HTTP/1.1 仕様以上

Catch-Controlヘッダーのmax-ageディレクティブを使ってリソースの有効期間を設定
HTTP/1.1 仕様以上であれば設定可能

Googleでは、「mod_expires」を推薦されているが、
「mod_expires」が対応されていないWEBサーバーをの場合に適してる

「CSS、GIF、JPG、JPEG、PNG、javascript」の期限を設定
「.htaccess」ファイルに、以下をコピペして記述する(単位は任意に変更)

<Files ~ ".(gif|jpe?g|png|ico|js|otf|ttf|eot|woff)$">
    Header set Cache-Control "max-age=2592000"
</Files>
<Files ~ ".(css|js|html|gz)$">
    Header set Cache-Control "max-age=86400, public"
</Files>

拡張子で、有効期限を分けたい場合は
拡張子毎に記述して設定する

「gif|jpe?g|png|ico」は、画像ファイル
「jpe?g」=「jpg、jpeg」
「swf」は、フラッシュファイル
「gz」は、圧縮ファイル

1時間  3600
1日   86400
1週間  604800
2週間  1209600
30日  2592000
90日  7776000
180日 15552000
365日 31536000