Measuring Web Performance自己満足で終わらないためのパフォーマンス計測     Internet Business Headquarters     Web developer Koji Ishimoto     201...
t32k.me
2012.06.01  Joined!
@cssradar   @hiloki
AgendaI.   なぜ計測しなければならないのかII. ページが表示されるまでの仕組みIII. 計測ツールの紹介IV. まとめとこれからのこと
I. なぜ計測しなければならないのか?                      Why?
Too Many Best Practices
Exceptional Performance - Yahoo! Developer Network
35Exceptional Performance - Yahoo! Developer Network
35Exceptional Performance - Yahoo! Developer Network                                           Web Performance Best Practi...
35Exceptional Performance - Yahoo! Developer Network                                                        31            ...
80:20
80:20Designer?
高速サイトを実現する14のルール1:HTTPリクエストを減らす           8:JSとCSSは外部ファイル化する2:CDNを使う                  9:DNSルックアップを減らす3:Expiresヘッダを設定する    ...
Case: Web Designer制作サイト: 企業サイト(ドキュメントページ) JSの使用: jQueryプラグインを少々カバー範囲: ドメインの取得からSEO
Make Fewer HTTP Requests                          Use a Content Delivery NetworkEffective                   Add Expires or...
Make Fewer HTTP Requests                          Use a Content Delivery NetworkEffective                   Add Expires or...
Make Fewer HTTP Requests                          Use a Content Delivery NetworkEffective                   Add Expires or...
CSSセレクタの最適化 Right to Left
2009Performance Impact of CSS        Selectors    http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-se...
-20ms
2011CSS Selector Performance has  changed! (For the better)     http://calendar.perfplanet.com/2011/css-selector-performan...
Optimizing CSS selector matching (WebKit)- Style Sharing      - Ancestor Filters- Rule Hashes        - Fast Path
-5ms
If you arent getting 90+ PageSpeed scores, its way too earlyto be thinking about selectoroptimization.               * { b...
費用対効果を知る
II. ページが表示されるまでの仕組み         Life of Web Page
Life of Web PageRequest           Onload                          Request                             User’s Interaction  ...
Life of Web PageRequest           Onload                          Request                             User’s Interaction  ...
Performance TimingPrompt                          App  for          Redirect                   DNS         TCPunload      ...
Performance TimingPrompt                          App  for          Redirect                   DNS         TCPunload      ...
Rendering Flow (WebKit)                         Layouttag     DOM Tree                       Render Tree   Paint!style   S...
How Browsers Work: Behind the scenes of modern web browsers - HTML5 Rocks              邦訳:http://shanon-tech.blogspot.jp/2...
俯瞰的視点を持つ
III. どこを計測するのか?計測手段             Measure Tools
I. 評価・アドバイス系II. ASP系III. デベロッパーツール系IV. スポット計測系
I. 評価・アドバイス系
YSlowティア
YSlow
PageSpeed Insights
PageSpeed Insights
YSlow / PageSpeed Insights- ビギナー向け- 一番最初に使用すべきツール- 優先度の高いものから対応
II. ASP系
WebPagetest
WebPagetest
Mobitest
Mobitest
Google Analytics
Navigation Timing API1: navigationStart        11: secureConnectionStart2: unloadEventStart       12: requestStart3: unloa...
WebPagetest / Mobitest / GA- 無料でありながら高機能- ウォーターフォールチャートの確認- ユーザーに近い読み込み時間の確認
III. デベロッパーツール系
Developer Tool
Firebug
Developer Tool / Firebug- より詳細な分析に利用- Try&Errorの繰り返しに便利- 要:結果から改善策を読み取る力
IV. スポット計測系
jsPerf
CSS Stress Test
jsPerf / CSS Stress Test- 最初から使わない(考えない)- サイト制作に合わせて利用
Measuring Social Interaction  with Google Analytics
Social Action
Cost: 0.8~1.0secSocial Action: 0.01~0.2%
Remove JavaScript Files
-1000ms
計測 - 分析 - 最適化
IV. まとめとこれからのこと                  Conclusion
Network > > CPU         >
今後10年間でインターネットの帯域幅速度は57倍になると思われているが、コンピューターの処理能力は100倍以上になるだろう。         モバイルサイト vs. アプリ: 来るべき戦略の転換 – U-Site
Minimize HTTP Requests! Requests 30 vs 1 (CSS Sprite)
Shut the f**k up and write some code.
Shut the f**k up andreduce some HTTP request.
Thank you!
Photo Credit-   http://www.flickr.com/photos/hamed/1552383685/-   http://www.flickr.com/photos/bradhoc/7343762168/-   http:/...
Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -
Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -
Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -
Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -
Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -
Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -
Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -
Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -
Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -
Upcoming SlideShare
Loading in...5
×

Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -

1,184

Published on

世の中にはさまざまなパフォーマンスTipsがあり対応したものの、本当にこれって効果でているの?とは思ったことはないでしょうか。たぶん速くなっただろう……で終わってないでしょうか。

本セッションでは、まずブラウザにページが表示されるまでの仕組みを学びつつ、どこにコストをかければいいのか理解します。各段階別のツールでちゃんと効果測定すれば自己満足で終わらない仕事が可能です!

Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -

  1. 1. Measuring Web Performance自己満足で終わらないためのパフォーマンス計測 Internet Business Headquarters Web developer Koji Ishimoto 2012.06.30 @CSS Nite LP23
  2. 2. t32k.me
  3. 3. 2012.06.01 Joined!
  4. 4. @cssradar @hiloki
  5. 5. AgendaI. なぜ計測しなければならないのかII. ページが表示されるまでの仕組みIII. 計測ツールの紹介IV. まとめとこれからのこと
  6. 6. I. なぜ計測しなければならないのか? Why?
  7. 7. Too Many Best Practices
  8. 8. Exceptional Performance - Yahoo! Developer Network
  9. 9. 35Exceptional Performance - Yahoo! Developer Network
  10. 10. 35Exceptional Performance - Yahoo! Developer Network Web Performance Best Practices - Google Developers
  11. 11. 35Exceptional Performance - Yahoo! Developer Network 31 Web Performance Best Practices - Google Developers
  12. 12. 80:20
  13. 13. 80:20Designer?
  14. 14. 高速サイトを実現する14のルール1:HTTPリクエストを減らす 8:JSとCSSは外部ファイル化する2:CDNを使う 9:DNSルックアップを減らす3:Expiresヘッダを設定する 10:JavaScriptを縮小化する4:コンポーネントをgzipする 11:リダイレクトを避ける5:スタイルシートは先頭に置く 12:スクリプトを重複させない6:スクリプトは最後に置く 13:ETagの設定を変更する7:CSS expressionの使用を控える 14:Ajaxをキャッシュ可能にする
  15. 15. Case: Web Designer制作サイト: 企業サイト(ドキュメントページ) JSの使用: jQueryプラグインを少々カバー範囲: ドメインの取得からSEO
  16. 16. Make Fewer HTTP Requests Use a Content Delivery NetworkEffective Add Expires or Cache-Control Header Gzip Components Put Stylesheets at Top Put Scripts at Bottom Avoid CSS Expressions Make JavaScript and CSS External Reduce DNS Lookups Minify JavaScript and CSS Avoid RedirectsIneffective Remove Duplicate Scripts Configure ETags Make Ajax Cacheable Difficult Easy Case: Web Designer
  17. 17. Make Fewer HTTP Requests Use a Content Delivery NetworkEffective Add Expires or Cache-Control Header Gzip Components Put Stylesheets at Top Put Scripts at Bottom Avoid CSS Expressions Make JavaScript and CSS External Reduce DNS Lookups Minify JavaScript and CSS Avoid RedirectsIneffective Remove Duplicate Scripts Configure ETags Make Ajax Cacheable Difficult Easy Case: Web Designer
  18. 18. Make Fewer HTTP Requests Use a Content Delivery NetworkEffective Add Expires or Cache-Control Header Gzip Components Put Stylesheets at Top Put Scripts at Bottom Avoid CSS Expressions Make JavaScript and CSS External Reduce DNS Lookups Minify JavaScript and CSS Avoid RedirectsIneffective Remove Duplicate Scripts Configure ETags Make Ajax Cacheable Difficult Easy Case: Web Designer
  19. 19. CSSセレクタの最適化 Right to Left
  20. 20. 2009Performance Impact of CSS Selectors http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/
  21. 21. -20ms
  22. 22. 2011CSS Selector Performance has changed! (For the better) http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/
  23. 23. Optimizing CSS selector matching (WebKit)- Style Sharing - Ancestor Filters- Rule Hashes - Fast Path
  24. 24. -5ms
  25. 25. If you arent getting 90+ PageSpeed scores, its way too earlyto be thinking about selectoroptimization. * { box-sizing: border-box } FTW « Paul Irish
  26. 26. 費用対効果を知る
  27. 27. II. ページが表示されるまでの仕組み Life of Web Page
  28. 28. Life of Web PageRequest Onload Request User’s Interaction HTML Sent Page Complete
  29. 29. Life of Web PageRequest Onload Request User’s Interaction HTML Sent Page Complete}
  30. 30. Performance TimingPrompt App for Redirect DNS TCPunload cache Unload Request Response Processing Onload Rendering
  31. 31. Performance TimingPrompt App for Redirect DNS TCPunload cache Unload Request Response Processing Onload Rendering }
  32. 32. Rendering Flow (WebKit) Layouttag DOM Tree Render Tree Paint!style Style Struct
  33. 33. How Browsers Work: Behind the scenes of modern web browsers - HTML5 Rocks 邦訳:http://shanon-tech.blogspot.jp/2011/09/web.html
  34. 34. 俯瞰的視点を持つ
  35. 35. III. どこを計測するのか?計測手段 Measure Tools
  36. 36. I. 評価・アドバイス系II. ASP系III. デベロッパーツール系IV. スポット計測系
  37. 37. I. 評価・アドバイス系
  38. 38. YSlowティア
  39. 39. YSlow
  40. 40. PageSpeed Insights
  41. 41. PageSpeed Insights
  42. 42. YSlow / PageSpeed Insights- ビギナー向け- 一番最初に使用すべきツール- 優先度の高いものから対応
  43. 43. II. ASP系
  44. 44. WebPagetest
  45. 45. WebPagetest
  46. 46. Mobitest
  47. 47. Mobitest
  48. 48. Google Analytics
  49. 49. Navigation Timing API1: navigationStart 11: secureConnectionStart2: unloadEventStart 12: requestStart3: unloadEventEnd 13: responseStart4: redirectStart 14: responseEnd5: redirectEnd 15: domLoading6: fetchStart 16: domInteractive7: domainLookupStart 17: domContentLoadedEventStart8: domainLookupEnd 18: domContentLoadedEventEnd9: connectStart 19: domComplete10: connectEnd 20: loadEventStart 21: loadEventEnd
  50. 50. WebPagetest / Mobitest / GA- 無料でありながら高機能- ウォーターフォールチャートの確認- ユーザーに近い読み込み時間の確認
  51. 51. III. デベロッパーツール系
  52. 52. Developer Tool
  53. 53. Firebug
  54. 54. Developer Tool / Firebug- より詳細な分析に利用- Try&Errorの繰り返しに便利- 要:結果から改善策を読み取る力
  55. 55. IV. スポット計測系
  56. 56. jsPerf
  57. 57. CSS Stress Test
  58. 58. jsPerf / CSS Stress Test- 最初から使わない(考えない)- サイト制作に合わせて利用
  59. 59. Measuring Social Interaction with Google Analytics
  60. 60. Social Action
  61. 61. Cost: 0.8~1.0secSocial Action: 0.01~0.2%
  62. 62. Remove JavaScript Files
  63. 63. -1000ms
  64. 64. 計測 - 分析 - 最適化
  65. 65. IV. まとめとこれからのこと Conclusion
  66. 66. Network > > CPU >
  67. 67. 今後10年間でインターネットの帯域幅速度は57倍になると思われているが、コンピューターの処理能力は100倍以上になるだろう。 モバイルサイト vs. アプリ: 来るべき戦略の転換 – U-Site
  68. 68. Minimize HTTP Requests! Requests 30 vs 1 (CSS Sprite)
  69. 69. Shut the f**k up and write some code.
  70. 70. Shut the f**k up andreduce some HTTP request.
  71. 71. Thank you!
  72. 72. Photo Credit- http://www.flickr.com/photos/hamed/1552383685/- http://www.flickr.com/photos/bradhoc/7343762168/- http://www.flickr.com/photos/chaparralbrad/2414205811/- http://www.flickr.com/photos/sonictk/371595048/
  1. A particular slide catching your eye?

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

×