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.

html5j パフォーマンス部第一回勉強会 Webパフォーマンス事始め

2,434 views

Published on

html5j パフォーマンス部 第一回勉強会の講演資料です。パフォーマンス計測の基本知識と現状について説明しました。動画は、http://www.youtube.com/watch?v=KPYSotZCPfs からご覧いただけます。

Published in: Internet
  • Be the first to comment

html5j パフォーマンス部第一回勉強会 Webパフォーマンス事始め

  1. 1. html5j  パフォーマンス部   第一回勉強会     「Webパフォーマンス事始め」 パフォーマンス部 部長   竹洞 陽一郎   2014年5月8日
  2. 2. 日本の   Web・モバイルサイト   パフォーマンスの現状 数値で把握する
  3. 3. 日本のデスクトップサイトTop10 •  TOPS  OF  2013:  DIGITAL  IN  JAPAN   ~ニールセン2013年 日本のインターネットサービ ス訪問者数ランキングを発表~ h7p://www.netraAngs.co.jp/news_release/2013/12/Newsrelease20131225.html
  4. 4. パフォーマンス状況 2014/4/24~5/8  –  IE11
  5. 5. 平均値の「罠」 •  平均値で、パフォーマンスの良し悪しを判断して良 いのか?
  6. 6. 偏差 ~ 平均値との「距離」を見る 平均 パフォーマンス 時 間 経 過 平均と実際の計測値との差 1秒 2秒 3秒 4秒 5秒 6秒 7秒 8秒
  7. 7. 平均値と標準偏差
  8. 8. 以下のグラフの平均値は同じ 1秒 2秒 3秒 4秒 5秒 6秒 7秒
  9. 9. 平均されると、正確に事実を把握できなくなる
  10. 10. 日本のデスクトップサイトTop10  –IE11   統計データ要約 2014/4/24~5/8 平均値 標準偏差 四分位数範囲 0% 25% 50% 75% 100%サンプル数 Amazon - KDDI 4.715798 1.678233 0.5975 1.731 4.074 4.268 4.6715 18.777 316 Amazon - NTT 4.285981 1.349637 0.62425 1.529 3.88425 4.086 4.5085 19.047 308 FC2 - KDDI 3.521764 2.12762 0.937 1.861 2.7015 3.11 3.6385 25.351 343 FC2 - NTT 2.920009 0.827685 0.695 1.708 2.4535 2.74 3.1485 8.693 347 goo - KDDI 3.101621 1.730625 2.878 1.215 1.598 2.401 4.476 9.346 343 goo - NTT 1.823539 0.646908 0.591 1.162 1.4145 1.64 2.0055 6.765 343 Google - KDDI 0.730566 0.273477 0.301 0.425 0.541 0.63 0.842 2.216 341 Google - NTT 0.805099 0.798268 0.29425 0.434 0.541 0.643 0.83525 9.192 342 Microsoft - KDDI 2.199994 0.730498 0.816 1.363 1.7215 1.957 2.5375 6.209 342 Microsoft - NTT 2.120056 0.86135 0.58725 1.353 1.67075 1.87 2.258 9.334 340 Rakuten - KDDI 5.612606 2.353871 3.305 2.134 3.567 5.635 6.872 16.202 343 Rakuten - NTT 4.615493 2.534201 1.841 1.827 3.288 3.888 5.129 25.454 345 Wikipedia - KDDI 2.485292 0.473838 0.499 1.784 2.18125 2.3995 2.68025 6.374 342 Wikipedia - NTT 2.408456 0.409265 0.52425 1.855 2.09175 2.333 2.616 4.468 340 Yahoo! Japan - KDDI 0.971877 1.387411 0.49825 0.195 0.3945 0.615 0.89275 16.234 340 Yahoo! Japan - NTT 0.614398 1.136666 0.282 0.131 0.343 0.468 0.625 19.034 339 YouTube - KDDI 2.734819 0.86113 1.23325 1.455 2.0055 2.775 3.23875 6.804 342 YouTube - NTT 3.020432 1.391517 1.3735 1.379 2.1145 2.93 3.488 13.938 343
  11. 11. FC2とYouTubeとの比較 FC2 YouTub e
  12. 12. 正規分布図と箱ひげ図の関係
  13. 13. 日本のデスクトップサイトTop10  –IE11   箱ひげ図 2014/4/24~5/8
  14. 14. 月刊ネット販売 – 売上Top20につい て計測 2014年 5月 10日   14   ©2013  Keynote  Systems,  Inc..  
  15. 15. EコマースTop20  ―  Firefox  ―  NTT   統計データ要約 2014/5/2~5/8   平均 標準偏差 四分位数範囲 0% 25% 50% 75% 100%サンプル数 7 net shopping - NTT 2.220713 1.580536 0.447 1.077 1.745 1.924 2.192 27.371 429 A-Price - NTT 2.472476 0.575939 0.36625 1.808 2.19625 2.345 2.5625 8.515 452 Amazon - NTT 5.396025 1.364907 0.809 4.131 4.705 4.935 5.514 16.048 357 Bellemaison - NTT 2.825126 1.094292 1.171 1.615 1.9845 2.752 3.1555 10.459 467 Bic Camera - NTT 2.57943 1.221122 0.647 0.037 2.02475 2.438 2.67175 17.762 546 Cecile - NTT 3.737393 1.60907 1.601 2.094 2.639 3.46 4.24 19.829 521 DELL Japan - NTT 1.247408 0.512876 0.378 0.211 0.9935 1.143 1.3715 5.811 595 DHC - NTT 5.708538 3.224974 1.9515 1.465 4.1625 5.2935 6.114 52.768 580 Dinos - NTT 3.81408 2.578954 1.3315 1.44 2.6155 3.192 3.947 29.238 503 Felissimo - NTT 3.280573 1.362434 0.9965 1.703 2.535 2.857 3.5315 12.928 351 IY Net - NTT 3.17889 1.119032 1.0635 1.478 2.49975 2.946 3.56325 12.748 580 Japanet Takata - NTT 3.989306 1.529519 1.56475 2.349 2.91775 3.759 4.4825 17.326 458 Joshin Denki - NTT 2.070551 0.575116 0.4005 0.053 1.7855 1.928 2.186 7.541 603 Nissen - NTT 6.298192 1.896437 0.925 2.078 5.579 5.915 6.504 29.755 473 PC Bomber - NTT 8.668384 3.084407 2.0585 0.023 7.21975 7.991 9.27825 35.399 584 QVC Japan - NTT 2.236569 1.222928 0.5015 0.993 1.79 1.969 2.2915 13.503 559 Rakuten - NTT 5.255155 1.335595 1.25 3.354 4.516 5.125 5.766 15.275 413 Shop Channel - NTT 1.254256 0.542057 0.363 0.648 1.032 1.188 1.395 8.285 539 Sony Style - NTT 2.44202 0.821637 0.478 0.003 2.051 2.226 2.529 7.977 491 Yodobashi - NTT 2.653974 0.713136 0.63925 1.586 2.221 2.547 2.86025 6.849 348 ZOZO Town - NTT 2.715326 1.089395 0.90625 1.292 2.0805 2.498 2.98675 13.982 552
  16. 16. EコマースTop20  ―  Firefox  ―  KDDI   統計データ要約  2014/5/2~5/8   平均 標準偏差 四分位数範囲 0% 25% 50% 75% 100%サンプル数 7 net shopping - KDDI 2.857937 1.930683 0.96825 1.253 2.099 2.432 3.06725 31.455 686 A-Price - KDDI 2.537956 0.58875 0.37725 1.688 2.26275 2.4215 2.64 9.335 680 Amazon - KDDI 5.366136 1.262574 0.536 2.369 4.8875 5.099 5.4235 21.182 683 Bellemaison - KDDI 4.116857 1.261272 1.2915 0.111 3.296 3.931 4.5875 15.201 671 Bic Camera - KDDI 2.982236 1.365588 0.61525 0.043 2.443 2.685 3.05825 20.902 682 Cecile - KDDI 4.010826 1.5131 1.215 1.964 3.14075 3.702 4.35575 16.826 682 DELL Japan - KDDI 1.956092 0.673675 0.552 0.57 1.593 1.824 2.145 11.919 685 DHC - KDDI 6.521729 2.586844 1.536 0.113 5.3565 6.151 6.8925 51.097 679 Dinos - KDDI 4.375374 2.373634 1.515 2.34 3.291 3.865 4.806 34.128 681 Felissimo - KDDI 4.283498 3.315292 1.598 1.822 3.0785 3.672 4.6765 56.451 691 IY Net - KDDI 3.849555 1.968288 1.2625 0.019 2.971 3.553 4.2335 36.649 683 Japanet Takata - KDDI 4.54649 2.260575 1.391 2.347 3.6085 4.308 4.9995 47.009 683 Joshin Denki - KDDI 2.142085 0.588816 0.63625 0.067 1.74425 1.99 2.3805 6.113 682 Nissen - KDDI 7.723636 2.52863 1.6115 3.643 6.63125 7.3545 8.24275 47.493 678 PC Bomber - KDDI 8.375177 2.93853 1.6635 1.471 7.197 7.88 8.8605 42.976 683 QVC Japan - KDDI 2.573572 1.595419 0.8565 1.159 1.913 2.1545 2.7695 31.411 684 Rakuten - KDDI 7.133511 2.246773 2.135 3.223 5.888 6.922 8.023 38.627 685 Shop Channel - KDDI 1.461729 0.668696 0.46875 0.711 1.12225 1.268 1.591 6.772 682 Sony Style - KDDI 2.950857 1.414323 0.543 2.011 2.379 2.585 2.922 26.086 685 Yodobashi - KDDI 2.859997 0.920116 0.8415 0.071 2.30625 2.6785 3.14775 9.79 676 ZOZO Town - KDDI 3.284734 1.216395 1.701 1.512 2.374 2.892 4.075 12.456 677
  17. 17. EコマースTop20  ―  Firefox  ―  箱ひげ図   2014/5/2~5/8
  18. 18. EコマースTop20  ―  iPhone5  ―  DoCoMo  3G   統計データ要約 2014/4/29~5/6 平均 標準偏差 四分位数範囲 0% 25% 50% 75% 100%サンプル数 7 net shopping 31.19926 8.928059 7.378 21.281 25.03 28.748 32.408 64.234 81 A-Price 9.333253 8.373359 2.833 3.64 6.70975 7.6955 9.54275 80.907 158 Amazon 39.0537 12.60183 12.60075 15.895 31.85925 37.542 44.46 108.41 116 Bellemaison 25.99316 10.15943 5.404 18.329 21.36 23.566 26.764 102.562 159 Bic Camera 5.452152 7.775089 1.26125 1.421 3.27825 3.5775 4.5395 73.487 164 Cecile 28.0534 9.026157 8.4985 19.407 22.563 25.471 31.0615 98.623 151 DELL 26.84261 23.86477 7.362 11.966 16.12325 19.063 23.48525 113.581 18 DHC 62.7047 12.35438 13.4775 36.515 55.615 61.987 69.0925 109.183 123 Dinos 40.9163 18.80103 14.2615 24.69 29.5145 35.128 43.776 113.327 147 Felissimo 30.64062 12.54497 6.455 19.006 24.6815 27.374 31.1365 103.611 159 IY Net 11.79688 10.66434 2.7685 6.25 7.988 9.204 10.7565 87.862 154 Japanet 36.13486 16.43593 10.024 13.293 27.812 31.191 37.836 109.786 155 Joshin 18.05177 9.233415 3.96975 8.514 14.4565 15.796 18.42625 89.668 164 Nissen 50.0218 10.29686 6.5955 28.935 44.6205 47.199 51.216 107.123 131 PC Bomber 53.69489 13.365 14.594 37.142 44.35775 49.3545 58.95175 107.207 162 QVC 26.46045 11.45241 7.317 15.797 20.452 23.546 27.769 94.174 145 Rakuten 35.72059 23.02249 5.33425 18.765 27.001 28.3205 32.33525 172.811 142 Shop Channel 30.39111 17.21138 8.2525 16.547 21.678 25.001 29.9305 84.472 19 Sony Style 17.00619 8.784396 3.283 10.986 13.6785 14.844 16.9615 98.001 155 Yahoo! Shopping 29.12773 12.58816 9.366 17.186 21.481 25.55 30.847 102.671 153 Yodobashi 22.4978 8.360877 4.889 15.685 18.502 20.484 23.391 84.797 161 ZOZO Town 14.00526 8.681663 2.907 8.593 11.218 12.453 14.125 82.954 153
  19. 19. EコマースTop20  ―  iPhone5  ―  DoCoMo  3G   箱ひげ図 2014/4/29~5/6
  20. 20. ネット銀行スマートフォンサイト -­‐  3G回線   統計データ要約 2014/4/29~5/6 平均 標準偏差 四分位数範 囲 0% 25% 50% 75% 100%サンプル数 Citi Bank - Docomo 20.04498 9.035929 4.3445 13.436 15.8195 17.186 20.164 95.048 159 Citi Bank - SoftBank 15.16799 23.75992 2.8225 3.846 5.282 6.142 8.1045 90.625 150 Japan Net Bank - Docomo 20.81487 9.847719 5.34875 12.222 16.41325 18.562 21.762 105.156 144 Japan Net Bank - SoftBank 14.88671 21.86416 1.992 4.452 6.362 7.2515 8.354 105.954 148 Mizuho Bank - Docomo 20.17633 6.87312 5.5395 13.907 16.2185 18.175 21.758 54.702 159 Mizuho Bank - SoftBank 13.92133 24.26151 2.428 4.609 5.4985 6.343 7.9265 112.282 146 MUFG - Docomo 25.14353 10.86261 7.70625 14.499 19.37175 22.1485 27.078 97.407 168 MUFG - SoftBank 15.48797 29.38431 1.605 4.921 5.7035 6.431 7.3085 116.125 148 Orix Bank - Docomo 29.83944 11.98749 6.00125 21.046 23.8845 26.389 29.88575 105.154 152 Orix Bank - SoftBank 19.9772 25.73541 2.52875 7.376 9.21225 10.329 11.741 100.254 152 Rakuten Bank - Docomo 15.86138 10.96479 5.612 6.455 10.997 13.045 16.609 92.031 165 Rakuten Bank - SoftBank 16.76533 32.16946 1.819 2.749 3.8355 4.524 5.6545 111.751 150 Resona Bank - Docomo 16.3877 6.019401 6.04 7.156 12.6595 14.633 18.6995 48.391 158 Resona Bank - SoftBank 11.80047 13.02289 3.75375 2.939 5.11325 6.2975 8.867 52.438 154 SBI Sumishin Net Bank - Docomo 34.68615 11.86879 5.468 18.78 29.75825 31.596 35.22625 105.294 150 SBI Sumishin Net Bank - SoftBank 23.32284 26.76917 3.77775 8.548 11.9715 13.9935 15.74925 114.092 154 Seven Bank - Docomo 28.26199 13.15793 6.165 16.784 22.3515 24.221 28.5165 99.827 159 Seven Bank - SoftBank 20.36372 25.25294 6.77675 5.862 7.245 9.093 14.02175 94.738 148 Shinsei Bank - Docomo 51.11844 12.17604 12.505 36.235 43.125 48.271 55.63 108.846 146 Shinsei Bank - SoftBank 15.29038 4.167672 3.00275 10.236 13.28475 14.6395 16.2875 53.784 136 Shoko Chukin Bank - Docomo 14.32312 10.53057 2.517 8.566 11.228 12.061 13.745 106.236 155 Shoko Chukin Bank - SoftBank 8.698065 12.57262 2.2575 2.733 3.595 4.044 5.8525 64.205 155 SMBC - Docomo 13.87817 3.74882 2.11 6.718 12.007 12.844 14.117 40.328 163 SMBC - SoftBank 9.484091 14.1116 2.78 1.998 2.861 3.374 5.641 77.468 165 Sony Bank - Docomo 17.21888 11.05293 4.52425 8.142 12.596 14.237 17.12025 93.296 154 Sony Bank - SoftBank 12.46698 17.89716 2.842 2.704 4.657 5.331 7.499 71.113 161 Suruga Bank - Docomo 17.41476 7.321969 5.6775 10.265 13.2885 15.797 18.966 57.082 160 Suruga Bank - SoftBank 12.428 18.66492 2.965 3.294 4.619 5.483 7.584 73.907 159
  21. 21. ネット銀行スマートフォンサイト -­‐  3G回線   箱ひげ図 2014/4/29~5/6
  22. 22. Webサイト品質管理 通信が保証されない=100%コピーが保証されない世界
  23. 23. 定常計測・監視のすすめ •  なぜ、常にパフォーマンスを計測・監視しなければ いけないのか?
  24. 24. 「MacBook  Air  開封の儀」
  25. 25. 話が通じなくて、怒る
  26. 26. 定常的に計測・監視しないリスク •  常に計測・監視しなければ、ユーザーに配信でき ているかどうかは、わからない   •  日次・週次・月次・年次のパフォーマンスパターン がわからない   •  パフォーマンスパターンがわからなければ、対応 ができない
  27. 27. 楽天イーグルス優勝時の   楽天市場のトップページの状態 2014年 5月 10日   27   ©2013  Keynote  Systems,  Inc.  
  28. 28. 計測・監視の仕方
  29. 29. データの取り方 2014年  5月  10日     29   Last  Mile First  Mile Middle  Mile web server エンドユーザ NTT KDDI エンドユーザ 1次ISP RUM (Real  User  Monitoring) Synthesis  Monitoring Systems/Server  side  Monitoring
  30. 30. サーバーサイド監視ソフト •  HP  So_ware  and  SoluAons  (旧OpenView)   •  IBM  Tivoli   •  Tibco  Hawk   •  日立 JP1   •  野村総合研究所 千手 •  富士通 Systemwalker   •  NEC  WebSAM   •  NTTデータ Hinemos(オープンソース)   •  Apache  So_ware  FundaAon  Lokahi  (オープンソース)   •  Zabbix  (オープンソース)   •  Nagios  (オープンソース)  
  31. 31. APM(ApplicaQon  Performance  Management) •  HP  ApplicaAon  Performance  Management   •  IBM  SmartCloud   •  Compuware  APM   •  New  Relic   •  BMC  ApplicaAon  Performance  Management   •  AppDynamics   •  CA  APM   •  Riverbed  OPNET  APM   •  Quest  So_ware  APM   •  ExtraHop   •  Microso_  OperaAon  Manager  
  32. 32. SyntheQc  Monitoring •  Keynote   •  Compuware   •  SiteAleart   •  WebMetrix   •  Catchpoint   •  BlueTriangle   •  Microso_   •  Akamai  SiteAnalyzer
  33. 33. Real  User  Monitoring •  Pingdom   •  New  Relic   •  Compuware   •  Keynote   •  HP   •  SOASTA   •  Neustar   •  Akamai   •  CopperEgg
  34. 34. boomerang
  35. 35. Bucky
  36. 36. 配信速度の劣化 2014年  5月  10日     36   Last  Mile First  Mile Middle  Mile web server エンドユーザ NTT KDDI エンドユーザ 1次ISP 1~2秒 2~4秒 3~8秒
  37. 37. どれか一つの方法に絞ってはいけない •  それぞれの計測方法の特徴を理解し、組み合わ せて使うことが大事
  38. 38. 統計分析手法でWebサイトの「急所」を探り当てる •  データの取り方が大事   •  データは、どのように計測すれば良いのか?   •  統計学で、手法が確立している
  39. 39. 実験計画法 •  1920年代に、統計学の大家、R・A・フィッシャーが 確立   •  効率のよい実験方法をデザインし、結果を適切に 解析することを目的とする統計学の応用分野   •  品質管理のタグチメソッドの基礎  
  40. 40. 実験計画法~3つの原則 •  3つの原則 •  局所管理化:影響を調べる要因以外のすべての要因を 可能な限り一定にする。 •  反復:実験ごとの偶然のバラツキ(誤差)の影響を除く ために同条件で反復する。 •  無作為化(ランダム化):以上でも制御できない可能性 のある要因の影響を除き、偏りを小さくするために条件 を無作為化する。例えば実験を行う空間的・時間的順 序の影響があるかもしれないから、決まった順序でなく 実験のたびに無作為に順序を決めるなど。
  41. 41. 「観察者効果」の問題 •  観察するという行為が観察される現象に変化を与えて しまう問題   •  例えば、電子を見ようとすると、まず光子がそれと相互 作用しなければならず、その相互作用によって電子の 軌道が変化する   •  エンドユーザを「観察」しようとJavaScriptを入れることで、 そのJavaScript自体がパフォーマンスの遅延などの変 化をもたらす   •  行動解析用ビーコンが表示の遅延をもたらし、離脱率を上 げる   •  RUMのJavaScriptが、表示速度の遅延をもたらす   •  広告効果測定ビーコンが、ページ表示の遅延をもたらす
  42. 42. SyntheQc  Monitoringの重要性 •  計測環境・条件の統一   •  変数の限定化(実験計画法の「局所管理下」)   •  定点観測   •  日次パターン、週次パターン、月次パターン、年次パ ターン   •  ベースラインの認識(実験計画法の「反復」)   •  データを「完全に取得する」   •  何を以って、「ページの終わり」とするのか?   •  何を以って、「エラー」と認定するのか?   •  閾値の定義・設定の重要性  
  43. 43. Google  AnalyQcsの計測データ(ダウンロード時間)
  44. 44. Google  AnalyQcsの計測データ(  First  PaintとTime  to  InteracQve)
  45. 45. Keynoteの計測データ(ダウンロード時間)
  46. 46. Keynoteの計測データ(First  PaintとTime  to  InteracQve)
  47. 47. よくある計測に関する誤解 1 •  負荷が上がる時間帯だけ、短い間隔で計測したい   •  社会現象の冪乗則により、5分や10分単位で、負荷が 上がったり下がったりはしない   •  平均や最頻値、中央値などの各種計測データによる計 算がおかしくなる   •  5秒、8秒、7秒、10秒、12秒 → 平均8.4秒   •  5秒、8秒、7秒、10秒、[12秒、13秒、12秒、14秒]  → 平均 10.125秒   2014年 5月 10日   47   ©2013  Keynote  Systems,  Inc.  
  48. 48. ランダム計測 ―  「代表性」の担保
  49. 49. ランダム計測 ―  「代表性」の担保
  50. 50. ランダム計測 ―  「代表性」の担保
  51. 51. ランダム計測 ―  「代表性」の担保
  52. 52. よくある計測に関する誤解 2 •  アクセスが少ない時間や曜日は計測せず、アクセ スが集中する時間帯や曜日だけ計測したい •  ベースラインがわからなくなる   •  ベースラインが不明だと、どこのボトルネックがあるかわから なくなる   •  計測した値が、外れ値かどうかわからなくなる   •  パターンなのか?それとも、たまたまなのか?   2014年 5月 10日   52   ©2013  Keynote  Systems,  Inc.  
  53. 53. この計測値は、いつもの値? 金曜日 金曜日 金曜日 3秒
  54. 54. よくある計測に関する誤解 3 •  リニューアルの前後、1ヶ月だけ計測したい •  インターネットは、想像しているより、遥かに不安定な世界   •  様々なネットワークの混合結合体だと理解している人は少ない   •  インターネット全体を統括して管理している人はいない   •  障害が発生しても、気づかないことが多い   •  インターネット全体を監視して状況を表示しているダッシュボードが あるわけではない   •  Webサイトの配信管理は「歩留まり」の管理という認識がな い   •  サーバで用意した「部品」を、インターネットという「ベルトコンベ ア」で送り込み、PCやスマートフォン、タブレットなどの端末で「組 み立てる」   •  定常的に計測しない限り、ユーザに配信できていることは担保で きない   2014年 5月 10日   54   ©2013  Keynote  Systems,  Inc.  
  55. 55. Web Content Web Users $ 50X 50X 20X 20X 6X 6X $ $ $ $ $ $ $ $ $ $ $ First Mile Tier 1 ISPs Local ISPs Last Mile Middle Mile インターネットインフラへの投資比率 2014年  5月  10日    
  56. 56. Internet  Health  Report  –   www.internethealthreport.com POWERING  A  BETTER   INTERNET  
  57. 57. 「Big  Data」より「AcQonable  Data」 •  「データを何に使いたいのか」という目的が、デー タの取得方法に大きな影響を与える   •  監視したいのか?計測したいのか?   •  要因を固定し、条件を統一する   •  コントロール可能な「主変数」にフォーカスする 2014年 5月 10日   57   ©2013  Keynote  Systems,  Inc.  
  58. 58. コントロール可能な3つの「主変数」 Last  Mile First  Mile Middle  Mile web server エンドユーザ NTT KDDI エンドユーザ 1次ISP 1. ネットワーク 2.  HTML/CSS/JavaScript 3. システム負荷/性能
  59. 59. パフォーマンス計測の2つの測定基準 •  ダウンロード時間   •  ページの中で既述されている全てのオブジェクトをダウ ンロードし切るまでの時間を計測する   •  表示開始時間、操作可能状態までの時間   •  表示開始時間(First  Paint)~レンダリングが開始されて ブラウザ上で表示されるまでの時間   •  操作可能状態(Time  to  InteracAve)~ページ上で操作 が可能になるまでの時間   •  ダウンロード時間より、表示開始時間や操作可能状態 までの時間の方が重要   •  W3C  Web  Performance  Working  Groupにて、W3C  NavigaAon   Timeが策定され、モダンブラウザにAPIが実装される 2014年 5月 10日   59   ©2013  Keynote  Systems,  Inc.  
  60. 60. W3C  Web  Performance  Working   Group 2014年 5月 10日   60   ©2013  Keynote  Systems,  Inc.  
  61. 61. W3C  NavigaQon  Time  –  何秒でレンダリングが 開始され、何秒で操作可能になるか 61   2014年  5月  10日    
  62. 62. Webパフォーマンスの「主成分」 2014年 5月 10日   62   ©2013  Keynote  Systems,  Inc.  
  63. 63. 考えられる要因~Webの「非破壊検査」 •  DNS  Lookup   •  DNSのTTLが短すぎる、DNSサーバのキャパシティ不足   •  IniAal  ConnecAon   •  ネットワーク帯域の不足、ネットワーク機器のキャパシティ不足、Internet 網の障害、レイテンシの問題   •  SSL   •  サーバのキャパシティ不足   •  First  Byte  Download   •  サーバのキャパシティ不足、サーバのディスクアクセス競合   •  Content  Download   •  ディスクアクセスの遅延 2014年 5月 10日   63   ©2013  Keynote  Systems,  Inc.  
  64. 64. General  Rule  Book  ― 鵜呑みにしな い事 2014年 5月 10日   64   ©2013  Keynote  Systems,  Inc.  
  65. 65. 「健康のためにサプリメントは如何?」
  66. 66. 「急所」を判別して改善する •  80:20の法則 (パレートの法則)~ 冪乗則   •  全体の数値の大部分は、全体を構成するうちの一部の 要素が生み出している 2014年 5月 10日   66   ©2013  Keynote  Systems,  Inc..  
  67. 67. ボトルネックを考える •  「データベース」が常にボトルネックではない   •  インターネット網の不安定さ   •  自社コンテンツだけを見てはいけない   •  サードパーティーコンテンツの不安定さ   2014年 5月 10日   67   ©2013  Keynote  Systems,  Inc.  
  68. 68. 某社のスマートフォンサイト 2014年 5月 10日   68   ©2013  Keynote  Systems,  Inc.  
  69. 69. Sca^er  Plot  -­‐ 散布図 2014年 5月 10日   69   ©2013  Keynote  Systems,  Inc.   この詳細を知りたい
  70. 70. Waterfall  Chart - ウォーターフォー ル図 2014年 5月 10日   70   ©2013  Keynote  Systems,  Inc.   これは何?
  71. 71. これは何? 2014年 5月 10日   71   ©2013  Keynote  Systems,  Inc.   このJavaScriptのダウンロードの遅延 で後ろのコンテンツのダウンロードが 止まってる
  72. 72. 広告関係の3rd  Party  JavaScript 2014年 5月 10日   72   ©2013  Keynote  Systems,  Inc.  
  73. 73. こちらの会社のJavaScript 2014年 5月 10日   73   ©2013  Keynote  Systems,  Inc.  
  74. 74. Sca^er  Plot  -­‐ 散布図 2014年 5月 10日   74   ©2013  Keynote  Systems,  Inc.   この詳細を知りたい
  75. 75. これは何? 2014年 5月 10日   75   ©2013  Keynote  Systems,  Inc.  
  76. 76. 広告関係の3rd  Party  JavaScript 2014年 5月 10日   76   ©2013  Keynote  Systems,  Inc.   h7p://googleads.g.doubleclick.net/ pagead/viewthroughconversion/ 980023218/? value=0&guid=ON&script=0 h7ps://ssl.socdm.com/sa/js? said=sg11341-­‐s&t=1
  77. 77. こちらの会社のJavaScript 2014年 5月 10日   77   ©2013  Keynote  Systems,  Inc.  
  78. 78. 広告関係の3rd  Party  JavaScript 2014年 5月 10日   78   ©2013  Keynote  Systems,  Inc.   h7p://v6.advg.jp/adpv6/pv.js/7qb h7p://googleads.g.doubleclick.net/ pagead/viewthroughconversion/ 987798848/? value=0&guid=ON&script=0 h7p://b92.yahoo.co.jp/js/s_retargeAng.js h7p://www.googleadservices.com/ pagead/conversion.js h7ps://j.amoad.com/js/dc.js h7ps://s.nend.net/js/nendRt.js h7p://dex00.deqwas.net/dhc/scripts/x.js? noCache=1373475746676 h7p://serv2.vizury.com/analyze/ pixel.php?account_id=VIZVRM943
  79. 79. 何をしたいのかわからない…   (このスマートフォンサイトは、広告をあっちこっちのサイトに出るようにする目的 のためなのか、それとも商品を売りたいのか?) 2014年 5月 10日   79   ©2013  Keynote  Systems,  Inc.  
  80. 80. 3rd  Partyコンテンツのエラー回数   2013/7/6~12の一週間(DoCoMoの3G回線で1時間に1回の計測) 配信ドメイン エラー回数 microad.jp 78 deqwas.net 59 baynote.net 54 impact-ad.jp 51 openx.net 39 deqwas-dsp.net 35 advg.jp 31 href.asia 26 doubleclick.net 20 dhc.co.jp 18 gssprt.jp 14 i-mobile.co.jp 11 yahoo.co.jp 10 advertising.com 9 gsspat.jp 9 vizury.com 9 google.co.jp 8 googleadservices.com 6 amoad.com 5 genieessp.jp 5 nend.net 5 socdm.com 4 cloudfront.net 1 omtrdc.net 1 2014年 5月 10日   80   ©2013  Keynote  Systems,  Inc.  
  81. 81. 3rd  Partyコンテンツのエラー回数   2013/7/6~12の一週間(SocBankの3G回線で1時間に1回の計測) 配信ドメイン エラー回数 advg.jp 2 deqwas.net 1 dhc.co.jp 3 i-mobile.co.jp 1 microad.jp 8 2014年 5月 10日   81   ©2013  Keynote  Systems,  Inc.  
  82. 82. イトーヨーカドーのネットスーパー 2014年 5月 10日   82   ©2013  Keynote  Systems,  Inc.   これは何?
  83. 83. Twi^erによる遅延 2014年 5月 10日   83   ©2013  Keynote  Systems,  Inc.  
  84. 84. サードパーティーの影響 パフォーマンスの劣化の原因が、全て自社以外 のドメインからの配信 84
  85. 85. 今こそ、Webサイトに品質管理を! •  データを取ろう!   •  定常的計測・監視   •  Systems  Side  Monitoring   •  SyntheAc  Monitoring   •  Real  User  Monitoring   •  この3つとも、大事。補完関係にある。   •  データに基づいて改善しよう!   •  統計学を学び、統計学の知識を活用しよう!   •  Webサイトのパフォーマンスと可用性は、ビジネス 上大事!   •  新規顧客開拓も大事だが、既存顧客の維持も大事
  86. 86. html5j  パフォーマンス部では部員募集中です!
  87. 87. html5j  Japan  Cup  パフォーマンス賞
  88. 88. ご静聴ありがとうございました。
  89. 89. 今後の予定(仮) •  第2回  …  理論(統計学、ソフトウェア工学関係)   •  第3回  …  モバイル関係(モバイルネットワークの仕組み など)   •  第4回  …  インターネット網関係   •  第5回  …  CDN関係   •  第6回  …  デスクトップ関係   •  第7回  …  ツール関係   •  第8回  …  企業内Webアプリケーション関係   •  第9回  …  サードパーティー関係(広告、測定、SNS)   •  第10回  …  レスポンシブ  VS  アダプティブ  VS  専用サイト   •  第11回  …  パフォーマンスデータの活用

×