Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -
?
10 likes?3,745 views
世の中にはさまざまなパフォーマンスTipsがあり対応したものの、本当にこれって効果でているの？とは思ったことはないでしょうか。たぶん速くなっただろう……で終わってないでしょうか。 本セッションでは、まずブラウザにページが表示されるまでの仕組みを学びつつ、どこにコストをかければいいのか理解します。各段階別のツールでちゃんと効果測定すれば自己満足で終わらない仕事が可能です！
Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -
- 1. Measuring?Web Performance 自己満足で終わらないためのパフォーマンス計測 Internet Business Headquarters Web developer Koji Ishimoto 2012.06.30 @CSS Nite LP23
- 2. t32k.me
- 4. @cssradar @hiloki
- 5. Agenda I. なぜ計測しなければならないのか II. ページが表示されるまでの仕組み III. 計測ツールの紹介 IV. まとめとこれからのこと
- 6. I. なぜ計測しなければならないのか? Why?
- 7. Too Many Best Practices
- 8. Exceptional Performance - Yahoo! Developer Network
- 9. 35 Exceptional Performance - Yahoo! Developer Network
- 10. 35 Exceptional Performance - Yahoo! Developer Network Web Performance Best Practices - Google Developers
- 11. 35 Exceptional Performance - Yahoo! Developer Network 31 Web Performance Best Practices - Google Developers
- 13. 80:20
- 14. 80:20 Designer?
- 15. 高速サイトを実現する14のルール １：HTTPリクエストを減らす ８：JSとCSSは外部ファイル化する ２：CDNを使う ９：DNSルックアップを減らす ３：Expiresヘッダを設定する 10：JavaScriptを縮小化する ４：コンポーネントをgzipする 11：リダイレクトを避ける ５：スタイルシートは先頭に置く 12：スクリプトを重複させない ６：スクリプトは最後に置く 13：ETagの設定を変更する ７：CSS expressionの使用を控える 14：Ajaxをキャッシュ可能にする
- 16. Case: Web Designer 制作サイト: 企業サイト(ドキュメントページ) JSの使用: jQueryプラグインを少々 カバー範囲: ドメインの取得からSEO
- 17. Make Fewer HTTP Requests Use a Content Delivery Network Effective 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 Redirects Ineffective Remove Duplicate Scripts Con?gure ETags Make Ajax Cacheable Difficult Easy Case: Web Designer
- 18. Make Fewer HTTP Requests Use a Content Delivery Network Effective 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 Redirects Ineffective Remove Duplicate Scripts Con?gure ETags Make Ajax Cacheable Difficult Easy Case: Web Designer
- 19. Make Fewer HTTP Requests Use a Content Delivery Network Effective 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 Redirects Ineffective Remove Duplicate Scripts Con?gure ETags Make Ajax Cacheable Difficult Easy Case: Web Designer
- 20. CSSセレクタの最適化 Right to Left
- 21. 2009 Performance Impact of CSS Selectors http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/
- 23. -20ms
- 24. 2011 CSS Selector Performance has changed! (For the better) http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/
- 25. Optimizing CSS selector matching (WebKit) - Style Sharing - Ancestor Filters - Rule Hashes - Fast Path
- 26. -5ms
- 27. If you aren't getting 90+ Page Speed scores, it's way too early to be thinking about selector optimization. * { box-sizing: border-box } FTW ? Paul Irish
- 29. 费用対効果を知る
- 30. II. ページが表示されるまでの仕組み Life of Web Page
- 31. Life of Web Page Request Onload Request User’s Interaction HTML Sent Page Complete
- 32. Life of Web Page Request Onload Request User’s Interaction HTML Sent Page Complete }
- 33. Performance Timing Prompt App for Redirect DNS TCP unload cache Unload Request Response Processing Onload Rendering
- 34. Performance Timing Prompt App for Redirect DNS TCP unload cache Unload Request Response Processing Onload Rendering }
- 35. Rendering Flow (WebKit) Layout tag DOM Tree Render Tree Paint! style Style Struct
- 36. How Browsers Work: Behind the scenes of modern web browsers - HTML5 Rocks 邦訳：http://shanon-tech.blogspot.jp/2011/09/web.html
- 38. 俯瞰的视点を持つ
- 39. III. どこを計測するのか？計測手段 Measure Tools
- 40. I. 評価?アドバイス系 II. ASP系 III. デベロッパーツール系 IV. スポット計測系
- 41. I. 評価?アドバイス系
- 42. YSlow ティア
- 43. YSlow
- 46. YSlow / PageSpeed Insights - ビギナー向け - 一番最初に使用すべきツール - 優先度の高いものから対応
- 47. II. ASP系
- 48. WebPagetest
- 49. WebPagetest
- 50. Mobitest
- 51. Mobitest
- 52. Google Analytics
- 53. Navigation Timing API 1: navigationStart 11: secureConnectionStart 2: unloadEventStart 12: requestStart 3: unloadEventEnd 13: responseStart 4: redirectStart 14: responseEnd 5: redirectEnd 15: domLoading 6: fetchStart 16: domInteractive 7: domainLookupStart 17: domContentLoadedEventStart 8: domainLookupEnd 18: domContentLoadedEventEnd 9: connectStart 19: domComplete 10: connectEnd 20: loadEventStart 21: loadEventEnd
- 54. WebPagetest / Mobitest / GA - 無料でありながら高機能 - ウォーターフォールチャートの確認 - ユーザーに近い読み込み時間の確認
- 55. III. デベロッパーツール系
- 56. Developer Tool
- 57. Firebug
- 58. Developer Tool / Firebug - より詳細な分析に利用 - Try&Errorの繰り返しに便利 - 要：結果から改善策を読み取る力
- 59. IV. スポット計測系
- 60. jsPerf
- 61. CSS Stress Test
- 62. jsPerf / CSS Stress Test - 最初から使わない（考えない） - サイト制作に合わせて利用
- 63. Measuring Social Interaction with Google Analytics
- 64. Social Action
- 65. Cost: 0.8~1.0sec Social Action: 0.01~0.2%
- 70. -1000ms
- 72. 計測 - 分析 - 最適化
- 73. IV. まとめとこれからのこと Conclusion
- 74. Network > > CPU >
- 75. 今後10年間でインターネットの帯域幅速度は 57倍になると思われているが、コンピューター の処理能力は100倍以上になるだろう。 モバイルサイト vs. アプリ： 来るべき戦略の転換 – U-Site
- 77. Minimize HTTP Requests! Requests 30 vs 1 (CSS Sprite)
- 78. Shut the f**k up and write some code.
- 79. Shut the f**k up and reduce some HTTP request.
- 80. Thank you!
- 81. Photo Credit - http://www.?ickr.com/photos/hamed/1552383685/ - http://www.?ickr.com/photos/bradhoc/7343762168/ - http://www.?ickr.com/photos/chaparralbrad/2414205811/ - http://www.?ickr.com/photos/sonictk/371595048/