みなさんこんにちは。
サイバーエージェントでアメーバブログを担当している山田と申します。
今日は最近気になっているASWIFTについて書いてみようと思います。
Velocity2011については弊社エンジニアも参加させていただき、レポートをあげていますのでご覧ください。
ASWIFTが考案された背景としてAdSenseのスクリプトファイルであるshow_ads.jsを改修し、ページ全体の表示速度を改善することが意図されているようです。
Steve Soudersの提唱する<script>の配置のベストプラクティスは</body>の直前であり、これはかなり一般的になりました。しかし、show_ads.jsはDOM上の任意のポイントに配置された<script>からロードされ、そのポイントに広告が表示されます。これはDOM操作にそれほど詳しくないサイトオーナーも直感的に出力位置を決定できるというメリットがある一方、ページ途中での<script>のロード・実行によるブロッキングが発生してしまいます。これについては古くから議論され、改修が試みられていますが、ASWIFTはこの問題に対するグーグルの最新のソリューションという位置づけになるようです。
<iframe>内に<script>を非同期に書きこむ手法、"Asynchronous Script Written into IFrame Tag"です。発表によるとASWIFTによりブロッキング時間を短縮することに成功したということらしいです。
実験環境は以下のとおりです。
OS : WinowsXP
CPU : core2 duo e6850 3.0GHz
メモリ : 1.5G
ブラウザ : FireFox 5.0
高負荷な外部スクリプトを<script>で10回ロードし、ブロッキングの様子を観察します。
このスクリプトにはサーバーサイドで1秒間のレイテンシーを与えています。
結果
http://stat100.ameba.jp/1px/aswift /test1_1.html （通常）
画面上でもレンダリングが止まってしまいます。
http://stat100.ameba.jp/1px/aswift/test1_2.html (ASWIFT)
以上になります。
長文にお付き合いいただきありがとうございます。
サイバーエージェントでアメーバブログを担当している山田と申します。
今日は最近気になっているASWIFTについて書いてみようと思います。
ASWIFTとGoogle AdSense
ASWIFTとはVelocity2010でグーグルのArvind JainとMichael Kleberによって発表された、JavaScriptファイルのロード方法で、Google AdSenseで利用されています。Velocity2011については弊社エンジニアも参加させていただき、レポートをあげていますのでご覧ください。
ASWIFTが考案された背景としてAdSenseのスクリプトファイルであるshow_ads.jsを改修し、ページ全体の表示速度を改善することが意図されているようです。
Steve Soudersの提唱する<script>の配置のベストプラクティスは</body>の直前であり、これはかなり一般的になりました。しかし、show_ads.jsはDOM上の任意のポイントに配置された<script>からロードされ、そのポイントに広告が表示されます。これはDOM操作にそれほど詳しくないサイトオーナーも直感的に出力位置を決定できるというメリットがある一方、ページ途中での<script>のロード・実行によるブロッキングが発生してしまいます。これについては古くから議論され、改修が試みられていますが、ASWIFTはこの問題に対するグーグルの最新のソリューションという位置づけになるようです。
ASWIFTとはどのような技術か？
Velocityの発表をさらに要約すると- show_ads.jsからメインのロジックを切り離し、ファイルサイズを小さくする
- show_ads.jsはsame-domainな<iframe> を生成する
- <iframe>の contentWindow.documentで<script>をdocument.writeで生成する。
- <script>がメインのロジックを格納する show_ads_impl.jsをロードする
<iframe>内に<script>を非同期に書きこむ手法、"Asynchronous Script Written into IFrame Tag"です。発表によるとASWIFTによりブロッキング時間を短縮することに成功したということらしいです。
ASWIFTの利用の実態
試しにameblo.jpで利用させていただいているAdSenseを手元のFirebugで分析してみたところ、どうもshow_ads.jsとshow_ads_impl.jsの<script>が並んで出力されているようで、same-domainな<iframe>も見当たりません。しかし、Google AdSense成功事例に掲載されているサイトをいくつか拝見したところ、id="aswift_0"という<iframe>が確かに存在しています。どうもASWIFTが利用されるサイトとそうでないサイトがあるようです。ASWIFTの効果
それでは実際にASWIFTを使って外部スクリプトを読み込んでみます。実験環境は以下のとおりです。
OS : WinowsXP
CPU : core2 duo e6850 3.0GHz
メモリ : 1.5G
ブラウザ : FireFox 5.0
高負荷な外部スクリプトを<script>で10回ロードし、ブロッキングの様子を観察します。
このスクリプトにはサーバーサイドで1秒間のレイテンシーを与えています。
結果
http://stat100.ameba.jp/1px/aswift /test1_1.html （通常）
画面上でもレンダリングが止まってしまいます。
http://stat100.ameba.jp/1px/aswift/test1_2.html (ASWIFT)
ASWIFT をどう使えばいいのか？
ASWIFTはページ途中の<script>タグにブロッキングさせないためのソリューションなので、やはり広告配信システムやブログパーツなど自社以外のサイトからロードされることを想定したスクリプトのロードに適していそうです。「+1」や「like」などの共有ボタン系もいいかもしれません。ただ、メインロジックが完了するまで window.onloadが発行されない、インジケーターが回り続けるなど課題もあるので、スクリプト自体の一般的なチューニングはやはり必要です。以上になります。
長文にお付き合いいただきありがとうございます。