[Adsense Lazy Load] アドセンスを遅延読み込みさせてみました。[Blogger]

公開

Bloggerカスタム Vaster2



アドセンスロゴ

Google Logo Background : https://www.cleanpng.com

アドセンスを遅延読み込みさせてみました

PageSpeed Insights でモバイルのスコアが低かったので対策してみました

検索すると大体2種類くらいのJavaScriptがありました(jQueryなし)

追記:リンク切れ(サイト閉鎖)があったので簡易的なアーカイブとしてコードの引用を追加しました。

  1. How to Setup Lazy Load for Google AdSense Ad units? 表示領域を確保したのちに?遅延読み込みするようです。スコアあまり変わらず
  2. コード引用 クリックすると開きます

    Method 1. onload event

    Hint: Noptimize tag is present to make compatible with Autoptimize. It will prevent aggregating AdSense lazy loader inline JS.

    <!--noptimize-->
    <script type="text/javascript">
    function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
    document.body.appendChild(element);
    }
    if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
    </script>
    <!--/noptimize-->
    
    How to Setup Lazy Load for Google AdSense Ad units?

    Method 2. onscroll event

    This approach will load ad unit once user scroll your web page.

    <script type='text/javascript'>
    //<![CDATA[
    var la=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===la||0!=document.body.scrollTop&&!1===la)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),la=!0)},!0);
    //]]>
    </script>
    
    How to Setup Lazy Load for Google AdSense Ad units?
  3. How to Lazy Load Adsense Ads in Blogger - Rauf Graphics スクロールさせるとアドセンスの読み込みが始まるようです。スコア変化あり(リンク切れ確認2021年3月)
  4. Mempercepat Loading Blog yang Terpasang Iklan Google Adsense - blog zdienos 2とコードが似ていました、挙動も同じ感じでした
  5. コード引用 クリックすると開きます
    <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>
    
    Mempercepat Loading Blog yang Terpasang Iklan Google Adsense - blog zdienos

実際にスコアがよくなったのは 2と3のコードでした。

実際に設置

HTMLを編集します。必ずバックアップを取ってから作業してください。

[テーマ] - [HTMLの編集]で作業します

手順

  1. 既存の
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    をすべて削除
  2. 上記の2か3のコードを</body>の直上に貼り付け(自分は3のコードにしました)

未知の不具合、Googleからの指摘、アドセンスの収益の減少などがあるかもしれないので、設置の際は自己判断でお願いします。


新しい記事を書きました。

[Adsense Lazy load] スマホの時のみアドセンスを遅延読み込みさせる [Mobile only] | すたすた式

スマートフォンの時にのみアドセンスを遅延読み込みさせる(スクロールすると読み込みが始まる)JavaScriptです



すたすた式

Enjoy!👍

QooQ