ページレンダリングを妨げない広告挿入手法に関する覚書

多分わかる人にはわかると思うんだけど、わかんない人にはわかんないと思うので、誰かわかりやすく書き直してくれると助かるんだけどとりあえず書いておく。

例えば、GoogleAdsenseなんかで広告を挿入するには、外部ドメインに置いたJavaScriptを読み込んで使う。セキュリティ上の問題があるにもかかわらず外部ドメインのJavaScriptをそのドメインにあるかのように取り込めるのは、多分、そういう需要があるからだろう。
んで、そういうスクリプトの構成というのは大抵、scriptタグを挿入した位置に広告がdocument.writeを使って書き出される、というものだ。

しかしこの方法には問題があって、それはscriptがロードされて実行が完了するまでページのレンダリングが止まる、ということだ。jsファイルを受信するまでにかかる時間と、解釈と実行、document.writeでブラウザに出力する、この間ブラウザはscriptタグを挿入した位置でHTMLをぶった切って表示できる範囲まで表示する、という動作をする。

例えば
-ヘッダ
-広告
-本文

というような順番でページを構成した場合、広告JavaScriptがロードされて、実行完了するまで5秒かかったら、本文が表示されないまま5秒間ユーザーは待たされることになる。

もし、
-ヘッダ
-本文
-サイドバー

というような後置型サイドバーの構成で、サイドバーに広告を入れる場合は、本文が先に表示されるので、ユーザーを待たせずに本文を読むことが出来る。広告JavaScriptのロードに5秒かかっても、とりあえず本文を先に読むことが出来る。

という違いがある。

GoogleAdsenseなんかをページに挟んでいる場合、その場所で若干レンダリングがもたつくのを体感したことのある人は多いはず、多いと思う。これはブラウザの正常な挙動である。scriptの実行が完了するまでページ全体がどういう構成になるのかわからないのだから仕方ない。

GoogleAdsenseの広告挿入スクリプトは、これだ。
http://pagead2.googlesyndication.com/pagead/show_ads.js

Googleの取っている手法は
-jsファイルは動的に生成しないで、共通のコードを使う。
-本体HTML側で指定したパラメータに応じてIFRAMEを生成する

つまり固定のJavaScriptで、動的に生成されたIFRAMEを埋め込んでいるわけだ。jsファイルに対してはブラウザのキャッシュが最大限利くようになる。とりあえず最速でjsファイルは渡しておいて、動的に生成されたIFRAMEが表示される。IFRAMEの中の表示が多少遅れても、ページのレンダリングには影響を与えずにすむ。
これはJavaScript自体を動的に生成するよりも、若干スマートである。JavaScript自体を動的に生成してしまうとブラウザのキャッシュが利かないのでページ毎に毎回ダウンロードする必要がある。

しかし、いずれにせよshow_ads.jsがキャッシュされていなかった場合は、jsファイルをダウンロードするまでに若干の時間がかかることになる。またIFRAMEを挿入するためにページのレンダリングはそこでいったん止まる。Googleのサーバーはレスポンスが速いので、気にしている人は少ないと思うけれど、もしこれが0.1秒でなくて1秒~2秒程度の遅延があるなら、明確に広告挿入はユーザーのストレスと結びつく。

これはテーブルレイアウトだとレンダリングが遅いとか、そういうのと同系統の問題なんだけど、あんまり触れられていないような気がする。外部サーバーに置いてある画像を直リンクで表示する場合は、サーバーのレスポンスが遅くてもとりあえずページ全体のレンダリングは出来るようになっている。しかし、外部サーバーに置いてあるスクリプトを取り込む場合、一番レスポンスが遅いサーバーにページの描画全体が引きずられることになる。

しかし、このページのレンダリングが遅れるという現象は、コードの書き方を少し工夫すれば解消することが出来る。

----
どうすればいいのか、というと。

広告表示用の領域を、あらかじめ固定の幅と高さで作っておいてやり、scriptのロードが完了したらその領域をスワップする、という方法であればjsファイルのロードが遅れたとしてもページのレンダリングを妨げることは無い。

例えば俺だったら

本体HTMLの側で
ADS_TARGET_ID = "任意のID"

広告JavaScriptの側で
document.getElementById(ADS_TARGET_ID).innerHTML = 広告HTML

というような作りにするだろう。
innerHTMLじゃなくてappendChildでもいいけど。
id=ADS_TARGET_IDの領域はスタイルシートを使ってあらかじめ表示される広告のサイズに合わせておけば、不要な再描画を避けることが出来るはずだ。
script要素にはdefer属性を指定しておく。defer属性が付いていれば、スクリプトのロードを待たずにページをレンダリングすることが出来る。

document.writeは確かにscriptの挿入位置が広告挿入位置でわかりやすいけれど、サーバーのレスポンスが遅ければ広告が挿入されているページの表示全てに支障をきたすので、そろそろやめにしてもいいんじゃないの、っていう。
これは広告だけの話ではなくて、例えばJavaScriptを使ってRSSのヘッドラインを貼り付けるようなサービスなんかでも同じことが言える。

まあ、そういう提案なんだけども、
具体的になんか作らないと説得力無いので、続く。


WriteBacks

大変参考になります

Posted by toka at 2005/07/16 (Sat) 09:15:52

愛してる

Posted by test at 2005/07/16 (Sat) 10:01:59

愛などいらぬ

Posted by mala at 2005/07/16 (Sat) 10:06:14

document.write()でページの描画が遅くなる

ページレンダリングを妨げない広告挿入手法に関する覚書 しかしこの方法には問題があ...

Posted by ベイエリア情報局 at 2005/07/29 (Fri) 11:28:41

Posted by at 2005/08/01 (Mon) 15:40:39

GoogleMapのスクリプトがうまく読めない・・

GoogleMapのAPIを使ってよくあるサンプルのやり方じゃないMapを読み込...

Posted by wakasa.org at 2006/04/20 (Thu) 13:07:08

Bradyn

piattaforma a pantografo listino prezzo camper usato http://bindo.info/guestbook/30.html
teatro genova peluche winnie de pooh disney http://salvadore.info/mondo/32.html
annuncio sadomaso gratis bavette alle acciuga http://girolamo.info/hobby/56.html
eletrico motore assicurazione mornico al serio http://girolamo.info/forum/54.html
pedana gazebo imparare spagnolo spagna http://cenni.info/sogni/60.html
dizionario spagnolo on line scuola specializzazione verona http://miniato.info/oroscopo/80.html
quotazione enel hotel 1 stella agrigento http://lazzero.info/sogni/17.html
case terreno annuncio teatro colosseo roma http://bindo.info/mondo/31.html
c c n l chimici albergo 3 stella pisa http://cenni.info/notizie/21.html
anatomia piede jeans take two connors http://salvadore.info/agenda/53.html
servizi3b inps it estrattoconto servizicittadino html ohh dio http://bindo.info/hobby/8.html
perline ambra orecchino socket 478 processore http://miniato.info/vacanza/49.html

Posted by Amos at 2006/11/19 (Sun) 11:01:21

Edmund

http://abbigliamento.nicolabianco.com/indicatore-efficacia.html [url]http://floricoltura.nicolababetto.net/creazione-invio-campagna.html[/url] cadamuro design piumino letto
http://loria.nicolabianco.com/fiera-benessere-milano.html [url]http://durante.nicolababetto.net/hotel-firenze-nova.html[/url] disano it web design vibo valentia
http://runner.nicolababetto.net/agriturismo-marano-lagunare.html [url]http://pulita.nicolababetto.net/forno-microonde-incasso.html[/url] ragazzo porto vecchio dlf bologna
http://kingston.nicolababetto.net/daniel-degli-onofri.html [url]http://outlet.nicolababetto.net/intimacy-intimita.html[/url] reviface effetto chitarra acustica
http://supermotard.nicolabianco.com/attrici-nude-gratis.html [url]http://curon.nicolababetto.net/centurione.html[/url] grondaia in rame festa 8 marzo fiore
http://pulita.nicolababetto.net/forno-legna-sardegna.html [url]http://abbeveratoi.nicolabianco.com/il-gatto-e.html[/url] canna fumaria acciaio inox rovagnati
http://aprire.nicolababetto.net/colonna-sonora-di.html [url]http://clubs.nicolababetto.net/fiaba-e-favola.html[/url] milan club donna incinta sesso
http://baratti.nicolababetto.net/dps.html [url]http://novalesa.nicolabianco.com/drughi-arditi-juventus.html[/url] alloggi villa toscana corsi formazione finanza
http://pordenone.nicolababetto.net/agriturismo-este.html [url]http://ritrovano.nicolababetto.net/d-m-agosto.html[/url] suoneria juanes stoffa cotone

Posted by Gilberto at 2006/11/20 (Mon) 13:21:59

annuncio lavoro

Blog Records:lyrique isol辿 de chanson de gar巽on de losComments...

Posted by annuncio lavoro at 2006/11/27 (Mon) 19:41:25

annuncio lavoro

Blog Records:lyrique isol辿 de chanson de gar巽on de losComments...

Posted by annuncio lavoro at 2006/11/27 (Mon) 19:41:33

副収入、小遣い、内職、サイドビジネス総合情報

副収入、小遣い、内職、サイドビジネス総合情報

Posted by 副収入、小遣い、内職、サイドビジネス総合情報 at 2006/12/30 (Sat) 06:08:08

サイドビジネス総合情報、副収入、お小遣い、内職、副業収入

サイドビジネス総合情報、副収入、お小遣い、内職、副業収入

Posted by サイドビジネス総合情報、副収入、お小遣い、内職、副業収入 at 2006/12/30 (Sat) 20:12:52

副収入のすべて

いわゆる副収入、その実態を暴き、有益な情報をまとめた

Posted by 副収入総合情報 at 2007/01/06 (Sat) 04:58:02

Google Adsense:アドセンスを後から表示させる貼りつけるdocument.lazy_writer

Google Adsense を、ちょっと変わった位置に貼り付けたくて調べていたら、特定の場所に表示してくれるJavaScript があるようだったので、調べてみました。 document.lazy_writer というもの。これを使うと、Google Adsense の表示位置に、あらかじめ何か適当に表示しておき、ページの描画が終わってから、Adsenseを挿入してくれるよう。 しかし、作者のページには解説が少ないので、少し使い方を調べてみました。次のように使うようです。 1.lazy_writer.jsを どこかに設定。  delay : 1000という部分は、遅延時間なので変更可能。 2.</html>の後ろに、次のスクリプトを書く。 var adsense_url = 'http://pagead2.googlesyndication.com/pagead/show_ads.js';document.lazy_writer(adsense_url, function(str){ var id = "adsense_" + this.script_count; document.getElementById(id).innerHTML = str;}, {delay : 1000});実際のAdSense広告1のスクリプトタグをココに貼り付け。実際のAdSense広告2のスクリプトタグをココに貼り付け。  3.今までアドセンスを設置して...

Posted by うはうはアフィリエイト: ブログとサイト作り at 2009/11/23 (Mon) 07:58:45
TrackBack ping me at
http://la.ma.la/blog/diary_200507160912.trackback
Post a comment

writeback message: Ready to post a comment.







spam yoke. nanimo ireruna.