ホームページの更新情報が反映されない時の対処法

ホームページは更新作業をしてもすぐには反映されない場合があります。これはブラウザのキャッシュが保存されているからです。

CSSや画像・JSファイル名の後ろにクエリ値を入れれば、新しく自動で読込してくれます。しかし全部の新規読込は避けましょう。

F5を押す・スーパーリロードをする・キャッシュをクリアするなどすれば、新しい情報に更新されますが任意作業になります。

ホームページ修正時のクライアントとのやり取り

WEBサイトの制作やリニューアル・保守をしている人は以下の問題にぶち当たる事が多いと思います。

以下の様なやり取りをご経験したことありませんか？

クライアントとのWEB修正に関するやり取り

クライアントとのやり取りで上記のような状況に出くわす事ってよくありますよね。

私はもうしょっちゅうあります。

ユーザーがすぐに確認できないのはトラブルと同じ

JSファイルややCSSファイル、画像ファイルなどのデータを更新した際、確認しても反映がされていない事はよくあります。

これが自分とクライアント担当者だけでのやり取りであれば問題は無いのかも知れません。

しかし一般公開の情報（更新内容）が反映されない事態となれば、それはWEBサイトに障害が起きている事と同じになるのです。

WEBサイトのキャッシュに対してどう対処するか

クライアントからしてみれば、毎回このようにユーザーが更新ボタンを押す訳がないと思っています。

確かにそうだと思います。

普通にWEBページを開けて情報を確認するだけですよね。なのでそこに出ている情報が最新情報だと思ってしまうのは当たり前なのです。

WEBサイトにはキャッシュ機能（良い意味でも悪い意味でも）というものがあり、すぐに情報が更新されないケースがあります。

このキャッシュにどのように対処をしていくべきか、おさらいをしたいと思います。

WEBサイトが反映されないのはキャッシュが原因

みなさんがホームページを閲覧する場合には、必ず「ブラウザソフト」を使っています。

ブラウザソフトには一度見たWEBサイトの表示情報を一時的に記憶する機能があります。

この記憶された表示情報のことを「キャッシュ」と言います。

キャッシュ機能のメリット

ブラウザにこのキャッシュが保存されている事で、一度訪問した事があるWEBサイトであれば、以前より早く・効率的に表示できるようになります。

いつも見ているWEBサイトと違い、初めて見るホームページを表示する時って時間が掛かりますよね。

それはこのキャッシュ情報が無いWEBサイトであるためです。

キャッシュ機能のデメリット

便利なキャッシュ機能ですが、デメリットもあります。

キャッシュがあると、そのWEBページの構成部分である画像やCSSファイルJSファイルが更新されてても、それを毎回読み込まない様な仕組みになっています。

毎回読み込んでしまうと初めて表示させるのと同じくらい表示に時間が掛かってしまうからですね。

これが原因で画像を差替えてもクライアント側にその反映が確認ができない、などの状況になるのです。

更新が反映されない現象が起きるリソースや端末

CSSやJSファイル・画像ファイルの部分に多い

このようにホームページが反映されない場合、そのリソース先は限定されています。

WEBサイトが更新されないというトラブルはほとんどの場合、画像ファイルかJSファイル・スタイルシート（CSSファイル）などです。

ここにテキスト部分は含まれていません。

テキストは更新すれば反映される

テキスト文字の変更部分の反映については、一度ブラウザを閉じているのであれば大体次に表示すれば反映されています（スマホでも）。

サイトを表示したままであったり「元に戻る」で該当ページに戻った場合は、当然「F5」を押す必要がありますよね。

このように文章・文字であれば、F5を押せば大体反映されます。スーパーリロードやキャッシュクリアの必要まではありません。

特にスマホページでは更新が反映されない

今はPCからよりもスマホ端末からよくWEBページを閲覧される時代ですよね。

スマホはよりキャッシュ機能が高く、PC以上になかなか情報が更新されない事があります。

それはレスポンシブルデザインによるPCスマホ一体型レイアウトであっても同様です。

同じデータなのに「PCでは反映されているがスマホでは反映されていない」という状態が起こります。

だからといって、ユーザーにキャッシュクリアをさせる訳にはいきませんよね。

自動反映の方法があります。

では手動でリロードしたりキャッシュをクリアしたりする必要なく、更新対象のリソースを自動反映させる方法は無いのでしょうか。

いや、あります。そのために本記事で紹介しているのです。以下からご紹介しましょう。

CSSが反映されない場合

例えばクライアント様からCSSファイルの修正が必要な修正の依頼を頂いた場合

というケースに出くわします。

これが先述したスーパーリロードやキャッシュクリアが必要となる理由の一端ですね。

要はこのスーパーリロードやキャッシュクリアをしなくても自動でCSSファイルが更新されて欲しい訳です。

CSSのキャッシュを自動で読み直す方法

方法としてはCSSファイル名の「後ろ」に続けてクエリ文字を追記する方法が一般的だと思います。

例えばこんな感じです。

クエリ文字を追記した例

<link rel="stylesheet" href="css/style.css?ver=1.0.1"> <link type="text/css" rel="stylesheet" href="css/style.css?201610261200">

WEBサイトcssファイルを更新した際に、そのページのCSSファイル記述部分に「?ver=1.0.1」のような情報を追記します。

そうするとそのページはキャッシュの影響を受けずに読込する事ができるのです。

この時「style.css」と「style.css?ver=1.0.1」は別物として扱われます。

さらに再度更新した場合はstyle.css?ver=1.0.2のように数字を増やしていくだけなので、管理がしやすくなります。

クエリ文字を加える時の注意

ただしこの方法の場合、複数のWEBページに渡る更新をする際には各ページのCSSにクエリ文字を付与しなければなりません。

Wordpressならfunction.phpにあるCSSの記述部分を変更するだけで済みますね。

ただ、それ以外のサイト（HTMLサイト）の場合は全ページが一括で変更できるようになっていないと手間が掛かります。

そしてスタイルシートを更新する度に毎回このパラメータ数値を変更しなければならないので、作業効率は決して良くはありません。

HTMLソース内に直接スタイルを記述する

もう一つはCSSファイルに修正コードを書くのではなく、HTMLソース内に直接CSSのスタイルを表記する方法です。

headタグ内に直接styleのプロパティを書く事になります。

こうすればCSSファイルを新たに読みにいかないので、WEBページのロード時にCSSスタイルが必ず反映されます。

スポットでの改変の際は大変便利です。

WEBサイトの制作やリニューアル時も基本は同じ感じで、一通りの修正が終わるまで直接headタグ内に記述して良いと思います。

最後に一式まとめてCSSファイルに書き直してしまえば良いのですね。

Wordpressの場合は「追加CSS」

Wordpressでは「追加CSS」に記述する事で同じ効果を得る事ができます。

Wordpressならば「外観」→「カスタマイズ」→「追加CSS」 の欄ですね。

この後に出る「追加CSS」のメニューをクリックしましょう。

更新したデザインをリアルタイムで確認できますし、記述したスタイルがhead内の<style>タグ内に直接記述されています。

簡単なカスタマイズであれば、このように追加CSSに記述したままで大丈夫です。

画像が反映されない場合

画像の差し替え時もCSSの時と同様に、差し替えをしている（同じ名前の画像ファイルを上書き）のにもかかわらず、反映がされないというケースがよくあります。

画像ファイルはキャッシュの影響を受けやすいのですね。

一から読み込むと時間が掛かる一番負担の多いリソースが「画像データ」だからです。

この画像もCSS同様にすぐに新しい画像に差し替える事ができます。

htmlの場合

<img src="/images/sample.jpg?set0001" alt="Sample">

このように画像名の後ろにパラメータ値（クエリ文字）を入れる事で、新しい画像として読み込まれます。

ただし頻繁に更新する画像であれば、その都度imgタグのクエリ値の変更が必要です。

毎回画像のHTMLを変更するのが面倒だと感じる方は、PHPで以下のように制御することで自動で日付を追加してくれるようにもできます。

Wordpressの場合

WordpressならばPHPが効くので、下記の様にimgタグを記述する事ができます。

<img src="/images/sample.jpg?<?php echo date("YmdHis");?>" alt="Sample"> ※日付の表示はそのまま数値でいいです。

上記はパラメータの部分に時刻を自動表示させるコードを埋め込んでいる例ですね。

自動で時刻を埋め込んでおくと、imgタグが読み込まれるたびに「この画像は新しいものである」と認識させることができます。

良く更新がされる画像に対してこの様に設定をしておけば、キャッシュを利用せず新規で画像が読み込まれるようになります。

PHPを使ったCSS・JS・画像ファイルの自動読込

上記で少しPHPの関数に触れたので、ここからはさらに応用編をご紹介します。

これまでは各要素のキャッシュを無視して毎回リソースを読込させる事を前提にお話を進めてきました。

しかしこれではキャッシュをしている意味がないですよね。

そこで以下の方法をご紹介します。

filemtime()関数を利用する

filemtime()は、指定されたファイルの更新時刻を取得するPHP関数です。

これを使って静的リソースファイルのパスにパラメータを付与しておけば、ファイルが更新されない限りパラメータ部分が変わりません。

変わらない間はキャッシュされたリソースをそのまま読込できるという訳です。

実際には、PHPでレンダリングするテンプレート等で下記のようにコーディングしましょう。

PHPのfunctionコード

function opt_uri( $resource_absolute_path=null ) { $docroot = $_SERVER['DOCUMENT_ROOT']; if ( ! empty( $resource_absolute_path ) && file_exists( $docroot . $resource_absolute_path ) ) { $resource_absolute_path .= '?' . filemtime( $docroot . $resource_absolute_path ); } return $resource_absolute_path; }

指定されたリソースファイルがあれば、ファイル更新日時のタイムスタンプをパラメータに付与する命令です。

もし指定されたリソースファイルがなければ、タイムスタンプを入れずに指定ファイルパスをそのまま返します。

CSSコード記述ソース

<link href="<opt_uri( '/css/style.css' ) ?>" rel="stylesheet" type="text/css">

例

<link href="/css/style.css?1781036548" rel="stylesheet" type="text/css">

JSコード記述ソース

<script src="<?= opt_uri( '/js/script.js' ) ?>"></script>

例

<script src="/js/script.js?1781036548"></script>

画像タグ記述ソース

<img src="<?= opt_uri( '/img/sample_img.jpg' ) ?>" alt="Sample">

例

<img src="/img/sample_img.jpg?1781036548" alt="Sample">

一般的な方法：最新情報に更新してもらう

ここまでキャッシュと仲良く付き合いつつ、更新データのみを新規に読み込ませる方法をご紹介しました。

仮にWEBサイトがまだリニューアルの最中であるならば一般ユーザーの事は気にしないで良いので、わざわざ上記の手段を取る必要はありません。

以下からの操作は自分のための確認に使ったり、クライアントへお願いする場合の任意操作です。

F5で最新情報にしてもらう

一番簡単な方法としては、ブラウザの更新ボタンやキーボードのF5を押してもらう方法です。

これにより大体の場合は新しい最新情報に切り替わります。

ブラウザが新しいWEBページの情報を読み取ろうとするためです。

通常クライアントとのやり取りでもおおよその場合はこれで解決します。

F5を押しても解決しない場合がある

しかしF5を押しても情報が反映されない場合も多々あります。

キャッシュ情報が残ったままになっていて、反映の邪魔をする場合があるのですね。

このキャッシュ情報の度合いというのは各端末ごとに違います。残っているパソコンもあれば残っていないパソコンもあるのです。

PC以外の端末も同様

これはタブレットやスマホでも同様の現象が起きやすいです。

となるとF5を押すだけで解決するクライアントと、解決しないクライアントが出てくる可能性があります。

こうなると厄介ですよね。

強制再読み込み（スーパーリロード）

ここではF5からもう一歩進んだ更新反映の方法をご紹介します。

ページをスーパーリロードしてみる方法

スーパーリロードとは、強制的にWEBページ情報を読込させる「強制再読み込み」の方法です。

「キャッシュ」の程度によっては、こちらをしないと反映されない事があります。

キーボードのショートカットで行える簡単な方法なので、F5でも変化がない場合はこちらを試してみましょう。

スーパーリロードはキャッシュ自体をクリアするものではありません。

ですので各ページごとに修正箇所がある場合は各々のページでこのスーパーリロードをしてもらう必要があります。

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

WindowsとMACとで、さらに各ブラウザごとのスーパーリロード操作の方法をまとめておりますので下記をご覧ください。

Windowsをお使いの場合

ブラウザ	ショートカットキー
Google Chrome	キーボードの「Shift」+「F5」
Microsoft Edge	キーボードの「Ctrl」+「F5」
Firefox	キーボードの「Ctrl」+「F5」
Safari	キーボードの「Ctrl」+「R」

Macをお使いの場合

ブラウザ	ショートカットキー
Google Chrome	キーボードの「⌘Comand」+「shift」+「R」
Firefox	キーボードの「⌘Comand」+「shift」+「R」
Safari	キーボードの「⌘Comand」+「R」

ブラウザのキャッシュをクリアする方法

実は困った事に、状況によってはこのスーパーリロードでも解決しない場合があります。

ここまでくるとクライアントから担当者への不信感が多少なりとも出てくる事を否定できません。

更新情報が確認できない訳ですからね。

「ホントはやっていないんじゃないの…？」と思われても仕方ありません。

最終手段としては、ブラウザに残っているキャッシュ情報自体をクリアする必要があります。

各ブラウザのキャッシュをクリアする方法をご紹介しましょう。

ブラウザキャッシュをクリアする方法

Google Chrome

ブラウザの右上にある「︙」マークをクリックします。

表示されたメニューから「設定」をクリックします。

設定画面の左欄メニューにある「プライバシーとセキュリティ」をクリックします。

一番上にある「閲覧履歴データの消去」をクリックします。

「キャッシュされた画像とファイル」にチェックを入れ、「データを削除する」をクリックします。

Microsoft Edge

ブラウザの右上にある「…」をクリックして、表示されたメニューから「設定」をクリックします。

左端に縦に並んだ欄から「プライバシーとセキュリティ」の項目アイコンをクリックし、「クリアするデータの選択」をクリックします。

「キャッシュされたデータとファイル」にチェックを入れて、「クリア」をクリックします

Firefox

ブラウザの右上にある「≡」マークをクリックし、表示されたメニューから「オプション」をクリックします。

開いたページの左欄から「プライバシーとセキュリティ」をクリックして、下に下がって「Cookieとサイトデータ」の欄にある「データの削除」をクリックします。

データ消去の小窓が出るので、必要項目にチェックを入れ、「消去」をクリックします。

Safari

ブラウザ右上の歯車マークをクリックし、「設定」をクリックします

開いた小窓から「プライバシー」タブをクリックすると、すぐ下に「すべてのWebサイトデータを削除」のボタンがあります。

今すぐ全てのWebサイトデータ削除してよろしいですか？とガイダンスが出るので「今すぐ削除」をクリックすると削除されます。

上の画像にある「詳細」をクリックすると、キャッシュを削除するサイトを選ぶ事ができるのでこちらで対象サイトを選んだ方が良いでしょう。

キャッシュクリアはユーザー側の任意作業

しかしこれはあくまでクライアント様とのやり取りにおける応急措置的な扱いです。

当然この作業を毎回ユーザーにお願いする訳にはいきませんよね。

なので自分やクライアントだけが確認する場合に使う方法と言えるでしょう。

faviconファビコン画像が変わらない場合

最後にfaviconマーク画像について述べておきましょう。これは私自身印象に残っている経験があります。

一度掲載したfaviconマークを後から別のものに使用として、WEBサイトのfaviconマークを別のものに変えました。

変えた時点で程なくして、アドレス欄にあるfaviconマークなどは変更されたのですが…。

faviconの画像マークが変わらない箇所がある

ところがいつまで経っても変更がされない箇所がありました。

スマホでの検索サイトでの検索結果に表示されるマークです。

何度画像を差替えてもこの部分だけが一向に変化しないのですね。

リロードしようがキャッシュをクリアしようが画像が反映されない事態に陥りました。

対応策

faviconマークは全ページ共通でheadタグに記述があります。

このfaviconマークのURLを違うURLに一括変更しました。

画像は同じですが画像名を変えて保存しておき、読込タグも変更した画像名にするのです。

変更前

<link rel="icon" href="images/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" type="image/x-icon" href="images/favicon.png">

変更後

<link rel="icon" href="images/favicon2.ico" type="image/x-icon"> <link rel="shortcut icon" type="image/x-icon" href="images/favicon2.png">

これでfaviconマークがきちんと反映されるようになりました。

まとめ

これで画像キャッシュやCSSキャッシュの問題については一通り解決されるのではないかと思います。

クライアントからの不信感も払しょくできますし、確認の際の余計なやり取りを減らす事ができると思います。

念のためにですが、「作業自体をしていなかった」或いは「UPしていたつもりがしてなかった」というのは本記事の論外ですので、きちんと確認をして下さいね。

せっかくのキャッシュ機能を無視しない様に

改めて総合的な注意点としては、全てのリソースに対して毎回新規に読み込むのはオススメしません。

PHPを使った更新日時を埋め込む方法以外は全て、ブラウザキャッシュを利用せずに毎回読み込みを発生させる事を意味しています。

その結果、WEBサイトの表示速度の遅延に繋がるのは間違いありません。

表示速度の低下は様々な弊害をもたらす

そうなるとユーザーのUX（ユーザーエクスペリエンス）を阻害するだけでなく、検索サイトに対する評価も落ちてしまいます。

評価が落ちるという事は検索順位も落ちる可能性がある事を示しています。

SEO的にはWEBサイトの表示速度が高いほど評価が高いとされていますので、キャッシュを無視するやり方は本来よくないのですね。

ですので更新のタイミングや利用用途をしっかりと限定するなど、クライアント様とのお打合せが必要になると思います。

一押し人気コーナー紹介