【Googleアドセンス】　遅延読み込み（Lazy Load）を試してみる

　サイトのページ表示速度を上げるべく、Googleアドセンスの自動広告をやめてマニュアル広告へ変えてみたら、少し改善された。
　だが、大きく改善されたわけではなく、『ウェブに関する主な指標テストに合格していません』という文言も依然消えない。

　追）後日元に戻した。以下は備忘録。

Googleアドセンスの遅延読み込み
1. 方法１
2. 方法２
まとめ

Googleアドセンスの遅延読み込み

　調べているうちにGoogleアドセンスの遅延読み込み（Lazy Load）を行うとPageSpeed Insightsの速度スコアがグンと上がると知ったので試してみた。
　　※　画像のLazy LoadではなくGoogleアドセンスのLazy Load

　方法が２つ３つ。

方法１

　（当ブログのテーマはCocoon）
　方法の１つはCocoon設定　－　広告の広告コードから

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

を削って、
　Cocoon設定　－　アクセス解析・認証のフッター用コードに

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

を記述するというもの。

　参考ホームページは、

　BLOG BOOT CAMP　『【爆速】アドセンス広告を遅延読み込みして表示速度を高速化する方法』（blog-bootcamp.jp/start/adsense-lazyload/）

　当サイトはブログを２つに分けているが、どちらもWordPressで同じテーマ（Cocoon）を使っているのに挙動が同じではなく、片方のブログが遅延読み込みにならなかった。
　削ったはずの

https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

のリンクがどこかで読み込まれているようだ。

方法２

　もう１つ別の方法として
　Cocoon設定　－　広告で何も指定せず、つまり「広告を表示する」のチェックを外して、
　Cocoon設定　－　アクセス解析・認証のフッター用コードに少々長いコード、
　＋　ヘッド用コードに（自動広告の場合）下の１行　

<script data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"></script>

を記述するというもの。
　※　xxxxxxxxxxxxxxxxの部分はサイト運営者ID

　フッター用コードに記述する少々長いコードは以下のホームページからコピー＆ペーストさせてもらった。

　参考ホームページは、

　Qwerty.Work　『AdSenseの広告を遅延表示させてスコア改善とページ表示スピードを高速化』（qwerty.work/blog/2020/05/adsense-speedup-lazyload.php）
　バグ取りの日々　『GoogleAdSenseの遅延読込みでページ表示速度を改善』（www.bugbugnow.net/2019/05/GoogleAdSense-lazy-loading.html）
　Kengenius　『【Cocoon ＋ AdSense】コアウェブバイタル対応的爆速化！』（www.kengenius.com/it/optimum_cocoon_for_core_web_vitals_and_adsense）

<script type = 'text/javascript'>
(function(window,document){
function main(){
var ad = document.createElement('script');
ad.type = 'text/javascript';
ad.async = true;
ad.dataset.adClient = 'ca-pub-xxxxxxxxxxxxxxxx';
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(){
if(window.pageYOffset){
onLazyLoad();
}
window.setTimeout(onLazyLoad,4000)
});
})(window,document);
</script>

　※　xxxxxxxxxxxxxxxxの部分はサイト運営者ID

　広告コードの改変は基本的にポリシー違反なので少々気になるが、大丈夫“らしい”。
　ということで、　
　GoogleアドセンスのLazy Load　＋　自動広告
で、試運用。