Firefoxへ切り替える20180116

このページの内容

従来、インターネットの閲覧やHP開発時のブラウザーは「Edge」だったが、表示スピードの点で「Chrome」へ変えてきた。

このCrhomeが最近CSSの変更等が反映されない問題が出てきたため、今度はFirefoxへ変えつつある。

未だChromeやFirefoxは十分使いこなしていない面がある為、「遅い・CSSが反映されない」問題を調査した時の「めも」です。

Goodle Chromeから切り替えたばかりの「Mozilla Firefox」。

乗換を思い立ったことの備忘録です。

画像はクリックするとLightboxで拡大表示します。

1:詳細説明

昨年暮から正月にかけて今まで作成してきたHPの中で、今後も使用予定の「共通ページ」等について、機能や見映え改善等をメンテナンスしてきた。

従来HPを閲覧するブラウザーは、「Microsoft Edge」や「Ie11」を中心に使用してきたが、最近ではHP開発時のToolとして表示スピード等を重視した結果、Google Chrome,Mozilla Firefox,AppleのSafari等の使用頻度は増加している。

この中で「Chrome」は従来表示スピードの速さから使用頻度が高かったが、最近何となく不調になってきていた。
 例えばCSSを変更したのに、PC内での表示確認時やWebへアップ後全く反映されていない現象が目立ち始めてきた。
 当然何度も「F5キー」による「再読み込み」や、画面の更新ボタンボタンを押す操作を行っているが、更新が反映されず困っていた。

ブラウザーごとのボタン表示内容
Noブラウザー画像ツールチップの表示内容
1Mozilla Firefoxfoxこのページを再読み込みします(Ctrl+R)
2Google Chromechromeこのページを再読み込みします
3Apple Safarisafari現在のページを再読み込みします
4Microsoft Edgeedge最新の情報に更新
5Microsoft Ie11ie11最新の情報に更新(F5)

そのため現在ページの確認Toolは「Fox」へ移行させたばかりです。
しかし、PCでWebの閲覧をFoxで行うと「Microsoft Edgeの方がChromeやFoxより高速」だと、バルーン表示される様になってきた。

Edgeは宣伝しているほど速いとは感ぜず、私の環境で一番早いのは、一位Fox,二位Chrome,三位Safari,四位Edge,五位Ie11の順番です。
参考:Browser Market Share(ブラウザーのシェア資料)

たまたまWin10用メーラーは、従来使い続け慣れてきた「Windows Live Mail」がMicrosoftの推奨アプリでなくなり、使い難い「メール」に変わったりしてきている。
また、LiveMailは分類していたフォルダ表示の一部が、突然消えて無くなってしまったり、挙動が少し異常になってきたりしてきた機会に、試験的に「Mozilla Thunderbird」へ移行させた時期と重なり、インターネットの閲覧も「Mozilla Firefox」で行い始めている。

閲覧するとタブがどんどん増加する等の問題(設定で直るかもしれない)が出てきたが、現在の環境で一番の高速表示と、変更結果が直ぐ反映される機能の点で気に入っている。

この様な状況で、ChromeやFoxは未だ十分使いこなしていない為、いろいろ調査したところ、これら「遅い・変更されない」等の原因は、「キャッシュ」が関わっていそうである事が分かってきた。

2:調査して確認していること

  1. 従来からやってきたページの更新方法
    ・「F5キー」を押し再読み込みさせる。
    ・Ieでは「フォルダオプション」から、「終了時に閲覧の履歴を削除する」にチェックを入れている。
  2. Webページの閲覧時ユーザーに、「F5キー」を押してから見て下さいとは言えませんから、HP作成者がやるべきことして
    ・head内リンクに〇〇.CSS?2018 例の様に(?以降へクリエー)を入れ文字列を変化させ再読み込みさせる。(※1)
    ・以下のMeta情報(キャッシュコントロール)を追加して再読み込みさせる。(※2)
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="pragma" content="no-cache">
    ・HP開発時には「スーパーリロード」(Shift + F5キー)も、効果が期待出来そうです。(※3)

引用した情報元

  1. (※1)
    「キャッシュのせいだから再読込して」と毎回言わなくて済むようにする記述方法
  2. (※2)
    Google Chromeヘルプフォーラムからの情報
  3. (※3)
    MSHelps.JPからの1月12日Twitterでtweetされた記事・画像
    @MSHelps.JPより

これらの情報については、効果を検討しています。

Λ