15 (Fri) 02:18 [Affiliate]

Google AdSense広告って意外と重くないすか？(´д｀)

そこで、とあるツールを使用して、AdSenseを読み込んでいる時は、ローディング中という画像が表示させておき、一気にサイト全体を表示させてから、 AdSense部分を読み込ませるという手法を使えば、サイトは軽く、AdSense広告部分のみを、すぐその後に読み込み表示させるという事ができます。タイトルは軽く表示させるとなってますが、要するに、サイト全体を読み込んでから広告だけを別に読み込ませるというだけです。既出だよ！ウルセェって人はスルーして下さいませ...。

今回は、document.lazy_writerというjavascriptを使用します。まず、こちらのサイトから、lazy_writer.jsをダウンロードし、ご自分のサイトのサーバーなり、ブログなりに、アップロードしておきます。

そして、ローディング中画像は、作成するもよし、適当に配布サイトからダウンロードするもよし、もし、宛がなく、綺麗な画像が欲しいのでしたら、Ajaxload - Ajax loading gif generator こちらのサイトで、広告の幅や大きさなどに合わせ、ローディング画像が作成できます。

後は、簡単。サイト、ブログのhtmlタグの閉じタグ（</html>タグ）の後、後ろ側というか、次の行に、

<script type="text/javascript" src="http://hogehoge.com/lazy_writer.js"></script>
<script type="text/javascript">
var adsense_url = 'http://pagead2.googlesyndication.com/pagead/show_ads.js';
document.lazy_writer(adsense_url, function(str){
    var id = "adsense_" + this.script_count;
    document.getElementById(id).innerHTML = str;
}, {delay : 1000});
</script>
<!-- adsence1 -->
実際のAdSense広告1のスクリプトタグをココに貼り付け。
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!-- adsence1終了 -->
<!-- adsence2 -->
実際のAdSense広告2のスクリプトタグをココに貼り付け。
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!-- adsence2終了 -->

と、書きます。最初のこのlazy_writer.jsの設置URLは、それぞれのアップロードしたURLに書き直して下さい。delay : 1000という部分も、お好きなディレイタイムに変えても構いません。

実際のAdSenseスクリプトタグは、「実際のAdSense広告のスクリプトタグをココに貼り付け。」という部分に設置します。

そして、今までAdSense広告スクリプトタグを挿入していた部分には、

<div id="adsense_1" style="text-align: center; vertical-align: middle;">
<img height="画像の縦幅" border="0" width="画像の幅" src="hogehoge.com/image/ajax.gif" alt="Now loading..." />
</div>

と、書きます。id指定部分のadsense_1が、上に書きましたが、最初に変更したhtmlタグの外に設置した部分の、 の中が表示されます。画像のURL、alt指定、画像のpx指定は、ご自分の画像アップロードした場所などに、書き換えてお使い下さい。id要素の数字がhtmlタグの後ろに書かれている実際のadsenseタグの順番の数字になります。

これで、完了。実際に設置すると、いかに全体の表示が早くなったか、実感できると思います。

追記：
現在は、Adsenseのシステムが変わって、それ以降、こ方法は、使えないようです。また別の方法を発見したら、エントリにあげます。