BloggerをIEで見ると重たいのを解消する方法

セキュリティに関係する話ではありません。

最近気付いたことなんですが、このブログをIEで見ると、すごく重たかったです。(今は解消したはずです)
このブログはBloggerを利用していて、Bloggerに用意されているテンプレートをほとんどいじることなく、そのまま使っていたんですが、IE以外のブラウザではスムーズに動くのに、IE(正確にはIE7以上)だけはスクロールがカクカクするくらい重たかったです。(ついでに言うと、フッダの下に謎の無駄な空間ができていました。)

で、これ、なんでかなーって検索しても、重たくて悩んでいる人はいくらか見つかったんだけど、解決策がみつかりませんでした。テンプレートを変えれば軽くなると書かれているページはあったんですけど。

仕方がないので、何が悪いのかなーって自分で見ていったら、どうも条件付きコメントでIEだけ読み込んでいる「ieretrofit.js」というのに重たい原因があることがわかりました。
ひとまずこれを取り除いてみたところ、明らかに軽くなりました。最初からついているjsをとったら閲覧に問題が起きそうな気がしますが、取り除いた上でIEであれこれ操作してみましたが、特に問題なく動いている気がします。よし。

という訳で、 これを取り除きましたんで、IEをご使用の方々も、今日からこのブログの快適な閲覧ができるようになったんではないかと思います。IEの挙動やバグについてよく取り上げるくせに、今まで気付かなくてすみません！！！


一応、Bloggerをお使いでIEで重たくて悩んでいる方の役に立つかもしれないので、これの取り除き方を書いておきます。このjsが中でなにやってんのか全然見ていないので、はずして何か問題が起きても知りません。まぁ問題があったら戻せばいいので、ひとまずやってみましょう。

手順

まず、自分のブログのHTMLソースをみて「ieretrofit.js」の記述があるか確認しましょう。大抵は<title>タグの少し上くらいにあるはずです。もし記述があり、あなたのブログがIEで特に重たい場合は、試してみる価値があると思います。

新しいブログの管理画面から、テンプレート(Template)→HTMLの編集(Edit HTML)→続行(Proceed)を選択します。

以下の部分を探します。

<b:include data='blog' name='all-head-content'/>

この項目は、フィードやアイコン(favicon)などの、ブログのオプション的な情報を一度に表示するためのものみたいです。この中に例の重たいieretrofit.jsも含まれているので、以下の記述を追加し、おかしなことになってもあとですぐに戻せるように、コメントアウトするだけにしてどかしましょう。

<!--<b:include data='blog' name='all-head-content'/>-->

 これで軽くなりますが、これだけだと、フィードやアイコンなどの必要な情報まで取り除かれてしまうので、次に重たいjs以外の情報を書き足す必要があります。今コメントアウトした下くらいに、以下をコピー & ペーストしましょう。これで、重たいjs以外の全ての情報が元通りに挿入されると思います。

<meta expr:content='&quot;text/html; charset=&quot; + data:blog.encoding' http-equiv='Content-Type'/>
<script type='text/javascript'>//<![CDATA[
(function() { var a=window,c="jstiming",d="tick";var e=function(b){this.t={};this.tick=function(b,o,f){f=void 0!=f?f:(new Date).getTime();this.t[b]=[f,o]};this[d]("start",null,b)},h=new e;a.jstiming={Timer:e,load:h};if(a.performance&&a.performance.timing){var i=a.performance.timing,j=a[c].load,k=i.navigationStart,l=i.responseStart;0<k&&l>=k&&(j[d]("_wtsrt",void 0,k),j[d]("wtsrt_","_wtsrt",l))}
try{var m=null;a.chrome&&a.chrome.csi&&(m=Math.floor(a.chrome.csi().pageT));null==m&&a.gtbExternal&&(m=a.gtbExternal.pageT());null==m&&a.external&&(m=a.external.pageT);m&&(a[c].pt=m)}catch(n){};a.tickAboveFold=function(b){var g=0;if(b.offsetParent){do g+=b.offsetTop;while(b=b.offsetParent)}b=g;750>=b&&a[c].load[d]("aft")};var p=!1;function q(){p||(p=!0,a[c].load[d]("firstScrollTime"))}a.addEventListener?a.addEventListener("scroll",q,!1):a.attachEvent("onscroll",q);
 })();
//]]>
</script>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.canonicalUrl' rel='canonical'/>
<data:blog.feedLinks/>
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
   <link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
</b:if>

これで終わりです。保存して、IEで動作が軽くなったか、問題なく動くか、確かめてみてください。

他の方のBloggerのブログを見てまわって、同じ現象が起きるか確かめたところ、中にはieretrofit.jsを読み込んでいても重くないブログもあったので、テンプレートを変えたら問題が直ったという人がいたように、テンプレートによって問題が起きる場合と起きない場合があるのかもしれません。ひとまず僕のブログはこのようにしたところ、テンプレートを変えずに、スムーズにスクロールができるようになりました。
 
この方法ではなんらかの問題がある場合や、もっとスマートに解決できる方法があればコメントやTwitterなどでお知らせください。