kamenokoki.com

スタイルシートの変更時に「ブラウザキャッシュ」をなかったことにする方法

Posted:  Last Update:

「サイトの外観を変えるために、スタイルシートを一新。満を持して新しいサイトをリリースしたら表示が崩れてしまって大慌て!」それはブラウザのキャッシュが原因です。悪さをしている「ブラウザキャッシュ」を回避して新しいスタイルシートを強制的に適用させる方法をご紹介します!スタイルシートにバージョン情報を付け加えるだけの簡単な方法なので、ぜひご活用ください。

スタイルシートのアップデート時の大敵「ブラウザキャッシュ」

こんにちは。HTML、CSS、PHPだけでサイトを自作している亀の子です。サイトを自作していると、外観をきれいにするためにスタイルシートを変更する機会が訪れます。私も、特にサイト作成初期の段階では頻繁に変えていました。

スタイルシートを変更すると一つ困ることがあります。それが、「サイト訪問者のブラウザにスタイルシートがキャッシュとして保存されている」こと。

最初にブラウザのキャッシュとは何か、なぜキャッシュが保存されるのか、そしてどうして困ったことになるのかご説明しましょう。

ブラウザの「キャッシュ」とは

「キャッシュ」は英語の「cache」(貯蔵する、保存する)から来ている言葉です。ブラウザ(Google Chrome、Edge、Firefox、Safariなど)では、表示しているサイトの情報を保存しておく機能を「キャッシュ」と呼びます。キャッシュされる対象は、画像やスタイルシートの情報など、多岐に渡ります。

ブラウザの「キャッシュ」はなんのために存在するのか

初めてサイトを訪れる際には表示に時間がかかったのに、2回目に表示したらすぐに表示された、という経験はありませんか?これはブラウザにキャッシュが保存されているおかげです。たとえば大きな画像はダウンロードするのに時間がかかりますが、ブラウザに画像を保存しておけば一瞬で表示することができます。ブラウザでは、いろいろな情報を保存しておくことで、何度も訪れるサイトの表示速度をあげています。おかげで、我々は待つことなくWEBサイトを閲覧することができるのですね。

サイトリニューアル時にキャッシュがあると困る

表示作度をあげてくれるキャッシュ。そのキャッシュには、スタイルシートの情報も含まれます。サイト作成者の立場から見ると、これが困りものです。こちらはスタイルシートを変えているのに、ブラウザは「保存してあった情報があるもんね」と自分が記憶している古いスタイルシートを使ってしまいます。新しいスタイルシートは適用されず、時にはサイト全体の表示が崩れてしまう原因にもなります。

スタイルシート変更時に「ブラウザキャッシュ」をなかったことにする方法

ページの表示速度を上げるために役立ってくれている「キャッシュ」ですが、サイトのリニューアル時には厄介者になってしまいます。特にキャッシュのせいで表示が大幅に崩れてしまったりすると、「キャッシュなんてなければいいのに!」と思ってしまいます…。

しかし、表示速度を上げてくれるキャッシュを恨んでも仕方ありません。サイト作成者側でできる対応を淡々と行いましょう。

王道対応「ブラウザキャッシュをクリアしてください」

サイトリニューアルをしたページを訪れると「表示がおかしい場合にはブラウザキャッシュをクリアしてください」というお願いを見ることがあります。サイトを訪れるお客様側で、ブラウザのキャッシュを消してもらい、新たなスタイルシート等を読み込んでもらう処置です。

この対応の問題点は、お客様全員がキャッシュを消す方法を知っているわけではないと言うことです。さらには、「このサイト表示がおかしい」とサイトを見てくれなくなってしまう可能性もあります。私のような零細サイト運営者には大打撃です。

運営者側で「ブラウザキャッシュ」をなかったことにする方法

実は、サイト運営者側で、スタイルシートのキャッシュを強制的に回避する方法があります。それが「スタイルシートのバージョンを変える」という手法。バージョン番号を変えることによって、ブラウザが「前回のスタイルシートとは違うものが使われているから、新しいスタイルシートを読みに行かないと!」と考えてくれるようになります。

実際にバージョン情報を変える方法はとても単純で、スタイルシートのファイル名の後に「?ver=バージョン番号」と書くだけです。ヘッダタグ内のスタイルシートのリンクは下記のようになります。(スタイルシートのリンクは適宜変更してください)

<link rel="stylesheet" href="/stylesheet.css?ver=1.00">

再度スタイルシートを変更したときには、この番号を変えることでブラウザに新しいスタイルシートを読み込ませることができます。

<link rel="stylesheet" href="/stylesheet.css?ver=1.01">

これで、お客様に「ブラウザのキャッシュをクリアしてください」とお願いしなくても、自動的に新しいスタイルシートが適用されます。

ちなみに、私は日付で管理しています。日付なら番号付けに頭を悩ませなくてもいいと採用しました。ご自分の管理しやすいバージョン情報を工夫してみてください。

<link rel="stylesheet" href="/stylesheet.css?ver=20201105">

スタイルシートのバージョン情報を変えるタイミング

さて、スタイルシートのバージョン情報を変更することで、ブラウザのキャッシュを回避することができるようになりました。しかし、バージョン情報を頻繁に変えるデメリットもあります。バージョン情報を変えるタイミングはいつがいいのでしょうか。私の方針をご参考までにご紹介します。

スタイルシートのバージョン情報を変えなくてもいい時

たとえば、文字の太さや大きさを変えた、マージンを少しだけ広くした、など、細かいサイトの変更時にはバージョン情報を変える必要はないでしょう。ブラウザのキャッシュがあると、サイトの表示速度が速くなります。サイト内の細かなスタイル変更は、この表示速度を犠牲にしてまで適用させたいものではありません。

スタイルシートのバージョン情報を変えた方がいいとき

逆に、サイトの表示崩れを誘発するような変更をしたときにはバージョン情報の変更は必須だと思います。たとえば、サイトの構成を変えたり、ある項目の大きさを大幅に変えた場合です。特に画像の表示サイズを変えたりすると、画像に新たなスタイルシートが適用されず、画像が巨大になったりすることがあります。

スタイルシートを変更する際には、普段利用していないブラウザで変更前に一度ページを表示させ、変更後に再度表示して表示崩れが起きていないかを確認するといいかもしれません。表示崩れが発生したら、バージョン情報を変更するタイミングです。

まとめ

スタイルシートを変更した際にブラウザで表示崩れが起きてしまう時は、スタイルシートのバージョン情報を変更することで表示崩れを回避することができます。スタイルシートの末尾に少し文字をくわえるだけなのでとても簡単ですね。

この記事がサイトを自作している同志の方の一助になれば幸いです。

記事をシェアする

亀の子に連絡

ランキング参加中!ぽちっとしてね

F2cランキングアイコン 人気ブログランキング ブログランキング・にほんブログ村へ

RELATED

CSSの小技集 

広告