AdSense広告をロード完了時に表示（遅延読み込み）

PageSpeed Insightsのモバイルスコアが悪いので色々模索している一環です。
今回はAdSenseで読み込んでいるJSファイルについて。

こんな感じでAdSenseの広告タグが発行されると思います。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

このタグから

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

この部分、jsファイルの読み込みを消します。ページ内にひとつでも残ってると効果がないので注意してください。

<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

つまりこうすればOKです。これを広告挿入したい場所に貼ります。

そうしたらWordPressのfunctions.phpにこんな感じの記述をしましょう。

add_action( 'wp_head', function () { ?>
<script type="text/javascript">
	function dlAtOnLoad() {
		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", dlAtOnLoad, false);
	else if (window.attachEvent)
		window.attachEvent("onload", dlAtOnLoad);
	else
		window.onload = dlAtOnLoad;
</script>
<?php } );

スクロール時にロードする記事はあったんですが、ロード完了時のほうが自分としては違和感がなかったので、このようにしました。

これで他の要素がすべて読み込まれてから広告が表示されるようになったかと思います。クリック率に変化があるかは分からないですが、UXを考えればこちらのほうがいいかな。