この記事では、Webサイトで使われるキャッシュについて整理します。
Webサイトを運営していると、表示速度の改善はかなり気になるところです。画像の容量を小さくする、不要に大きい画像を使わない、WebP形式に変換する。こうした対策は、無料ブログサービスでも取り入れやすい高速化の基本です。
もう少し踏み込むと、HTMLやCSSの構造を整えたり、不要な読み込みを減らしたりすることも表示速度に関わります。
では、WordPressではどうでしょうか。WordPressの高速化について調べていると、よく見かける言葉があります。
「キャッシュをオンにする」
確かにキャッシュは、ページの表示を速くしたり、サーバーへの負担を減らしたりするために使われます。多くの場合、キャッシュは高速化のための仕組みとして紹介されます。
ただし、キャッシュには種類があります。ブラウザ側に残るもの、サーバー側でページや静的ファイルを保存するもの、WordPress内部の処理に使うデータを保存するものでは、役割も影響する場所も違います。
そのため、仕組みを確認せずにキャッシュを強くすると、記事やCSSを修正したのに公開ページへ反映されない、古い表示が残る、といった問題につながることがあります。
この記事では、更新・修正が反映されないときに見直したいキャッシュとして、ブラウザキャッシュ、コンテンツキャッシュ、オブジェクトキャッシュの3つを整理します。
キャッシュは種類ごとに確認する場所が違う
一言でキャッシュと言っても、すべてが同じ場所に保存されているわけではありません。
自分のブラウザに残るキャッシュもあれば、サーバー側でページや画像などを保存するキャッシュもあります。さらにWordPressには、ページを作る途中で使用するデータを再利用するためのオブジェクトキャッシュがあります。
更新や修正が反映されないときは、「キャッシュを消す」とひとまとめに考えるより、どの種類のキャッシュが古い情報を持っているのかを分けて見る方が原因を探しやすくなります。
ブラウザキャッシュ
ブラウザキャッシュは、画像、CSS、JavaScriptなどを自分のブラウザ側に一時保存する仕組みです。
同じページをもう一度開いたときに、すべてをサーバーから取り直すのではなく、ブラウザ内に残っているファイルを再利用することで、表示を軽くできます。
便利な仕組みですが、サイトを運営している側から見ると、修正内容がすぐに見えない原因になることがあります。CSSを直したのに見た目が変わらない、画像を差し替えたのに古い画像が表示される、といった場合です。
この場合、まず確認したいのは「自分のブラウザに古いファイルが残っているだけなのか」です。
ブラウザの閲覧履歴データから「キャッシュされた画像とファイル」を削除すると、ブラウザキャッシュを消せます。
誤って「Cookieとその他のサイトデータ」まで削除しないように注意してください。多くのサイトでログイン状態が解除され、再ログインが必要になる場合があります。
DevToolsでブラウザキャッシュを無効化して確認する
Chromeなどのデベロッパーツールでは、Networkパネルに「キャッシュを無効化」という項目があります。
デベロッパーツールを開いた状態でここにチェックを入れると、そのタブで確認しているページをブラウザキャッシュなしで読み込めます。CSSやJavaScriptの修正が反映されているか確認したいときに使いやすい方法です。
ただし、これは自分のブラウザ側に保存されたキャッシュを使わずに確認する方法です。サーバー側のコンテンツキャッシュや、テーマ・プラグイン側のキャッシュまで無効化するものではありません。
シークレットモードや別ブラウザで確認する
シークレットモードは、通常のブラウザ履歴やキャッシュとは別の状態でページを確認できます。開いた直後は通常の閲覧環境に残っているキャッシュの影響を受けにくいため、修正後の表示確認に使えます。
ただし、シークレットモードでも、そのウィンドウ内でページを開いていくうちに一時的なキャッシュは使われます。確認が終わったらウィンドウを閉じると、そのセッションで使われたデータは破棄されます。
シークレットモードや別ブラウザで最新の表示になっているのに、普段使っているブラウザだけ古い表示になる場合は、ブラウザキャッシュの影響を疑いやすくなります。
一方で、シークレットモードや別ブラウザでも古い表示のままなら、ブラウザキャッシュ以外の原因を見ます。サーバー側のコンテンツキャッシュ、テーマやプラグインのキャッシュ、CDNなどが関係している可能性があります。
ブラウザキャッシュだけが原因なら、自分の確認環境を変えることで最新の表示を確認できます。別環境でも古い表示のままなら、次にサーバー側のキャッシュを確認します。
ConoHa WINGのブラウザキャッシュ設定
ConoHa WINGには、管理画面から設定できる「ブラウザキャッシュ」機能があります。
この機能をオンにすると、ブラウザへキャッシュの利用期間を伝えるExpiresヘッダーが付与されます。再訪問したときに、ブラウザへ保存されているファイルを利用しやすくする設定です。
名称に「ConoHa WINGの設定」と付いていますが、キャッシュデータの保存先は閲覧者のブラウザです。次に説明する、サーバー側のコンテンツキャッシュとは保存場所が違います。
ConoHa WINGサポート｜ブラウザキャッシュ機能を使う
コンテンツキャッシュ
ブラウザキャッシュが閲覧者のブラウザ側に残るキャッシュだとすれば、コンテンツキャッシュはサーバー側で使われるキャッシュです。
生成されたページや画像、CSS、JavaScriptなどをサーバー側で一時保存し、次にアクセスされたときに素早く返せるようにします。
表示速度の面では便利ですが、設定によっては、記事を更新したりCSSを修正したりしても、古い内容がしばらく表示される原因になります。
そのため、コンテンツキャッシュは「高速化のために全部オンにする」ではなく、どの種類のデータをキャッシュするのかを確認して使う必要があります。
ConoHa WINGのコンテンツキャッシュ設定
ここから紹介するのは、ConoHa WINGの管理画面に用意されているコンテンツキャッシュの選択肢です。ほかのレンタルサーバーやキャッシュ系プラグインでは、設定名や対象範囲が異なります。
ConoHa WINGのコンテンツキャッシュでは、動的に生成されるページもキャッシュ対象になる設定があります。初期設定は「ON（すべてのコンテンツ）」です。
ConoHa WINGサポート｜コンテンツキャッシュ機能を使う
コンテンツキャッシュがオフの場合
コンテンツキャッシュをオフにすると、ConoHa WING側でページや静的ファイルを一時保存して再利用する機能は使いません。
更新内容は反映されやすくなりますが、毎回サーバー側で必要な処理を行うため、サイトの構造やアクセス状況によっては表示速度の面で不利になることがあります。
なお、コンテンツキャッシュをオフにしても、ブラウザキャッシュやテーマ・プラグイン側のキャッシュまで自動的にオフになるわけではありません。
ON（静的コンテンツのみ）
静的コンテンツのみをキャッシュする設定では、画像、CSS、JavaScriptなどがキャッシュ対象になります。
記事本文のHTMLは新しく表示されても、CSSやJavaScriptを修正したときに、古いファイルが残って見えることがあります。
たとえば、デザインを直したのに見た目が変わらない、WebツールのJavaScriptを修正したのに動きが変わらない場合は、この設定が影響している可能性があります。
ここで見るポイントは、記事本文ではなく、画像・CSS・JavaScriptのような静的ファイルが古いまま残っていないかです。
ON（HTML/CSS/JS以外静的コンテンツのみ）
ミコトホドでは、ConoHa WINGのコンテンツキャッシュを「ON（HTML/CSS/JS以外静的コンテンツのみ）」で使っています。
この設定では、HTML、CSS、JavaScriptをキャッシュ対象から外し、画像やフォントなどを中心にキャッシュします。
記事本文、デザイン、JavaScriptの調整を反映しやすくしながら、画像やフォントなどの静的ファイルはキャッシュで軽くする考え方です。
- 記事をよく更新する
- CSSを調整する機会が多い
- WebツールのJavaScriptを修正することがある
- 更新内容をできるだけ確認しやすくしたい
こうした運用では、HTML、CSS、JavaScriptをキャッシュ対象から外す設定の方が扱いやすいと感じています。
ON（すべてのコンテンツ）
すべてのコンテンツをキャッシュする設定では、HTMLを含めて広くキャッシュ対象になります。
表示速度の面では有利になる場合がありますが、記事を更新しても古いページが表示されたり、デザイン修正が反映されるまでに時間がかかったりすることがあります。
更新頻度が低く、表示速度を優先したいサイトでは選択肢になります。ただ、頻繁に記事やデザインを修正するサイトでは、反映確認の手間が増える可能性があります。
「すべてキャッシュする」という設定は対象範囲が広いため、古い表示が残ったときに、どのキャッシュが影響しているのかを確認する必要があります。
保存や更新に合わせて自動削除される場合もある
コンテンツキャッシュを使っていても、記事の保存や更新をきっかけに、対象ページのキャッシュが自動で削除されることがあります。
この仕組みがある場合、更新ボタンを押したタイミングで古いキャッシュが削除され、次のアクセス時に新しい内容でページが作られます。
- 保存・更新：WordPressで記事や設定を保存する
- パージ：対象ページの古いキャッシュが削除される
- 再生成：次のアクセス時に新しい内容でページが作られる
ConoHa WINGには、WordPressの記事投稿時にWINGサーバー上のコンテンツキャッシュを自動で削除するプラグインも用意されています。
ただし、すべての環境で同じように動くわけではありません。テーマ、プラグイン、サーバー側のキャッシュ機能によって、キャッシュが削除される条件は変わります。
テーマやキャッシュ系プラグインにキャッシュ削除機能がある場合は、操作名と削除対象を確認したうえで実行します。キャッシュ削除とデザイン設定のリセットは別物なので、リセット系の操作を誤って実行しないように注意します。
毎回手動でキャッシュ削除する運用は負担になる
保存そのものが成功していて、古いキャッシュを見ているだけなら、キャッシュを削除すれば最新の内容が表示されます。
ただし、修正するたびに毎回キャッシュを手動削除する運用は、長く続けるほど負担になります。
記事を更新するたび、CSSを直すたび、JavaScriptを調整するたびにキャッシュ削除と表示確認が必要になると、作業の手順が増えます。消し忘れがあれば、公開ページに古い表示が残ります。
また、自分のブラウザでは最新に見えていても、別の端末や別のブラウザでは古いキャッシュが残っていることがあります。確認する環境が増えるほど、「どこに古い表示が残っているのか」の切り分けも面倒になります。
キャッシュ削除直後は、サーバー側でページやファイルを作り直す状態になります。そのため、アクセス状況によっては一時的に表示が重く感じられることもあります。
毎回手動で消す前提にするより、更新頻度や修正内容に合ったキャッシュ設定を選ぶ方が安定します。
更新内容が反映されないときは、コンテンツキャッシュがどの範囲を保存しているのかを確認します。特にHTML、CSS、JavaScriptがキャッシュ対象に含まれているかどうかを見ると、原因を切り分けやすくなります。
コンテンツキャッシュとは別の場所でWordPressの処理を軽くする仕組みが、オブジェクトキャッシュです。
両者は役割が違うため、どちらか一方だけを選ぶ仕組みではなく、環境に応じて併用できます。
オブジェクトキャッシュ
コンテンツキャッシュは、生成されたページや静的ファイルを保存して再利用する仕組みです。
それに対して、オブジェクトキャッシュは、WordPressがページを作る途中で使用するデータを一時保存して再利用する仕組みです。
ページを作るためのデータを再利用する
WordPressが1つのページを表示するとき、裏側ではさまざまな情報を集めています。
- サイト名や説明文
- 記事タイトルや本文
- カテゴリーやタグ
- ウィジェットの表示内容
- テーマやカスタマイズの設定
これらの情報は、必要に応じてデータベースなどから取得されます。
同じ情報を何度も取得すると、その分だけ処理が増えます。そこで、一度取得したデータを一時保存し、同じページ生成の中で再利用するのがWordPressのオブジェクトキャッシュです。
生成されたページという完成品を保存するのがコンテンツキャッシュ。ページを作るためのデータを保存するのがオブジェクトキャッシュです。
標準と永続オブジェクトキャッシュの違い
WordPressには、標準でオブジェクトキャッシュが用意されています。
ただし、標準の状態では、保存したデータを利用できるのは基本的に1回のページ生成中だけです。ページの読み込みが終わると破棄され、次のアクセスまで保持されません。
プラグインやサーバー側の仕組みを追加すると、ページの読み込みが終わったあともデータを保持し、次のアクセスで再利用する「永続オブジェクトキャッシュ」を利用できます。
WordPress Developer Resources｜WP_Object_Cache
永続オブジェクトキャッシュは、コンテンツキャッシュの代わりにページ全体を表示するものではありません。ページ生成に使うデータの取得回数を減らし、WordPress内部の処理を軽くするための仕組みです。
そのため、CSSやJavaScriptファイルの古い内容が直接残る問題とは性質が違います。ただし、テーマ設定やプラグインが取得したデータが古い状態で残り、オブジェクトキャッシュの削除が必要になる場合はあります。
APCuはデータをメモリ上に保存する
永続オブジェクトキャッシュの保存先には、RedisやMemcachedなど、複数の仕組みがあります。APCuも、その選択肢のひとつです。
APCuを使う場合、オブジェクトキャッシュのデータはサーバーのメインメモリ上に保存されます。
HDDやSSDのようなストレージではなく、メモリ上で読み書きするため高速です。
一方で、サーバーの再起動やPHPの再起動などがあると、APCuに保存されていたキャッシュは消えます。これは異常ではなく、メモリ上へ一時保存する仕組みだからです。
- 保存場所：サーバーのメインメモリ
- 特徴：高速に読み書きできる
- 注意点：サーバーやPHPの再起動によって中身が消える
APCu Managerで永続オブジェクトキャッシュを利用する
APCu Managerは、APCuの状態確認や管理に加えて、WordPressへ永続オブジェクトキャッシュを追加できるプラグインです。
利用するには、サーバー側でAPCuが使える環境が必要です。プラグインを有効化しただけで、すべての環境で利用できるわけではありません。
ミコトホドでAPCu Managerを使ったときの挙動や、実際に運用してみた記録は別の記事にまとめています。
APCu Managerを使ってみた記録｜WordPressのオブジェクトキャッシュ運用メモ
まとめ｜キャッシュは種類を理解して使い分ける
キャッシュは、Webサイトの表示を軽くしたり、サーバーへの負担を減らしたりするために使われる仕組みです。
ただし、キャッシュはすべて同じではありません。ブラウザキャッシュ、コンテンツキャッシュ、オブジェクトキャッシュでは、保存される場所も、反映されないときに見るべき場所も変わります。
- ブラウザキャッシュ：閲覧者のブラウザに残る画像、CSS、JavaScriptなどのキャッシュ
- コンテンツキャッシュ：サーバー側で生成されたページや静的ファイルを保存して再利用するキャッシュ
- オブジェクトキャッシュ：WordPressがページを作る途中で使用するデータを再利用するキャッシュ
更新や修正が反映されないときは、まずどのキャッシュが古い情報を持っているのかを分けて考えます。
普段使っているブラウザだけ古い表示になるなら、ブラウザキャッシュを疑います。別ブラウザやシークレットモードでも古い表示のままなら、サーバー側のコンテンツキャッシュやテーマ・プラグイン側のキャッシュ設定を確認します。
オブジェクトキャッシュは、コンテンツキャッシュとは別の場所でWordPress内部の処理を軽くします。ページ全体を保存する代わりになるものではなく、必要に応じて併用する仕組みです。
ミコトホドでは、ConoHa WINGのコンテンツキャッシュを ON（HTML/CSS/JS以外静的コンテンツのみ） で使っています。HTML、CSS、JavaScriptの修正を反映しやすくしつつ、画像やフォントなどはキャッシュで軽くするためです。
キャッシュは、全部オンにすれば終わりではありません。更新頻度、CSSやJavaScriptの修正頻度、Webツールの有無、表示速度の優先度によって、合う設定は変わります。
表示を速くしたいのか、修正内容をすぐ確認したいのか。まずそこを分けて考えると、キャッシュ設定を見直しやすくなります。
コメント