[Cocoon] Adsenseを遅延読み込みさせてサイト読み込み速度を上げる

今日はAdsenseを遅延読み込みさせてサイト読み込み速度を上げる方法を紹介します。

まずは、自動広告をオンにしているとしたら、Google Adsenseのページからオフにしましょう。

その後、自身のサイトに行って、Cocoon 設定の広告タブの広告コードに以下のようなコードを貼っていると思うので、そこを変えていきます。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

この上部の<script>から</script>までを消して以下のようにします。

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

保存です。

次に、Cocoon 設定のアクセス解析・認証タブに行って、フッター用コードに以下のコードを入力して保存します。

<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>

以上、自分のサイトに加えた変更の備忘録です。