cocoonでAdSense自動・手動広告を遅延読み込み化させてPageSpeed Insightsスコアを上げる方法

ブログ

アドセンスの自動広告と手動広告をまとめて遅延読み込み化させます。

PageSpeed Insightsのスコアが冗談抜きで10点以上上がることもあるサイト高速化に激しく寄与する方策です。

なお、自動広告の遅延読み込み化をさせても全画面にどーーんと表示されるインライン広告については何ら変わりなく表示されます。不思議ですが。

AdSenseの遅延読み込み

手動広告の遅延読み込み化を設定するだけで自動広告についても勝手に遅延読み込み化するので設定自体は手動広告のみについて行えば良いです。

なお繰り返しになりますがインライン広告はアクセスの途端に表示されます。(検証済み・原因は不明)

遅延読み込み設定をする

ttps://www.kengenius.com/it/optimum_cocoon_for_core_web_vitals_and_adsense

上記の記事を参考にさせていただきました。御礼申し上げます。

まず以下のコードをcocoon設定の「その他のアクセス解析・認証コード設定」→「フッター用コード」に設定します。

なお「ca-pub-XXXXXXXXXXXXXXX」を自身のものに書き換えます。

<script type="text/javascript">
(function(window, document) {
  function main() {
    // GoogleAdSense読込み
    var ad = document.createElement('script');
    ad.type = 'text/javascript';
    ad.async = true;
    // 新コードの場合、サイト運営者IDを書き換えてコメントアウトを外す
    ad.dataset.adClient = 'ca-pub-XXXXXXXXXXXXXXX';
    ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    var sc = document.getElementsByTagName('script')[0];
    sc.parentNode.insertBefore(ad, sc);
  }
 
  // 遅延読込み
  var lazyLoad = false;
  function onLazyLoad() {
    if (lazyLoad === false) {
      // 複数呼び出し回避 + イベント解除
      lazyLoad = true;
      window.removeEventListener('scroll', onLazyLoad);
      window.removeEventListener('mousemove', onLazyLoad);
      window.removeEventListener('mousedown', onLazyLoad);
      window.removeEventListener('touchstart', onLazyLoad);
      window.removeEventListener('keydown', onLazyLoad);
      main();
    }
  }
  window.addEventListener('scroll', onLazyLoad);
  window.addEventListener('mousemove', onLazyLoad);
  window.addEventListener('mousedown', onLazyLoad);
  window.addEventListener('touchstart', onLazyLoad);
  window.addEventListener('keydown', onLazyLoad);
  window.addEventListener('load', function() {
    // ドキュメント途中(更新時 or ページ内リンク)
    if (window.pageYOffset) {
      onLazyLoad();
    }
  //何もアクションがないときは指定秒数後に読み込み開始(ミリ秒)
  window.setTimeout(onLazyLoad,3000)
  });
})(window, document);
</script>
<!--/ Adsense 遅延読み込み -->

編集用のファイルを子テーマに追加

FTPソフトなどで、「public_html→wp-content→themes→cocoon-master→tmp」にある「footer-javascript.php」をコピーして、子テーマ側にペーストします。

子テーマにtmpフォルダがない場合は新設しましょう。

こんな感じです。

コピーした子テーマのfooter-javascript.phpを開き、22行目付近にある「echo ADSENSE_SCRIPT_CODE;」をコメントアウト(行頭に “//” を追加)します。

青で示した部分の文頭に「//」を追加するだけです。

遅延読み込み対応のAdSenseのコードを貼る

遅延読み込み設定する前にAdSenseを貼っていた時と同様に、cocoon設定の「広告」の欄に手動広告を貼り付けます。

ただし、「<ins」から始まり「</ins>」で終わる部分だけにします。

こうすると、サイトへのアクセスの3秒後に自動広告・手動広告問わずAdSenseが表示されます。

アクセスの途端全画面に表示されるインライン広告だけは何ら変わりなく表示されます。

遅延読み込み化によるサイト収益への影響

CLS値への影響や、収益・PageSightインサイトのスコアがどうのように変化したかコチラにまとめました。

一応収益の変化などは、遅延読み込み化後2ヶ月ほど様子を見た上で検証しています。

この顛末を書いた記事を読んだ後、遅延読み込み化させるか決めるのを勧めます。

まとめ cocoonでアドセンスを遅延読み込み化させる方法

  1. アドセンスのコードを遅延読み込み仕様にする
  2. フッター編集用のファイルを子テーマに追加
  3. footer-javascript.phpを編集
  4. 遅延読み込み対応のAdSenseのコードを貼る

これでインライン広告(全画面に出る奴)以外はアクセス・操作の3秒後に表示されます。

遅延化の効果や影響の検証記事はコチラ

その他のcocoonの高速化に関する方策はこちらを参照してください。

タイトルとURLをコピーしました