Javascriptファイルを後で読ませる設定 – あだんマーケティング(株)

http://toushin.konjiki.jp/

上記のサイトは、ページスピードインサイトの点数が極めて悪く、いろいろ調べてみるとアドセンスを後で読ませる設定にすると点数が上がることが分かった。

【参考サイト】
https://nesla.info/pagespeed-insight-adsense-tag

ただ、参考サイトではphpでスマホタブレット向けとパソコン向けの設定を分けていたので、javascriptで設定を分けてみた。

【参考サイト】
https://www.webdlab.com/labs/style/

	<!--アドセンスファイル最後に読み込み-->
	<script>
		if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0) {
			// スマートフォン・タブレット向けの記述
			//<![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)
				//]]>
		} else {
		</script>
		<script
			// PC向けの記述
			async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
		}
		</script>

ただ、パソコン向けとスマホタブレット向けで分けて動いたものの、ソースがとてもかっこ悪い。if文の中で、scriptを分けるとは。調べてみるとhtmlのbody要素で読み込ませる方法があることが分かった。

【参考サイト】
https://qiita.com/a01sa01to/items/fc6bf8bb5b1cb0db01cf

あと、createElementで作ったscriptタグのasyncプロパティは、デフォルトでfalseになっていることも分かった。

【参考サイト】
http://var.blog.jp/archives/54417101.html

パソコン向けアドセンスは、bodyの最後で読み込ませる設定。
スマホタブレット向けアドセンスは、アドセンスが表示されるところまでスクロールされたら読み込ませる設定にした。

実際のソース

	<!--アドセンスファイル最後に読み込み-->
	<script>
		if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0) {
			// スマートフォン・タブレット向けの記述
			//<![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)
			//]]>
		} else {
			// PC向けの記述
			var pcad = document.createElement('script');
			pcad.type = 'text/javascript';
			pcad.async = true;
			pcad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
			document.body.appendChild(pcad);
		}
	</script>

そして、ページスピードインサイトの点数は下記になった。

モバイル 23点から65点へ。
パソコン 67点から74点へ。