広告クリエイティブにおける技術紹介② ~表示速度~ (担当:島田賢悟)

○Web広告における表示速度の影響

広告クリエイティブの表示速度は、広告効果に直結する部分です。

例えば、スマートフォンサイトのヘッダー部分に広告が表示されているのをよく見かけるかと思います。
基本的にサイト閲覧者は、ヘッダー部分ではなくコンテンツ部分に興味があるので、ヘッダー部分はすぐに読み飛ばされてしまうものです。(私も私生活では気にも留めていないことが多いです。)

しかしながら広告である以上、まずサイト閲覧者の目に触れさせるということは大前提です。

上記理由から、広告クリエイティブにおいていかに速く表示するかは、非常に重要な要因になってくるわけです。

今回はJavascriptのコード内だけで行える速度改善について、その一端を解説しようと思います。

○例1

<div id="hitokuse" class="hitokuse">ヒトクセ</div>
<div></div>
<div></div>
<div></div>

例えば、以下の2つではどちらが「速い」コードでしょうか。

JavaScript (※見やすい様に今回はJQueryを使用しています。)

for(var i=0; i<10000; i++) { $("#hitokuse").css("color", "red"); } …①
for(var i=0; i<10000; i++) { $(".hitokuse").css("color", "red"); } …②

ちなみに結果は以下の様になりました。
82.4ms
154.7ms

基本的にclass指定よりもid指定の方が速度的に有利になります。
ですので他に考慮する点がない場合には、id指定に統一することが基本的な記法となります。

id指定の場合、id名とオブジェクトが1:1対応していることが前提です。
それに対し、class指定の場合には同クラス名のオブジェクトが複数存在する可能性があるので、
一度オブジェクトを見つけた後も全体を参照しなければならないという点からも、この速度差は割と感覚かと思います。

では、もう1つ例を出してみましょう。

○例2

<ul>
 <li>ヒトクセ</li>
 <li></li>
 <li></li>
</ul>
<div></div>
<div></div>
<div></div>

上記の「ヒトクセ」という部分に対して、複数回動作等を指定する場合には、予めオブジェクトを変数で指定しておいた方がよいでしょう(下記③がその記法になります)。

var li_obj = $("li").first();
for(var i=0; i<10000; i++) { li_obj.css("color", "red"); };          …③
for(var i=0; i<10000; i++) { $("li").first().css("color", "red"); }; …④

実際計測してみたところ、以下の様にほぼ2倍程度差が出ました。
48.4ms
87.5ms

この速度差の理由は、DOMツリーを参照する回数の差によるものです。
③では一度の参照で済ませていますが、④の場合はループの回数、DOMツリーを参照してます。
その結果、読み込みの回数分、速度劣化してしまいます。

結論としては、複数回操作するオブジェクトは変数指定をするというのが基本的な記法となります。

○最後に

いかがでしたでしょうか。
言われてみれば当たり前な点かもしれませんが、意識していないと選別せずに記述してしまう部分かと思います。
局所で見れば微差かもしれませんが、細かい積み重ねが広告自体が閲覧されるかどうかにも繋がってきます。
上記二例の記法に関しては、動作的なデメリットは基本的にありませんので、
広告クリエイティブに限らず、参考にしていただけると幸いです。

また、広告クリエイティブの配信に関しては、ファイル構成やキャッシング等、速度改善が行うことができる部分は多々ありますので、
そちらについても今後お話できればと思っております。


ヒトクセの各種サービスお問い合わせは
こちらからお気軽にどうぞ。
 
お問い合わせフォーム