Web制作

「直したはずなのに画面が変わらない」キャッシュの仕組み

「直したはずなのに画面が変わらない」キャッシュの仕組み

「ここ、文字を直してください」「直しました」「私の画面では、前のままです」。Web制作のやり取りで、この往復は何度も起きます。直した側は保存したつもりで、見ている側は古い画面のままです。経営層からすると、作業が終わっていないように見えます。制作者からすると、同じURLを開いているのに話がかみ合いません。

原因の多くは、誰かのミスではありません。ページを速く出すために、前に見た画面のコピーを残しておく仕組みです。業界ではキャッシュと呼びます。この記事では、そのコピーを「お留守番データ」と呼びながら、どこに残るのか、ConoHa WINGのようにサーバー側が強く残す環境で何をすればよいかを、発注者にも分かる順番で整理します。

「あれ、直ってない?」このすれ違いの正体

現場で繰り返すのは、次のような場面です。制作者は管理画面で文章を直し、公開を押します。自分の画面では新しい文が出ています。クライアントは、いつものスマホで同じアドレスを開きます。そこには、今朝まで載っていた文が残っています。スクリーンショットがチャットに戻り、「まだです」と書かれます。制作者はもう一度保存し、クライアントは再読み込みします。それでも変わらないと、「本当に直したのか」という空気になります。

この空気は、無理のない反応です。紙のチラシなら、刷り直した現物を見れば終わりです。ホームページは、見ている端末ごとに、少し前のコピーを持っていることがあります。同じ住所の店でも、手元の写真と、店先の看板が違う、という状態に近いです。サボっているのでも、画面が壊れているのでもありません。疑う場所は別にあります。

コピーが残る理由は、毎回、お店の倉庫(サーバー)まで取りに行くと表示が遅くなるからです。一度見たページ、画像、デザインのファイルを、途中で預かっておくと、次は預かりの方を出せます。普段はこのおせっかいが、待ち時間を短くします。直した直後だけは、預かりが古いままなので、「変わっていない」に見えます。

見ている場所が違う、というズレもあります。WordPressの管理画面は、ConoHa WINGの公式ガイドでも、コンテンツキャッシュの対象外と書かれています。管理画面では新しい文なのに、公開ページでは古い文、ということが起きます。ログインした制作者の画面と、ログインしていないお客さまの画面が違うことも、同じ種類のズレです。

悪い伝え方:直したので、そちらも新しいはずです。キャッシュのせいです。

改善した伝え方:保存は終わっています。公開ページには、前の画面のコピーが残っていることがあります。スマホの再読み込みと、サーバー側のコピー削除のどちらを見るか、いま切り分けます。

「キャッシュのせいです」だけで終わると、発注者は確認のしようがありません。どのコピーを疑っているかを一言添えると、同じやり取りが短くなります。

ディレクターが間に入るときも、同じです。専門用語を増やさず、「保存は済んでいる。見えているのが前のコピーかもしれない。端末と、サーバーの管理画面の、どちらを見るか」と翻訳できれば、経営層のモヤモヤは減ります。逆に、原因が分かる前に「バグです」と返すと、次の修正まで不信が残ります。変わらない画面は、まず預かりを疑い、預かりを消しても同じなら、直したファイル側を疑う。この順番を、チャットの最初の返信に書いておくだけで、往復は一段減ります。

お留守番データは、速さのための預かりです

キャッシュを、機能の名前のまま覚える必要はありません。やっていることは、さっき見たホームページのコピーを、次に備えて置いておくことです。この記事では、そのコピーを「お留守番データ」と呼びます。本体は倉庫にあり、お留守番が応対している、というイメージです。

お店で言うと、常連客が昨日のメニューを覚えている状態に近いです。店主が今日、値段を書き換えても、常連は頭の中の表で「変わっていない」と言います。店主がサボったのではなく、覚えている側がまだ昨日の表です。ホームページでも、直したファイルと、見ている画面のあいだに、この覚えが入ります。

預ける場所は、見る人のスマホやパソコンだけではありません。倉庫の手前、つまりサーバーの中でも預かります。WordPressの中の高速化の仕組みが、記事やデザインのコピーを別に持つこともあります。どの預かりも、目的は同じで、毎回ゼロから組み立てないことです。

厄介になるのは、親切のタイミングです。ページを何度も見る人には、預かりがある方が速く開きます。文章を直した直後の確認では、その速さが邪魔をします。お留守番は「新しい指示が来た」とは知らず、預かっている画面を出し続けます。悪意ではありません。捨てるタイミングが、更新のタイミングと揃っていないだけです。

捨て方は、預かり場所ごとに違います。スマホの中なら、その端末の再読み込みで足りることがあります。倉庫の手前の預かりは、倉庫の管理画面から捨てる操作が要ることがあります。全部を一度に捨てなくても、どこを疑うかの順番が分かれば、確認は前に進みます。

もう一つ、コピーを消しても変わらない場合もあります。保存ボタンを押していない、別のページを直している、同じ文章が別の部品に残っている、といったケースです。お留守番データを疑うのは最初の切り分けで、そこを消しても同じなら、直した場所そのものを見直します。キャッシュの話と、編集ミスの話は、混ぜない方が早いです。

預かりを全部やめる、という解決は、普段の表示を遅くします。確認のたびに機能をOFFにして、終わったら戻し忘れると、次のアクセス集中のときに効かなくなります。必要なのは停止ではなく、直した直後に、そのページのコピーだけを捨てる手順です。速さのための機能と、更新を見せる手順は、両方残しておく方が運用は安定します。確認が終わったあとも、預かりの機能はONのままにしておきます。

コピーは、手元・中・倉庫の手前に残ります

お留守番データは、一箇所だけではありません。見る人に近い側から、三つの段で考えると整理しやすいです。

一つ目は、手元の端末です。ChromeやSafariが、前に開いたページや画像を覚えています。たとえれば、自分のアルバムに残った写真です。制作者のパソコンでは新しく、クライアントのスマホでは古い、というすれ違いは、ここで起きます。試し方は、その端末だけで強制的に読み直すことです。Windowsなら Ctrl と Shift を押しながら R、Macなら Shift と Command を押しながら R、という操作がよく使われます。スマホでは、タブを閉じても残ることがあるので、別のブラウザで同じURLを開くと比較しやすいです。シークレットウィンドウは、アルバムをいったん脇に置く確認として使えます。

二つ目は、WordPressなどの内側です。表示を速くするプラグインや、テーマ自身が、記事やデザインのコピーを持つことがあります。管理画面に「キャッシュの削除」というボタンがあるなら、それがこの段です。記事を直しただけでは、この内側のコピーが先に出ることがあります。プラグインの名前はサイトごとに違うので、管理画面のメニューを見るのが確実です。入っていないサイトもあります。無いものを探して時間を使うより、「ボタンがあるか」だけ先に見る方がよいです。

三つ目は、倉庫の手前、つまりサーバー側です。ConoHa WINGの公式ガイドでは、これをコンテンツキャッシュと呼び、ページを一時保存して表示を速くすると説明しています。初期設定は「ON(すべてのコンテンツ)」で、動的なページも保存される、と注意が書いてあります。WordPressの管理画面(wp-admin)は、設定がONでも対象外です。だから、直した本人は管理画面で新しい文を見て、公開URLだけが古いまま、という差が生まれます。

この三段は、上流から全部捨てなくても、症状で狭められます。制作者の画面だけ新しいなら、先にクライアントの端末を疑います。どちらも管理画面は新しく、公開URLだけ古いなら、内側のプラグインと、サーバー側の預かりを疑います。CDNという、さらに手前の配送拠点を使っているサイトは、そこにもコピーが残ることがあります。使っていなければ、この段は飛ばして構いません。

画像だけ古い、文字は新しい、という分かれ方もヒントになります。画像やCSSは手元の端末が覚えやすく、文章はサーバー側のページのコピーに残りやすいです。全部が古いのか、一部だけ古いのかを伝えると、制作者は押すボタンを選びやすくなります。

ConoHa WINGで、手で捨てる操作が要ることがある理由

「新しいサーバーほど、放っておいても反映されない」とまとめるのは、少し違います。サーバーごとに、預ける対象と、捨てるまでの時間が違います。

エックスサーバーの公式マニュアルでは、サーバーキャッシュをONにすると、CSSや画像などの静的ファイルは2分、それ以外のファイルは1分、コピーが残ると書かれています。同じ画面に、キャッシュを削除するボタンもあります。待つだけで入れ替わることが多い一方で、すぐ確認したいときは手で消す、という案内です。昔のサーバーは単純で、新しいサーバーだけが厄介、という分け方は、このマニュアルとは合いません。

ConoHa WINGの公式ガイドは、保存時間の長さを同じようには書いていません。代わりに、三つの事実が案内されています。初期設定でコンテンツキャッシュがONであることです。動的なページもキャッシュされる、という注意があることです。管理画面の「キャッシュクリア」で、保存したデータを破棄できることです。記事を投稿したときに、このサーバー側のコピーを自動で消すプラグインも、WordPressのインストール時に選べます。公式の説明では、その自動削除は「記事を投稿した際」です。固定ページの一部、デザインのファイル、テーマの変更まで、同じタイミングで消えるとは書かれていません。

だから、ConoHa WINGで手の操作が要りやすいのは、「永遠に居座るから」と決めてかかるよりも、公開ページのコピーが標準で有効で、記事の投稿以外の修正では自動では捨てられないことがある、と理解する方が近いです。制作者がファイルを更新しても、倉庫の手前のお留守番が、前のページを出し続ける時間帯が残ります。その時間を短くする操作が、コントロールパネルの「サイト管理」「高速化」「キャッシュ」にあるクリアです。WordPress管理画面のConoHa WINGメニューからも、同じクリアが案内されています。

クリアは、記事そのものを消す操作ではありません。預かっている表示用のコピーを捨てて、次のアクセスで倉庫の中身を出し直す操作です。会員ページやカートのように、人によって中身が変わる画面では、預かりとの相性を別に見る必要があります。公式も、動的なページがキャッシュされる点に注意を書いています。

確認の順番は、一度に全部を触らないことです。端末の再読み込み、WordPress側の削除ボタン、サーバーのクリア。一つずつ行い、公開URLを見ます。三つ同時に捨てると、どれで直ったかが残りません。次回の同じすれ違いで、また最初からになります。

すれ違いを短くする、共通の言葉

画面が変わらないとき、最初に置く言葉は「まだ直していない」ではありません。「お留守番のデータが残っているかもしれない」です。制作者は保存済みか、公開URLか、どの段を消したかを伝えます。発注者は、自分のスマホだけで見ているのか、別の端末でも同じかを伝えます。この二つが揃うと、不信感の往復は確認作業に変わります。

覚えておく段は、三つで足ります。手元の端末、WordPressの内側、サーバーの手前。ConoHa WINGでは、サーバーの手前が初期設定で有効で、記事投稿時の自動削除だけでは足りない修正があります。エックスサーバーでは、公式が1分または2分という保存時間を書いていて、それでも削除ボタンはあります。契約しているサーバーのマニュアルを、一度ブックマークしておくと、当日に探し回らなくて済みます。

ホームページは、公開した日に完成して終わりではありません。表示を速くする仕組みと、直した内容を届ける仕組みは、同じ場所に同居しています。速いことと、すぐ反映されることは、たまに両立しません。そのときは、コピーを捨てる手順が、運用の一部です。

発注のときに一言足すなら、「公開後、画面が古いままに見えるときの確認手順を、納品物に含めてください」です。端末の再読み込み、WordPressに削除ボタンがあるか、サーバーの管理画面のどこを押すか。この三行があるだけで、修正のたびに「サボっているのでは」という疑問が、確認のチェックに変わります。制作者側は、直したURLと、消した段の名前を返信に書く。発注者側は、見た端末を書く。共通の言葉は、それだけで回り始めます。次回同じことが起きても、最初から説明し直す必要は減ります。残っているのが手元の写真なのか、倉庫の手前の預かりなのかを、その場で切り分けられるようになるからです。直したのに見えない、は不具合の名前ではなく、速さのために残したコピーの名前です。先にそれを疑えると、制作も発注も、同じ画面を見るところからやり直せます。

自社のサイトで、どのサーバーの、どのクリアを押せばよいかを一緒に確認したい場合は、お問い合わせからご相談ください。

参考情報