直したのに直っていない？ ブラウザが古いものを覚えている話
本記事にはプロモーション（広告）を含みます。
こんなことで困っていませんか？
- サイトを直したのに、見た目が変わらない
- 自分のスマホだけ表示が崩れている
- 本当に直っているのか分からない
何が起きたか
このサイトの見た目を、丸ごと作り直しました。色も、並び方も、全部です。
公開して、AIに「ちゃんと出ているか」を確かめてもらったら、こう返ってきました。
「前に開いたことのある端末だと、表示が崩れます」
実際、画面はひどいことになっていました。 ページの中身は新しいのに、色や並び方だけが古いままで、ロボットの絵が画面いっぱいに広がっていました。
初めて開く端末では、きれいに出ます。前に来たことのある端末だけが崩れる。 ここが厄介でした。
なぜ崩れたか
ホームページは、「中身」と「見た目の指示」が別のファイルになっています。
見た目の指示は、どのページでも同じものを使います。 だからブラウザは、一度読んだら、しばらく覚えておいて、次からは読みに行きません。 そのほうが速いからです。
私のサーバーは、「7日間は覚えておいていい」と伝える設定になっていました。
つまりこうです。
| 中身 | 見た目の指示 | |
|---|---|---|
| 初めて開く端末 | 新しい | 新しい |
| 前に開いた端末 | 新しい | 7日前に覚えた古いもの |
新しい中身に、古い見た目の指示。これで崩れます。
自分の端末で見て「大丈夫」は、あてになりません
自分の端末は、自分が一番よく開いています。つまり、一番古いものを覚えている端末です。
逆に、自分の端末で崩れて見えて、実は他の人には普通に出ていることもあります。
どう直したか
覚えさせないようにすると、毎回読みに行くので遅くなります。それは避けたい。
やったのは、ファイルの中身が変わったときだけ、ファイルの住所を変えることです。
ブラウザは「住所が同じなら覚えているものを使う」ので、住所が変われば新しく読みに行きます。 中身が変わっていなければ住所も変わらないので、速いままです。
これは AI が仕組みとして入れてくれました。私が毎回手でやることはありません。
翌日に、トップの大きな画像も差し替えました。画像も同じことが起きるので、先回りして同じ対策をしてあります。
自分でできる確かめ方
仕組みを直す前でも、「本当に直っているか」は自分で確かめられます。
① 再読み込みをする
崩れて見えたら、まずページを読み込み直してください。 たいていは、これで新しいものを読みに行きます。
② 開いたことのない端末で見る
家族のスマホでも、会社のパソコンでもかまいません。 初めて開く端末で普通に出るなら、直っています。 崩れているのは自分の端末の記憶です。
③ 「シークレット」で開く
ブラウザには、何も覚えていない状態で開く機能があります。 Chrome なら「シークレット ウィンドウ」。これで開くと、初めての端末と同じ状態で見られます。
「直したのに直っていない」と言う前に
ここは逆の間違いも起きやすいところです。自分の端末で崩れているのを見て、 「まだ直っていない」と AI に直させ続けてしまう、という間違いです。
直っていないのではなく、自分の端末が古いものを見ているだけ、ということがあります。 まず①〜③で確かめてから、直させてください。
同じことが、他の場面でも起きます
これは見た目を変えたときだけの話ではありません。
- 画像を差し替えたのに、前の画像が出る
- 文字を直したのに、直っていないように見える
ホームページを触っていると、必ずどこかで出会います。 そのとき「壊れた」と慌てる前に、自分の端末が古いものを覚えているだけかも、と一度疑ってください。
「設定したつもりが効いていなかった」という、これとは逆の失敗も書きました。 「見えているもの」と「実際に起きていること」がずれる、という点では同じです。
まとめ
- 見た目を変えて公開したら、前に開いた端末だけ崩れた
- 原因は、ブラウザが見た目の指示を7日間覚えていたこと
- 直し方は、中身が変わったときだけファイルの住所を変える（AIが仕組みで入れた）
- 自分で確かめるなら、再読み込み・別の端末・シークレットの3つ
- 自分の端末は、一番古いものを覚えている端末。 「直っていない」と言う前に疑う
公開したあとに自分で確認する話は、こちらにも書きました。