JDBな人生  専門的なことから日常的なことまで~ まぁ自由きままに書いていきます。
2017年08月 / 07月<< 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>09月

アクセスランキング

[ジャンルランキング]
コンピュータ
385位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
52位
アクセスランキングを見る>>

FC2カウンターの読み込みを遅らせる

このブログでは、アクセス数のカウントにFC2カウンターを利用していますが、FC2カウンターのサーバーが重いとブログの表示も遅くなる、という問題があります。(<script></script>は同期通信のため)

そこで、カウンターの表示をページの描画が終わった後に行う方法を、考えました。

参考までに、コードも載せておきます。(実際にこのブログで利用しています)


Before
<script language="JavaScript" type="text/javascript" src="http://counter1.fc2.com/counter.php?id=カウンターID" ></script><noscript><img src="http://counter1.fc2.com/counter_img.php?id=カウンターID"></noscript>
~本文~

After
<span id="counter_area"></span><noscript><img src="http://counter1.fc2.com/counter_img.php?id=10166034"></noscript>
~本文~
-----
↓</body>の直前に
-----
<script type="text/javascript">
var dw = document.write;
var dwl = document.writeln;
 
function addCounter(){
    
    document.write = function(s){
        if (s.match(/<script(.*?)src="(s?https?:\/\/[-_.!~*'\(\)a-zA-Z0-9;\/?:\@&=+\$,%#]+)"/)){
            var el = document.createElement("script");
            el.src = s.match(/<script(.*?)src="(s?https?:\/\/[-_.!~*'\(\)a-zA-Z0-9;\/?:\@&=+\$,%#]+)"/)[2];
            el.language = "javascript";
            el.charset="UTF-8";
            document.getElementById("counter_area").appendChild(el);
        }
    }
     
    document.writeln = function(s){
        document.getElementById("counter_area").innerHTML += s;
        if (s.indexOf('<a href="http://counter.fc2.com/" target="_blank" onMouseOver=') == 0){
            document.write = dw;
            document.writeln = dwl;
        }
    }
    
    var cel = document.createElement("script");
    cel.src = "http://counter1.fc2.com/counter.php?id=カウンターID";
    document.getElementById("counter_area").appendChild(cel);
    
}

addCounter();

</script>
※「addCounter」の実行タイミングは好みで調整してください。

FC2カウンターの仕組みは、
1.外部スクリプトを読み込む(↑の「Before」の部分)
2.そのスクリプトがさらに別のスクリプトを読み込む(document.writeを使用)
3.「2」で読み込まれたスクリプトが画像を読み込む(document.writelnを使用)
というような感じです。

カウンターを読み込むスクリプトの中には、「document.write()」と「document.writeln()」が使われているので、ただ「Object.innerHTML」を使ってカウンターを読み込む「<script></script>」を挿入するだけでは、カウンターは表示されません。(すでに描画が行われたHTMLの、途中の部分をあとから「document.write()」で書き足す・書き換えることはできないからです)

そこで、「document.write」と「document.writeln」の関数を一時的に書き換えて、documentに書き足される前に、その内容をinnerHTMLを使い、指定した部分に流す、という仕組みにしました。

また、ブラウザによっては、「Object.innerHTML」に「'<script type="text/javascript" src="」を挿入しても、外部スクリプトが読み込まれない場合があるので、「src=""」の部分を正規表現で適当に抜き出して、「document.createElement」で要素作成→「Object.appendChild」で追加、としました。




結果、どう変わったかというと、以下の画像をご覧ください。

Before
FC2カウンターのサーバーとの通信が、最初の方で行われています。
111008counter2.png


After
FC2カウンターのサーバーとの通信は、一番後ろで行われるようになりました。
111008counter.png




そして、実際にカウンターのサーバーが重くなった場合です。
今回は、hostsを書き換えて、自分のサーバー上の偽の「counter.php」と通信させてみました。

この偽の「counter.php」は、5秒待機してから内容を出力します。


Before
通常時:1秒94

高負荷時:
ページが表示されるまでの時間・・・6秒70
読み込みが終わるまでの時間・・・6秒70

After
通常時:1秒96

高負荷時:
ページが表示されるまでの時間・・・2秒44
読み込みが終わるまでの時間・・・7秒27


表示速度の向上に成功しています。

というわけで、ブログの表示が遅くてイラつく、ということも少なくなると思います。


これからも、このブログをよろしくお願いします。
 


 
   WEBサイト/ページ    TB(0)    CM(0)    EDIT    ページ↑

コメント投稿


 管理者だけに表示

コメント

トラックバック

この記事へのトラックバック:

プロフィール

JDB Luigi

Author:JDB Luigi
どこにでもいるようなありふれた人間・・・という訳でもなく、かと言って怪しい宗教を信仰する変人という訳でも無い。

基本的に掲載しているコード等は煮ていただいても焼いていただいても結構ですが、利用は自己責任にてお願いいします。
また、バグ・アドバイス等もしあればよろしくお願いします。