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 AdSenseはOperaの場合、なんらかの事情で強制的に同期モードでの読み込みになるらしくて、今回の処理は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使う実装にした方がいいと思う。