ブラウザキャッシュとは、

ブラウザーなどが、表示したウェブページのデータを一時的にコンピューターに保存しておく機能です。次に同じページにアクセスしたときに、インターネット上のデータではなく、保存されたデータを参照するため、すばやく表示できます。
–Yahoo! JAPANヘルプセンター

このブラウザキャッシュ、実はコンピュータ内に保存しているとはいうものの、キャッシュファイルが新しいかどうかをWebサーバへ問合せを行っています。そしてWEBサーバーのデータがキャッシュファイルよりも新しければ、WEBサーバーからデータを取得し、そうじゃなければキャッシュファイルを読み込むようになっています。

保存はしていても、データが最新のものなのか、都度サーバーに問い合わせるためサーバー性能や通信している環境によっては読込に時間が掛かる場合もあります。

Expiresヘッダーを使おう

Expiresヘッダーとは、Webサーバーに新しいファイルが存在しているかどうかを確認せず、ブラウザでキャッシュ済みのファイルを強制的に適用する「強いキャッシュ」のことです。

キャッシュ済みのファイルを強制的に読み込む期間を指定することで、この期間は強制的にコンピュータ内に保存されたキャッシュファイルを読み込むことになります。

.htaccessを編集出来るサーバをお使いの場合は、下記を参考に記述します。

# BEGIN Browser Cache
<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"
</ifModule>
# END Browser Cache

「access plus 1 months」で1ヶ月キャッシュを保持する指定。また画像やCSSファイルだけでなく、HTMLやJS、MP4やMOVなどの動画ファイルにもキャッシュを設定することが可能です。

今回は例として画像とCSSに1ヶ月のキャッシュを保持するよう設定してみます。

実際にサイトへ設置してみた

実際に.htaccessを編集して、計測してみました。

上記は一例ですが、読込速度は向上しています。
※あくまで一例ですのでサイトによって読込速度に違いは出ると思います。また.htaccessの編集・設置は自己責任でお願いします。

実際にキャッシュがどのように設定をされているか確認してみましょう。Chromeであれば、ブラウザ内で右クリック「要素を表示」＞「Network」タブを選択し、ページを再読み込み＞画像ファイルを選択＞「Headers」タブを選択し、「cache-control」の欄を確認してみてください。

2,592,000秒＝1ヶ月のキャッシュが保持される設定になっていることが分かります。

使用する際の注意点

最後に、Expiresヘッダーを使用する際に注意したい点についてまとめておきます。

• Expiresを1週間以上、できれば最大で1年間先に設定
• より広くサポートされているExpiresを推奨
• RFCのガイドラインに違反するので、1年以上先には設定しない。
• 強制的なキャッシュなので更新の多いページにはなるべく使わない。

参照：ブラウザのキャッシュを活用する

特に最後の「更新が多いページ」、例えばTOPページや特集ページなどについては過去のデータを読み込むためユーザーに取っては古い情報を与えてしまう可能性もあります。特定商取引法のページや会社概要、送料に関するページなどあまり更新頻度の高くないページに設定するのがいいかもしれません。

上林