Googleアドセンス広告の遅延設定

AdSense広告を載せたら激重に！

現在の遅延設定

現在はこちらで紹介されている方法で遅延設定しています。

遅延用スクリプトに広告コードも一緒に記述するので分かりやすいです。スクリプトをfooter-insert.phpに貼るだけ。body-top-insert.phpをいじる必要はありません。ウィジェットに組み込んだ広告用スクリプトは一部を削る必要があります。

AI君の審査にかけても「記述が古い」とか「バグの恐れが～」などと指摘されません。これが一番シンプルで分かりやすく、従来からあるスクリプトより優れてるような気がします。

参考のために従来からある方法を以下に記しておきます。

遅延読み込みの方法

ブログにアドセンス広告を貼ると目に見えて重くなります。PageSpeed Insightsで計測すると目も当てられない結果に。そのため広告の読み込みを遅延させる手法が広く用いられています。

遅延読み込みの設定方法はfooter-insert.phpに以下の遅延用スクリプトを貼るだけです。

footer-insert.php

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

これによりページをスクロールするまで広告は表示されません。サイトの表示は速くなりますが、スクロールしない限り広告が表示されずノーカウントになります。広告収入が減少する可能性がありますが、サイトスピードはSEOに直結するので不利は承知の上であえて利用してます。

Cocoonの設定変更

遅延読み込みをきちんと動作させるにはCocoonの設定変更も必要です。

Cocoonは独自に広告用スクリプトを読み込みます。勝手に読み込むので、これを止めないと先ほどの遅延設定が働きません。遅延読み込みを設定したらこちらも変更して下さい。

読み込みを停止するには親テーマのtmpフォルダにあるfooter-javascript.phpを子テーマにコピーして赤字部分をコメントアウトします。これで広告スクリプトが勝手に読み込まれなくなります。

  <?php //AdSense非同期スクリプトを出力

  //広告の存在を確認するグローバル変数
  global $_IS_ADSENSE_EXIST;

  //アドセンス共通スクリプトコード
  define('ADSENSE_SCRIPT_CODE', '<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client='.get_adsense_data_ad_client().'" crossorigin="anonymous"></script>');
  //if ($_IS_ADSENSE_EXIST && !is_customize_preview() && !is_cocoon_settings_preview()) {
  if (is_ads_visible() && $_IS_ADSENSE_EXIST && !is_customize_preview()) {
  //  echo ADSENSE_SCRIPT_CODE;
  } //AdSense非同期スクリプトを出力
  ?>

広告コードのスクリプト削除

こちらも効果的なので併用してます。

各ウィジェットにある広告コードの赤字部分を削除して、それをhead-insert.phpもしくはbody-top-insert.phpに貼り付けます。これでスクリプトの読み込みは一度だけになり、同じスクリプトが何度も読み込まれる事はなくなります。

広告ウィジェット

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

head-insert.php/body-top-insert.php

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"
     crossorigin="anonymous"></script>

広告コードの改変について

AdSenseコードの改変は禁止されています。

しかし遅延設定や重複するJSを削除するのは問題ないようです。否定する人もいますが、公式がはっきり回答してます。不正な方法でなければコードの改変は許容されているようです。

パブリッシャー様は、広告の掲載結果を作為的に高めたり、広告主様に損害を与えたりすることがない場合に限り、AdSense 広告コードに変更を加えることができます。詳しくは、AdSense 広告コードの修正に関する説明をご確認ください。

Google Adsenceヘルプ　広告掲載のガイドライン　AdSense 広告コードの修正

遅延表示の問題点

Googleアドセンスの遅延設定は広告収入の減少に繋がります。しかしサイトスピードが落ちればSEOが悪化しPV数が落ちます。両者はトレードオフの関係にあるのが悩ましいところです。

Googleアドセンス自体は高速化出来ないので、他の部分を高速化する事でサイトスピードの低下を防いでます。WEBフォントのホスティングやインライン化は特に効果が大きいです。

サイトスピードが落ちてもPageSpeed Insightsの結果がある程度良好なら無理に遅延する必要はありません。適度に速度を保ちつつ広告もきちんと表示されれば問題ないと思います。