GoogleAdSenseを遅延読込みさせる方法　ページ表示速度が劇的に改善します

【改善前】PageSpeed Insights で現在のページ表示速度を測定

まずは、久しぶりに PageSpeed Insights を開いて、自ブログのページ表示速度を測定してみました。

これはスマホで表示した時のスコアですが、何と18点！かなりヤバいですよね(￣O￣;)ちょっと致命的かも知れません…。

そこで、改善点として指摘されている警告を見てみると、こんなメッセージがありました。

「第三者コードの影響を抑えて下さい」

こんな警告って、今まで表示されていたっけ？と思いつつ、これこそが何とかしなければならない問題点なんですよね（汗）

【改善後】Google AdSense の遅延読み込みを施したら劇的にスコアがアップ！

結論から先に言ってしまいますと、AdSense の遅延読み込みを施したら劇的にスコアがアップしました。

改善後に PageSpeed Insights でページ表示速度を測定したところ、スコアは次の結果になりました。

何と、78点！

アドセンスの他にも第三者コードの読み込みをしている関係で、100点満点にならなかったのは残念でした。しかし、Google AdSense を遅延読み込みさせただけで一気にこれだけスコアが改善されるなんてちょっと凄くないですか？

【実践編】Google AdSense を遅延読み込みさせる方法

Google AdSense を遅延読み込みさせるための導入手順は以下の通りです。

<script>
//<![CDATA[
//lazy load ads
var lazyloadads = false;
window.addEventListener("scroll", function() {
    if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) {

        (function() {
            var ad = document.createElement('script');
            ad.type = 'text/javascript';
            ad.async = true;
            ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
            var sc = document.getElementsByTagName('script')[0];
            sc.parentNode.insertBefore(ad, sc);
        })();

        lazyloadads = true;
    }
}, true)
//]]>
</script>

たったこれだけでページ読み込み速度が劇的に改善されます(^^)

この、js を入れ替える作業だけで初回のユーザーイベントまではアドセンスの読込みを遅延。すなわち、ユーザー操作があるまでは、いつまでも Google AdSense の広告を表示しない、ということです。いたって合理的な手法だと思います(^^)

▼参考にしたサイト

Mempercepat Loading Blog yang Terpasang Iklan Google Adsense

Memasang unit iklan yang banyak, bisa membuat loading Blog/Website menjadi lebih lambat dan berat, karena akan meload semua script Google Adsense.

blog.zdienos.com

Google AdSense の読み込みを遅らせるメリット、デメリット

なお、Google AdSense を遅延読み込みさせることによるメリットとデメリットをまとめておきますね。

メリット

Google AdSense は、JavaScript や画像、フォント、設定ファイルなどの複数データを読込むため、広告コードを貼れば貼るほど重たくなります。

AdSense を読み込みつつ、ページ表示速度も可能な限り早くできる遅延読み込みは、Google検索のうえでも高評価が与えられ、上位表示というさらなるメリットにもつながるはずです。

デメリット

初回のユーザーイベントまではアドセンスの読込みを遅延させますから、ファーストビューの最上部などにアドセンスを貼り付けている場合は当然ながらクリックされにくくなって収益が下がるはず。

広告の配置を見直す必要が生じそうです。

また、Google AdSense で自動広告を利用している場合、一部の機能が正常に動作しない可能性があるかも知れません。

ちなみに、僕のブログでは自動広告がちゃんと表示されています。環境に悪影響がないかよく確認してから自己責任で導入して下さい。

まとめ

今回は、Google AdSense を早く読み込むことで高速化させるのではなく、遅く読込むことによって（ページ表示速度の計算外のタイミングで読み込むため、ページ表示速度が）高速化させる方法をご紹介しました。

なお、Google AdSense の遅延読み込み導入はアドセンスから禁止されてはいないそうですからご安心下さい。禁止の可能性もあったようですが、下記の情報を読むと大丈夫みたいです。