Google AdSenseが遅いせいでページ表示が遅くなる問題の対応策

(2018/04/08追記: この内容は規約違反らしいので参考にしないでください)

ベトナムから、っていうのが大きいんだろうけど、Google AdSenseが非常に重い場合がある。
これはAdSenseに限らずAnalyticsとかが重い場合もあるんだけど、Googleが仕込まれているせいでHTMLの受信は出来ているのに表示できないってパターンが意外とよくあんだよね。


今やってるテーマ指向ミニブログでも、開発環境にAdSense仕込んだら一時的に非常に重くなる場合があったので、ストレスを感じて対策した。
対策といってもほぼ完璧に対策してくれてる人がいたので、ここベースで。
http://p2b.jp/1217081338


元々こうなってたのを、

<script type="text/javascript">
google_ad_client = "ca-pub-5067037356613716";
google_ad_slot = "9643944686";
google_ad_width = 250;
google_ad_height = 250;
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

こう直す。

<script type="text/javascript">
$(function() {
	google_ad_client = "ca-pub-5067037356613716";
	google_ad_slot = "9643944686";
	google_ad_width = 250;
	google_ad_height = 250;
	google_backup = document.write;
	document.write = function(v) {
		google_content = v;
	}
	$.getScript("http://pagead2.googlesyndication.com/pagead/show_ads.js", function() {
		document.write = google_backup;
		$("#google-adsense").html(google_content);
		delete google_content;
		delete google_backup;
	});
});
</script>
<div id="google-adsense"></div>


参考にしたページの処理はscriptタグでの読み込みが依然として残っていたので、scriptの読み込み部分も移した。
これでadsenseを仕込むjavascriptの読み込み自体が遅くても、さしてページに影響出ないはず。
この環境はjQueryありなので、jQuery無い人はまあなんか頑張って書き換えてくれ。


対策したら大分違う。
Googleって多分あえて古いdocument.write使ってあらゆるブラウザ対応させてるんだと思うけど、古いせでいろいろ不都合がある。


この手のTipsが広がってAnalyticsやらAdSenseやらがあるサイトがスクリプト切らないと全滅、っていう俺がよく陥る事態が減ってくれるといいなぁ。

追記

Opera 12では、document.write上書きハックが通用しないことが判明。
いろいろ調べたけど、多分Operaだけ例外的にscriptで読ませないと無理。

<div id="google-adsense"></div>
<script type="text/javascript">
if (navigator.userAgent.toLowerCase().match(/opera/)) {
	google_ad_client = "ca-pub-5067037356613716";
	google_ad_slot = "9643944686";
	google_ad_width = 250;
	google_ad_height = 250;
	var script = document.createElement("script");
	script.src = "http://pagead2.googlesyndication.com/pagead/show_ads.js";
	document.getElementById("google-adsense").appendChild(script);
} else {
	$(function() {
		google_ad_client = "ca-pub-5067037356613716";
		google_ad_slot = "9643944686";
		google_ad_width = 250;
		google_ad_height = 250;
		google_backup = document.write;
		document.write = function(v) {
			google_content = v;
		}
		$.getScript("http://pagead2.googlesyndication.com/pagead/show_ads.js", function() {
			document.write = google_backup;
			$("#google-adsense").html(google_content);
			delete google_content;
			delete google_backup;
		});
	});
}
</script>


がっかり。
事情は知らないけど、Google AdSenseOperaの場合、なんらかの事情で強制的に同期モードでの読み込みになるらしくて、今回の処理はGoogle AdSenseを強制的に非同期モードにしてしまうためGoogleの同期用実装が上手く動かないんだろうと思われる。


同期モード・非同期モードはちょっと解説が中途半端で終わっている気がするけど、下記に多少情報がある。
http://blogs.yahoo.co.jp/ichiro_hiroshi/6479419.html
Operaの場合は、google_enable_asyncとかの情報も関係なく確実にshow_ads_impl.jsを返してくる。
さすがGoogle!俺達に出来ない事をってふざけんな。


ということで、強引にボクOperaじゃないよって話にすれば非同期モードにはなって読み込めるようになるけど、

<div id="google-adsense"></div>
<script type="text/javascript">
$(function() {
	google_ad_client = "ca-pub-5067037356613716";
	google_ad_slot = "9643944686";
	google_ad_width = 250;
	google_ad_height = 250;
	if ($.browser.opera) {
		google_ua_backup = navigator.userAgent;
		navigator.userAgent = "chrome";
	}
	google_backup = document.write;
	document.write = function(v) {
		google_content = v;
	}
	$.getScript("http://pagead2.googlesyndication.com/pagead/show_ads.js", function() {
		document.write = google_backup;
		if ($.browser.opera)
			navigator.userAgent = google_ua_backup;
		$("#google-adsense").html(google_content);
		delete google_content;
		delete google_backup;
	});
});
</script>

これはさすがに他のScriptへの影響が怖いなぁと。
これ以上はshow_ads.jsを解析しないとちょっと無理だし、解析したところでGoogleが変更したら終わるのでなんとも。
俺みたいにメインブラウザがOperaですよって人でない限りは、Operaの場合おとなしくdocument.write使う実装にした方がいいと思う。