Webサイトの高速化!!「ブラウザのキャッシュを活用する」方法

Webサイトの高速化の方法の1つとして、ブラウザのキャッシュを活用する方法があります。

プラウザのキャッシュとは、一度ダウンロードしたCSSやJSのファイルをローカル環境に保存して、次回アクセスからはそちらのファイルを利用することです。

これにより、毎回のダウンロード時間を短縮できるようになり、高速化が図れます。

ブラウザのキャッシュを活用
  1. ブラウザキャッシュの利用確認
  2. ブラウザキャッシュの有効期限を指定する

ブラウザキャッシュの利用確認

ブラウザキャッシュの有無を知るためには、以下のサイトにアクセスして確認したいサイトのURLを入力します。

もしプラウザのキャッシュを利用していない場合は、このサービスで確認するとこのよう「ブラウザのキャッシュを活用する」と改善点に挙がりますので、確認してみて下さい。

cache

ブラウザキャッシュの有効期限を指定する

ブラウザキャッシを活用するためには、キャッシュの有効期限を指定する必要があります。

有効期限を指定していない場合は、有効期限切れとして扱われ常にサーバからダウンロードを行います。

有効期限の指定方法はいくつかありますが、今回は.htaccessを使用した方法と、HTML文書のHead部に直接記載する方法の2通りを紹介します。

.htaccessでの指定

キャッシュの有効期限を指定する場合は、「.htaccess」に以下の内容を記載します。

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

これで、gif / jpg / jpeg / png は1ヶ月、css / js は10日間キャッシュが有効化します。

access plus 1 hours1時間
access plus 1 days1日
access plus 1 months1ヶ月
access plus 1 years1年
Head部に記述

HTML部に直接指定する場合は、以下の様に記載します。

HTML
<meta http-equiv="Expires" content="">

contentには、秒での指定とグリニッジ標準時間(GMT)での指定方法があります。

秒の指定
<!-- 秒指定 -->
<meta http-equiv="Expires" content="86400">
<!-- GMT指定 -->
<meta http-equiv="Expires" content="Wed, 30 Apr 2014 12:00:00 GMT">

秒の指定では、86400秒(24時間)の間、キャッシュが有効となります。GMT指定では、2014/04/30 12:00までキャッシュが有効となります。

ブラウザキャッシュの有効期限の設定は、簡単に出来るパフォーマンス対策の1つなので是非この機会にやって見てはどうでしょう。

divider

Trackback URL

http://webnonotes.com/web/browsercache/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>