Google BloggerのブログがIEだと重い・・・

私のこのブログの表示がとても遅いのです。
とはいえ、メインマシンではマシンパワーにものを言わせ全く問題は有りませんでした。原因も判らないので放っておいたのですが、ARROWS Tab Wi-Fi QH55/Jを使い始めたら自分のブログが重すぎて見れたものではない・・・。

どうでしょうか? 今は他のサイトと同じように見れますでしょうか?

今まで見に来られた方、重くてごめんなさい <(_ _)>




Windows8にしてから自分のブログの表示がちょっと重い気はしていました。
この症状は自分のこのブログだけではない事に気づきましたが、原因が判らずブログパーツやJavaScriptを外しながら様子を見ていました。
私のこのブログだけではなくGoogle Bloggerのブログが重いです。重いだけなら良いですが、エラーが出て終わりのサイトも多いです。
Google Bloggerだけではなく、大手の情報サイトでも表示できない事があります。

そして、IE以外のブラウザなら問題は無いのです。これは以前からアンチIEの方が指摘している問題ですね。

基本的にはIEの問題のようですが、やっと回避する方法が判りました。
BloggerのテンプレートのHTMLのヘッダーにX-UA-Compatibleというプロパティがあるのですが、ここを少し修正します。

Bloggerの管理画面でテンプレートをHTMLで修正する画面にし ヘッダータグ<head> の近くに次のように書かれた部分を探します。

私の使っているテンプレートの元は
 <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
となっていました。

これを次のように修正します。
 <meta content='IE=EmulateIE7; IE=EmulateIE8; IE=EmulateIE9; IE=EmulateIE10' http-equiv='X-UA-Compatible'/>

’IE=EmulateIE10' がWindows8のIE10用です。新しいIEが出るたびに修正する必要がありそうです。

なにやら互換性を保つのに指定するものらしいのですが、かえって問題を起こしてるような気がしなくもないです。

説明はIEBlogのここらへんにありますがわけ判りません。
サイト開発者が利用できる IE の互換性機能
2.1.2.4 X-UA-Compatibility Meta Tag and HTTP Response Header

わけ判らないのですべてのIEバージョンを指定しています・・・
あるいはプロパティの指定自体消してしまってよいのかな?

コメント

  1. はじめまして。1月にBloggerに移転しまして、いろいろ不具合を検索していたらここへ辿り付きました。

    私は普段Chromeで見ているのでIEでの表示の崩れと重さを知らずにいて、気がついたのがほんの数日前でした。
    ここに書かれてある方法も試しましたが、私の環境 Windows7・IE9のF12で見た限りはやっぱりダメでした。

    このページもIEで見てみたらウチと同じだったのでハッと思ったのですが、テンプレートのAwesome Inc.とIEの相性がかなり良くないみたいですね。
    記事やサイドバー周りが赤いラインで囲まれてしまっています。
    何よりも動画やブログパーツが固定されなくて動いてもう最悪で、でもIEユーザーの読者様は多いので無視もできません。
    せっかくベストのテンプレートを見つけてこれでやっていこうと決めたのにまた一からやり直しかと思うと頭が痛いですが、別のテンプレートを見直す方向でいこうかなと考えているところです。

    返信削除
    返信
    1. 私のこのブログも重いまま という事でしょうか?
      WEBを見るだけなら気にしないですが、見せる側だといろいろ面倒な事がありますね。かなり多くのWEBサイトが重く見づらくなっています。管理者の方々は気づいてないのかな?と思います。

      単純に外部サイトのスクリプトの反応が悪かったという事もありますので原因の切り分けが難しい場合もあります。
      私はこの勘違いでBloggerに引っ越してきたんですけど・・・

      削除
    2. 再びおじゃまします。
      IE9で見たところこのブログは大丈夫でしたよ。私のブログは動画やブログパーツを入れているせいもあってか激重になってましたが。
      Awesome Inc.テンプレを使用しているブログをいくつか見てみたのですが、やはり赤い枠が表示されてしまっているのですよ。
      逆に考えればブログ主様は普段IEで見ていないから気が付いておられないのかもしれませんが。(私だけがそう見えるのかな?)

      このブログも他所からお引越しされてきたのですね。
      私はまだまだひよっこでBlogger独自のスタイルに苦戦中ではありますが結構気に入っています。
      やはり見てもらう人あってのブログですから、快適に見てもらえるよう頑張って挫折しないよう改善していきたいです。
      今後はマメにIEでのチェックもしていかないとなぁと思わされました。

      削除
    3. ありがとうございます。
      気のせいかもしれませんがBloggerはGoogle検索への反映も早いと感じています。
      お互い頑張って更新していきましょう!

      削除
  2. おはようございます。
    あれからミラーサイトを作って別のテンプレートを試していたのですが、結局動画が固定されない状況は変わらず。で、もうひとつ試験的に作ってみたのは結局Awesome Inc.の別テンプレになってしまいました。
    昨晩、このブログ様の記事を見つけて試してみたところ、完璧ではないかもしれませんが劇的に動画のブレは改善されました。
    http://masatokinugawa.l0.cm/2012/07/bloggerie.html

    その後IEをチェックしていて気がついたのですが、あの赤ラインの枠もなくなっていました。
    Signal_Flag_Z様のブログは重くはなかったですが(私の環境では)以前の私のところと同様に周りのシャドウ部分が赤枠で囲まれ、その中に記事部分やガジェットが下に飛び出る表示になっていました。
    (飛び出して見えるのはラベルクラウド、人気の投稿、Amazonです)
    私と同じタイプのテンプレを使用されているので気が付いたことを書いたまでですが、気になるようでしたら上記の記事も参考にされてはいかがでしょう。

    ここに書かれていたmeta contentの変更ですが、それぞれの環境でも変わってくるようなのでIEをチェックしながら今後もいろいろ試しながら違いをチェックしていこうと思ってます。
    http://www.sunabox.net/2012/07/bloggerie1.html
    http://www.kuribo.info/2012/12/blogger-ie10-no-response-issue.html

    Blogger利用者はPC、プログラミング関係に強い方が多いようで実に頼もしいです。日々勉強です。
    Signal_Flag_Z様も快適に記事を書いていけるよう願っております。ありがとうございました。

    返信削除
  3. 貴重な情報をありがとうございます。

    F12開発者ツールのバグも考えらるので手近にネイティブIE9のPCが無く確認に手間取ってしまいました。IE10のIE9互換表示でも赤枠が出ています。ネイティブIE9のPCでも確認しました。ディスプレイドライバとの相性もあり得ます。

    ちなみにテンプレートのデザインのカスタマイズでガジェットの背景にある枠線の色を変えると赤枠も違う色になります。

    手っ取り早い回避策はIE9の互換表示をさせない事ですね。 meta指定の IE=EmulateIE9を消してしまうとIE8互換で表示され赤枠は出ないようです。私がIE9を使っていたころはこの指定を入れていなかったのでIE9互換で表示されず気づかなかったと思われます。
    しかし、これで表示が遅くなっては何をしているんだか判りませんね。表示速度についてはまだ確認していません。
    このコメント記入時からしばらくEmulateIE9を消して運用してみます。
    どうでしょうか?

    赤枠の表示タイミングからするとページの読み込みが終わり何かのスクリプトでCSSの設定が反映される時に現れています。
    紹介していただいたページのieretrofit.jsとの関係はわかりませんが、そのページの変更で赤枠が出なくなるのはわかる気がします。
    なにやらIEにはborder colorのバグがあるようなのでその影響でしょうか?

    ブラウザの種類が多くどうしても現物合わせ的になってしまいます…

    返信削除
  4. 突然失礼します。。


    meta content='IE=EmulateIE7; IE=EmulateIE8; IE=EmulateIE9; IE=EmulateIE10' http-equiv='X-UA-Compatible'/

    meta http-equiv="X-UA-Compatible" content="IE=7; IE=8; IE=9; IE=10"
    のように略して書くことができます。


    正直、このタグ自体要らない気もしますが、(IE10では問題ないし)
    古いIEだとテンプレートによっては崩れることがあるそうなので

    最初に meta http-equiv="X-UA-Compatible" content="IE=edge" と書いて
    その後に条件付きコメントで古いIE用のX-UA-Compatibleを指定するのが無難かと思います。




    ちなみに、FC2ブログはテンプレート関係なく強制的にHTTPヘッダでIE=EmulateIE7を付けてくるため
    metaタグでIE=edgeを指定してやらないとAwesome Inc.のテンプレートのようにガクガクになります。。

    返信削除
    返信
    1. はりを様 コメントありがとうございます。
      みなさんIEではいろいろ悩んでいるようですね。

      私のブログの問題点としては2つあります。

      1.表示が遅い
      BloggerのテンプレートそのままだとEmulateIE7だけが指定されています。ほぼすべてのIEでIE7互換表示をしてしまいます。IE7互換で表示するとWindows8のタブレットでの表示が遅いのです。画面のスクロールが紙芝居の様になってしまいます。ページのレンダリングが重いのでしょうか?パワーのあるPCで見ていると気付くことは無い問題です。
      回避策として本記事のように'X-UA-Compatible'の指定を増やしました。紹介して頂いた'IE=edge'指定と等価だと思います。

      2.IE9だと表示(CSS指定?)が期待通りにならない
      私のブログではIE9で表示させるとおかしくなります。RQ様が指摘してくださったようにテーブルのフレームに意図しない枠がでます。IE9での問題のため'IE=edge'では解決できません。
      回避策としてIE9の場合はIE8互換で表示させています。EmulateIE9を削るとIE9で表示する時にはIE8互換で表示されます。
      meta content='IE=EmulateIE7;IE=EmulateIE8;IE=EmulateIE10' http-equiv='X-UA-Compatible'

      条件付きコメントでIE9用のCSSを用意するのもアリですが、どのCSSが悪いのか特定していないのと、テンプレートを気楽に変更できないので見合わせています。

      私のブログはデザイン重視の内容ではないので、記事が読めなくなる事がなければ2の問題はあきらめてもいいかな、と思っています。
      今後タブレットやウルトラブックが普及することを考えると1の問題回避を優先しようと思います。

      削除

コメントを投稿

最近のコメント

Threaded Recent Comments will be here.