世の中にはさまざまなパフォーマンスTipsがあり対応したものの、本当にこれって効果でているの？とは思ったことはないでしょうか。たぶん速くなっただろう……で終わってないでしょうか。 本セッションでは、まずブラウザにページが表示されるまでの仕組みを学びつつ、どこにコストをかければいいのか理解します。各段階別のツールでちゃんと効果測定すれば自己満足で終わらない仕事が可能です！

1. Measuring Web Performance
自己満足で終わらないためのパフォーマンス計測
Internet Business Headquarters
Web developer Koji Ishimoto
2012.06.30 @CSS Nite LP23

2. t32k.me

3. 2012.06.01
Joined!

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
Configure 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
Configure 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
Configure 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

44. PageSpeed Insights

45. PageSpeed Insights

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%

69. Remove JavaScript Files

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.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/