ブラウザキャッシュを利用してサイトの表示高速化

みなさんこんにちは。本日はWebブラウザのキャッシュ機能を利用してサイトの高速化をします。ブラウザキャッシュは設定するだけで有効にさせることができる仕組みですが、意外と取り扱いは難しいとされています。そのあたりの背景も含めてゼロから説明していきます。

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

概要

ブラウザキャッシュとはSafariやChromeなどのブラウザアプリケーションそのものにキャッシュさせることです。これを有効化することでユーザの体験としてサイトを高速に見せることができます。みなさんも一度見たサイトに再度訪れた時に高速に表示されることはありませんか？それがブラウザキャッシュです。ブラウザキャッシュされていればインターネットがオフラインでもそのページが閲覧できたりします。

早速ですが、ブラウザキャッシュの流れをイラストで紹介しましょう。

1. ブラウザはWebページにアクセスする
2. Webサーバはページをキャッシュするように指定する
3. ブラウザはキャッシュの指定にしたがいユーザの端末にキャッシュする ※厳密にはメモリキャッシュとディスクキャッシュがあります
4. ブラウザは同じページにアクセスするとき、キャッシュが存在すればキャッシュからページを読み込む

以上のような流れになっています。端的にいえば、同じ内容のページは何度もアクセスせずに、端末内に持っておけば、わざわざWebサーバーと通信しなくていいじゃん！というカラクリになっています。少しは理解が進んだでしょうか？

ちなみに筆者の感覚ですが、「Webサイトのキャッシュ」という言葉を一般に使ったときはこのブラウザキャッシュを指していることが多いです。つまりWebサイトのキャッシュにはページキャッシュ、データベースキャッシュなど様々な種類のキャッシュがありますが、たいていの場合はブラウザキャッシュを想定した狭義の意味でキャッシュという言葉を利用しているということです。

ブラウザキャッシュの効果は？

ブラウザキャッシュはそもそもサーバに接続しなくていいため、パフォーマンス効果は非常に高いです。また通信が発生しなくなることによりサーバ代の節約効果も期待できます。本サイトの計測結果としては以下のようになります。

ブラウザキャッシュなし

ブラウザキャッシュあり

ブラウザキャッシュがあれば転送ファイルサイズは 833KB → 293KB まで減少しています。総ロード時間も 607ms →398ms まで減少しています。キャッシュが非常に効果が高いことがわかるでしょう。

注意すべき点

さてここからは注意点になります。まずブラウザキャッシュは他のキャッシュと比較しても、管理者がコントロールしにくいため扱いが難しいです。なぜなら読者が自分でキャッシュを消すことができるからです。裏を返せば管理者がキャッシュ消したくても消せない場合があります。セキュリティ観点では、キャッシュさせるべきでないファイルをさせていないかどうか注意が必要です。実害としては例えばですが、サーバ上では記事が公開されているものの、更新がかからず、ユーザの端末では記事が追加されていないなどのケースが考えられます。

またブラウザキャッシュはパフォーマンス観点ではブラウザに一度アクセスさせることで読者のブラウザ（端末）にキャッシュするので、初回のアクセス時は必ずフルリクエストになります。同じページを2回開いてくれる場合にキャッシュ効いてくるということです。

ブラウザからの削除方法

余談ですが、Webサイトの管理者にありがちなのは、自分のサイトだとブラウザキャッシュが効くことで、自分のサイトが早いと勘違いをしてしまったり記事を更新したのに反映されない可能性があります。そういったときはブラウザからキャッシュを削除するとよいです。

サイトの構築中などで何度も削除したい場合、また他のサイトでもキャッシュが消えたりして面倒な場合、各ブラウザに搭載されているプライベートブラウザで閲覧する方がいいでしょう。プライベートブラウザならばブラウザキャッシュなしの状態から閲覧することができます。

ブラウザキャッシュの確認方法

最もおすすめの方法は Browser Caching Checker というツールを利用することです。以下のようにキャッシュの指定がサーバからなされているファイルを表示してくれます（ページの右側は白塗りしています）。

外部のツールを使うことに抵抗がある場合は、検証ツールから確認する方法がおススメです。検証ツールのNetwork > Sizeという項目が memory cache もしくは disk cache と記載があればそのリクエストではキャッシュが利用されています。

ブラウザキャッシュの設定方法 by WordPress

本サイトでは W3 Total Cacheというプラグインを推奨しています。このプラグインについては以下の記事で紹介しているため、もし有効にされていない場合はこの機会に有効することをおすすめします。

さてW3 Total Cache における設定方法はブラウザーキャッシュにチェックを入れるだけです。簡単ですね！

データをキャッシュしても問題のない情報であることを事前に確認してください。
何度も言うようですが、ブラウザキャッシュが有効な場合、CDNや端末にキャッシュされます。

さいごに

今回はキャッシュの基本であるブラウザキャッシュについて紹介しました。ブラウザキャッシュはクライアントの端末に保存されることもあり、認証情報などの取り扱いには特に注意をせねばならないキャッシュです。しかし有効になればユーザはサーバにアクセスすることなくページを開くことができるなど静的なサイトであれば強みを活かすことができます。ぜひ確認の上有効にしてみてください。