Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 NIGHT 08. Web × パフォーマンス技術

5,165 views

Published on

Published in: Internet, Technology, Business
  • Be the first to comment

HTML5 NIGHT 08. Web × パフォーマンス技術

  1. 1. HTML5 NIGHT 「08. Web × パフォーマンス技術」 パフォーマンス部 部長 竹洞 陽一郎 2014年6月5日
  2. 2. html5j パフォーマンス部サイト
  3. 3. 計測条件 • 対象ブラウザ • IE 9.0 (GPU Accelerator On) • Firefox 14.0.1 (SPDY On) • Chrome 31.0.1650.63 (SPDY On) • 計測ISP • NTT • KDDI • 計測間隔 • 15分に1回、しかし、間隔はランダム化されているので、 きっかり15分ではない。
  4. 4. 散布図 ― Scatter Plot (6/7 〜 6/14)
  5. 5. パフォーマンス平均(6/7〜6/14)
  6. 6. 可用性平均(6/7 〜 6/14)
  7. 7. IEでのエラー
  8. 8. 統計データ要約 平均 標準偏差 IQR 0% 25% 50% 75% 100% サンプル数 Chrome 1.695211 1.575961 0.367 0.966 1.204 1.3445 1.571 31.532 1148 Firefox 1.970859 1.613145 0.60525 0.011 1.44575 1.6415 2.051 42.229 932 Internet Explorer 1.651217 1.259629 0.5125 0.949 1.18125 1.371 1.69375 23.071 1338 Firefoxユーザーは、25%の確率で、ページのダウンロードに、 2秒以上かかる
  9. 9. 箱ひげ図 ― Boxplot chart IE9 (SPDYなし) Firefox14.0.1 (SPDYあり) Chrome31.0.1650.63 (SPDYあり)
  10. 10. Object Trending - IE Facebook Twitter Google+Facebook
  11. 11. IEで遅い(19.075秒)事例 DNS Lookup 18秒 緑の線はFirst Paint、赤い線はTime to Interactive
  12. 12. Object Trending - Firefox Facebook Facebook
  13. 13. Firefoxで遅い(42.491秒)事例 Facebook First Byte Download 41.8秒 緑の線はFirst Paint、赤い線はTime to Interactive
  14. 14. Object Trending - Chrome Twitter Hatena
  15. 15. Chromeで遅い(33.444秒)事例 緑の線はFirst Paint、赤い線はTime to Interactive はてな First Byte Download 30.6秒
  16. 16. Connection View - IE Total number of resources: 32 Total number of domains: 17 Total number of IP addresses: 14 Total number of connections: 24 余分なコネクション数=コネクション数-ドメイン数 24-17=7
  17. 17. Connection View - Firefox Total number of resources: 45 Total number of domains: 22 Total number of IP addresses: 18 Total number of connections: 30 余分なコネクション数=コネクション数-ドメイン数 30-22=8
  18. 18. Connection View - Chrome Total number of resources: 33 Total number of domains: 17 Total number of IP addresses: 15 Total number of connections: 20 余分なコネクション数=コネクション数-ドメイン数 20-17=3
  19. 19. スループット、ドメイン数、IP数、 コネクション数の違い Firefox Chrome Internet Explorer
  20. 20. 帯域はそれほど使っていない • デスクトップブラウザであっても、実質、250KB/秒 (2Mbps)ぐらいしか使っていない。 • TCP/IP 3way handshakeの影響 • TCP Slow Startの影響 • 云わば、通信の「Context Switch」のオーバーヘッド
  21. 21. SNSのボタンを張り付けると… • あっという間に、ドメイン数が増える • ドメイン数が増えると、SPDYの利点が失われる • HTTP2.0の仕様策定について、最近、SPDY反対派 が増え始める
  22. 22. IEでのドメイン増加数~16 • Facebook – 6 domains • www.facebook.com • www.facebook.com • connect.facebook.net • s-static.ak.facebook.com • static.ak.facebook.com • static.ak.fbcdn.net • Twitter – 3 domains • twitter.com • cdn.api.twitter.com • platform.twitter.com • Google+ – 4 domains • accounts.google.com • apis.google.com • oauth.googleusercontent.co m • ssl.gstatic.com • はてな – 3 domains • b.st-hatena.com • cdn-ak.b.st-hatena.com • cdn.api.b.hatena.ne.jp 赤字は、HTTPSでの配信
  23. 23. Firefoxでのドメイン増加数~21 • Facebook – 7 domains • www.facebook.com • www.facebook.com • connect.facebook.net • s-static.ak.facebook.com • static.ak.facebook.com • static.ak.fbcdn.net • fbstatic-a.akamaihd.net • Twitter – 3 domains • twitter.com • cdn.api.twitter.com • platform.twitter.com • Google+ – 5 domains • accounts.google.com • apis.google.com • oauth.googleusercontent.com • ssl.gstatic.com • clients1.google.com • はてな – 3 domains • b.st-hatena.com • cdn-ak.b.st-hatena.com • cdn.api.b.hatena.ne.jp • その他 – 3 domains • evsecure-ocsp.verisign.com • gtglobal-ocsp.geotrust.com • ocsp.digicert.com 赤字は、HTTPSでの配信
  24. 24. Chromeでのドメイン増加数~16 • Facebook – 6 domains • www.facebook.com • www.facebook.com • connect.facebook.net • s-static.ak.facebook.com • static.ak.facebook.com • fbstatic-a.akamaihd.net • Twitter – 3 domains • twitter.com • cdn.api.twitter.com • platform.twitter.com • Google+ – 4 domains • accounts.google.com • apis.google.com • oauth.googleusercontent.com • ssl.gstatic.com • はてな – 3 domains • b.st-hatena.com • cdn-ak.b.st-hatena.com • cdn.api.b.hatena.ne.jp 赤字は、HTTPSでの配信
  25. 25. コンサルタント第二の法則 一見どう見えようとも、それは常に人の問題である。 ― G. M. ワインバーグ
  26. 26. 「技術」ではなく、「人」の問題 • 実際は、技術的には解決可能であっても、人の問 題で解決できない事の方が多い。 • パフォーマンス部のサイトでは、わざとSNSのボタンを 貼って、3rd Party Contentsの影響を計測。 • 皆さんのサイトから、SNSのボタンを外せるのか? • 人の意思決定が絡む問題 • 技術的にしろ、ビジネス的にしろ「制約」があるから こそ、人は考える。 • 日本のWebパフォーマンスの遅延の問題の原因 • 日本のインターネット環境を過信した幻想が生み出した「通信 速度の制約の無い世界」 • 「見える化しない慣習」
  27. 27. データを取得し、現実と向き合おう。 制約がどこにあるか、その存在を知ろう。 制約があるからこそ、知恵が必要。
  28. 28. ヴィルトの法則 ソフトウェアは、 ハードウェアが高速化するより 急速に低速化する
  29. 29. Daivid Mayの法則 ソフトウェアの効率は18か月で半減し、 ムーアの法則を相殺する
  30. 30. エンジニアの使命 • ハードウェアの進化、通信環境の進化を当てにし て、パフォーマンス上の制約が将来消えるなどと 思ってはいけない。 • 我々が、ハードウェアの進化を相殺してどうする? • 我々は、制約のある世界で知恵を絞るからこそ、 知識労働者としてのエンジニアなのだ。
  31. 31. ご静聴ありがとうございました。

×