Your SlideShare is downloading. ×
0
HTML5 NIGHT
「08. Web × パフォーマンス技術」
パフォーマンス部 部長
竹洞 陽一郎
2014年6月5日
html5j パフォーマンス部サイト
計測条件
• 対象ブラウザ
• IE 9.0 (GPU Accelerator On)
• Firefox 14.0.1 (SPDY On)
• Chrome 31.0.1650.63 (SPDY On)
• 計測ISP
• NTT
• KDD...
散布図 ― Scatter Plot (6/7 〜 6/14)
パフォーマンス平均(6/7〜6/14)
可用性平均(6/7 〜 6/14)
IEでのエラー
統計データ要約
平均 標準偏差 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 ...
箱ひげ図 ― Boxplot chart
IE9 (SPDYなし)
Firefox14.0.1
(SPDYあり)
Chrome31.0.1650.63
(SPDYあり)
Object Trending - IE Facebook
Twitter
Google+Facebook
IEで遅い(19.075秒)事例 DNS Lookup
18秒
緑の線はFirst Paint、赤い線はTime to Interactive
Object Trending - Firefox Facebook
Facebook
Firefoxで遅い(42.491秒)事例
Facebook
First Byte Download
41.8秒
緑の線はFirst Paint、赤い線はTime to Interactive
Object Trending - Chrome
Twitter
Hatena
Chromeで遅い(33.444秒)事例
緑の線はFirst Paint、赤い線はTime to Interactive
はてな
First Byte Download
30.6秒
Connection View - IE
Total number of resources: 32
Total number of domains: 17
Total number of IP addresses: 14
Total numb...
Connection View - Firefox
Total number of resources: 45
Total number of domains: 22
Total number of IP addresses: 18
Total...
Connection View - Chrome
Total number of resources: 33
Total number of domains: 17
Total number of IP addresses: 15
Total ...
スループット、ドメイン数、IP数、
コネクション数の違い
Firefox
Chrome
Internet Explorer
帯域はそれほど使っていない
• デスクトップブラウザであっても、実質、250KB/秒
(2Mbps)ぐらいしか使っていない。
• TCP/IP 3way handshakeの影響
• TCP Slow Startの影響
• 云わば、通信の「Co...
SNSのボタンを張り付けると…
• あっという間に、ドメイン数が増える
• ドメイン数が増えると、SPDYの利点が失われる
• HTTP2.0の仕様策定について、最近、SPDY反対派
が増え始める
IEでのドメイン増加数~16
• Facebook – 6 domains
• www.facebook.com
• www.facebook.com
• connect.facebook.net
• s-static.ak.facebook....
Firefoxでのドメイン増加数~21
• Facebook – 7 domains
• www.facebook.com
• www.facebook.com
• connect.facebook.net
• s-static.ak.face...
Chromeでのドメイン増加数~16
• Facebook – 6 domains
• www.facebook.com
• www.facebook.com
• connect.facebook.net
• s-static.ak.faceb...
コンサルタント第二の法則
一見どう見えようとも、それは常に人の問題である。
― G. M. ワインバーグ
「技術」ではなく、「人」の問題
• 実際は、技術的には解決可能であっても、人の問
題で解決できない事の方が多い。
• パフォーマンス部のサイトでは、わざとSNSのボタンを
貼って、3rd Party Contentsの影響を計測。
• 皆さんの...
データを取得し、現実と向き合おう。
制約がどこにあるか、その存在を知ろう。
制約があるからこそ、知恵が必要。
ヴィルトの法則
ソフトウェアは、
ハードウェアが高速化するより
急速に低速化する
Daivid Mayの法則
ソフトウェアの効率は18か月で半減し、
ムーアの法則を相殺する
エンジニアの使命
• ハードウェアの進化、通信環境の進化を当てにし
て、パフォーマンス上の制約が将来消えるなどと
思ってはいけない。
• 我々が、ハードウェアの進化を相殺してどうする?
• 我々は、制約のある世界で知恵を絞るからこそ、
知識労働...
ご静聴ありがとうございました。
Upcoming SlideShare
Loading in...5
×

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

4,006

Published on

Published in: Internet, Technology, Business
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,006
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
11
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "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. ご静聴ありがとうございました。
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×