とあるweb屋の仕事術

とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

修正が反映されない!?webサイトの修正、更新でハマりがちな「キャッシュ」

修正が反映されない!?webサイトの修正、更新でハマりがちな「キャッシュ」

HTMLやJavaScript、CSSを確かに

修正・更新したはずなのに、

webサイトに内容が反映されない。

 

そんな現象にでくわしたらキャッシュを

疑いましょう。

キャッシュを知らない新人webデザイナーがハマっている

ケースを何度か見てきました。

 

新人でなくても、webサイトの修正をする際に

ついうっかりキャッシュクリアの対策をするの忘れて、

クライアントに連絡したら

「修正が確認できません」

「修正されてません」

なんてことは、あるあるだったりします。

 

webサイトにすぐに修正した内容は

反映されない現象はキャッシュが原因なことがほとんどです。

 

キャッシュとは

キャッシュとはWebサイト閲覧時に、ページをすばやく読み込むために、表示したウェブページのデータをブラウザが一時的に保持しておく仕組みです。

キャッシュにはブラウザキャッシュとサーバキャッシュがあります。

 

このキャッシュのおかげで2度目以降のアクセスの際に、

表示が速くなっているというわけです。

 

修正した内容が反映されないのは、

このキャッシュ、

つまりブラウザが一時的に保持している

古い情報を参照しているからです。

キャッシュをクリアすると、最新の情報が反映されます。

 

修正が反映されていない、と指摘される前に、

webサイトを運営しているクライアントには、

キャッシュの説明はしておくようにしましょう。

 

キャッシュクリアの方法

 ブラウザのキャッシュクリアは、

  • 何度かリロード
  • ブラウザの再起動
  • スーパーリロード
  • ブラウザの設定からキャッシュを削除

という方法があるのですが、

クライアントや確認する相手に

毎回ブラウザのキャッシュクリアをしてください、

というのは無理がありますよね。

 

 クライアントに説明をすれば

ブラウザのキャッシュクリアをして確認を

してくれるかもしれませんが、そもそも

ユーザはやってくれないので、

webサイトに更新があった場合、webサイト側で

キャッシュしないように対策する必要があります。

 

確実に修正したファイルを反映する方法

webサイトの修正・更新で「修正が反映されない」

という現象はおもに、以下の3つのファイルでおきやすい。

 

  • CSS
  • JavaScript
  • 画像

 

なぜこの3つが反映されないかというと、

webサイトの運営では、これらのファイルは

同名ファイルで上書きされることが多いからです。

 

webサイトの更新時、

既存のCSSや画像ファイル名は変えずに、

アップしなおすことがほとんどだと思います。

 

そういう場合にキャッシュ(古い情報のまま)が

表示されることが多いので、同名ファイルの

上書き・更新の際には、キャッシュ対策が必要です。

以下の方法でキャッシュされないようにすることができます。

 

<link rel="stylesheet" href="style.css?20190406">
<script src="hoge.js?20190406"></script>
<img src="hoge.png?20190406" alt="">
 

ファイル名の末尾に「?」でパラメータをつけます。

?のうしろはなんでもよいです。

「?日付」で「?2019-04-06」にしたり

「?ver=20190406」

「?ver=20190406_2」

など。

 

このパラメータをつけることで

ブラウザが別のファイルと認識してくれるので、

キャッシュされずにCSSなどのファイルを読み込んで

くれます。

 

同名ファイルを更新した際に

相手に確実に修正した内容を確認させる場合は、

上記のパラメータを付ける方法を実践しましょう。

 

PHPを使用して、アクセスするたびにパラメータを

変更してキャッシュさせないようにする方法もあります。

www.webdlab.com

 

これはこれでありですが、二度目以降の表示を速くする

というキャッシュ本来の有用性が完全になくなってしまうので、

使いどころは注意が必要です。

アクセスするたび毎回ファイルを読み込むのはユーザにとっても

よろしくありません。

 

開発者、更新作業者であればブラウザのスーパーリロードが

お手軽にキャッシュクリアできる方法なので、

作業時にはスーパーリロードがおすすめです。

 

ブラウザごとのスーパーリロードの方法は

下記のサイトが参考になります。

ブラウザをスーパーリロード、

すべてのデータを強制的に再読込みすることで

キャッシュを削除(キャッシュクリア)します。

liginc.co.jp

 

 そのほかキャッシュについての参考サイト

digitalidentity.co.jp

aimstogeek.hatenablog.com

https://academy.gmocloud.com/know/20160125/1584