JavaScript広告表示の非同期読み込みや遅延処理
公開日： 2015/02/13 JavaScript SEO WEB制作
触ってみて、これはページ全体の大きさ・サーバーの強弱から影響する速度評価ではなくて要素要素の記述や処理、設定を評価しているのだと知りました
『修正が必要』『修正の考慮』の部分で第一候補に挙がってくるのは、多くの人が『スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する』だと思う
▼今まで
▼今回javascript部分をクリアした場合
今まで見て見ぬふりで過ごしてきたけど、大なり小なり検索インデックスの評価にも影響するのであれば、いつかは考えなければいけない部分ですね
CSSの方はなんとかなりそうだったので後回し、問題はJavaScriptです
特にjQuery等の外部読み込みは使っていないので僕のサイト達の場合、殆どがJavaScriptで書かれたWEB広告です
Google AdSenseには非同期広告コードが導入されており深く悩むことは少なさそうなのですが、nend・アイモバイル・忍者Admaxなどのモバイル広告は非同期読み込みや読み込み遅延処理で悩む必要がありそうです
script要素のasync属性・defer属性
色々Googleさんで調べていると、script要素のasync属性・defer属性で非同期処理するというのがPageSpeed Insights - レンダリングを妨げる JavaScript を削除するでも推奨される解決方法として記載されており、方法も簡単そうなので試してみた
広告コードに直接書いてしまうと、広告コードの改変という規約違反になってしまうので各社に問い合わせなければいけませんが、少し試して上手くいきそうならの話
結果、ダメっぽいです
非同期・遅延処理という事で広告表示回数が落ちる事は予想していましたが、1/8程度にまで落ちてしまいました
持ってるandroid端末で確認したところ問題なく広告が表示されていたので期待しましたがandroid2.1とかで古い端末なのでおそらくはasync属性・defer属性ともに未対応、普通に表示されていただけだと…
あちらこちらで処理するスプリプトにdocument.write()が含まれている場合にはasync属性・defer属性は使えないと書かれていたので、それなのかな
body終了タグ手前で読み込んでinnerHTMLで差し込む
ページの最後に広告コードを読み込んでjavascriptのinnerHTMLで指定のidに差し込む（書き換える？）方法です
innerHTMLで書き換える部分にスクリプトをそのまま記述して処理は出来ないようで、スクリプトと判断されないように編集する必要がありdefer属性も付け加える必要があるとの事
innerHTMLでscriptタグを出力する話
http://exe.tyo.ro/2007/01/post_2.html
script要素を動的に実行する
http://webkatu.com/clonescript/
JavaScriptを動的に書き出す
処理は書いたのですがdefer属性という事で試してもなぁーって事で試さずに捨てた＞＜
iframeで非同期？っぽくする
別ページをHTML内に表示するiframe
広告コードを別ページにした場合のリファラがどうなるのかとか問題を別ページに持っていくだけな感じ＆PageSpeed Insightsの点数が増えても検索ボットの評価が微妙な気がして後回しにしていましたが作ってみました
iframeは殆ど使った事ありませんでしたが、全サイト修正となるとこれはこれで手間かかりますね…
今まで
<div class ="ad">広告コード</div>
iframe
<div class ="ad"><iframe class="iframe" srcdoc='広告コードとHTML' src="ad.php?device=sp&ad=1" scrolling="no" marginwidth="0" marginheight="0"></iframe></div>
古めの端末は未対応もあるという事を知れたので良しとしますか^^
結局、srcdoc・src共に記述
HTML5から非推奨となっている要素も未対応ブラウザの為に記述しました
srcdocはDOCTYPEやheadは省略可能とのことですがsrcdoc要素に書かれたHTMLには親ページのCSSは反映されませんでした（結局のところ、iframeだから当然なのかな）
バナー広告の高さの違いや取得、センタリング
広告表示ベージの処理とか、なんとかクリアできました
この記事のアクセス数が多めだったらまた書きます
現在、この方法は広告レポートで影響を検証中です
今のところiframeで表示している広告と元々の方法で表示している広告にレーポトに差はなさそうですが、どうですかね
他の方法も考える
javascriptのsetTimeout()とかsetInterval()とかで広告スクリプト自体の読み込みを後回しにする
この方法を試してみたいと思うのですが先にコンテンツのレンダリングが完了している場合、広告表示は反映されるのか不安
結局innerHTMLで－、とかになるのかな＞＜
htmlはphpで出力してるのでphpの中のHTML記述の中のJavaScriptの中のJavaScriptとかクオーテーションで軽く死ねまする
ああぁああああぁあああああ
ググってもググってもJavaScriptの非同期・遅延処理の情報は多いけど、クリック広告を対象とした話が出てこなくて泣ける
皆さんはどうやってるのだろう…
0 件のコメント :
コメントを投稿