You know that performance is crucial to your company's success, but do the people in the corner office know this? You need to get the message across using the language they speak and targeting the goals they care about. This session -- presented by Strangeloop president Joshua Bixby at the 2011 Web Performance Summit -- summarizes the benefits of a faster website or web app, then delves into a series of how-tos for creating a business case for web performance in your organization.

1. Performance in business terms

3. Basic terminology and concepts

4. Case study

5. Performance stats and examples

6. 5 minute performance benchmark

7. Business case

10. Web Performance

12. Basic terminology and concepts

13. 8 www.strangeloopnetworks.com

15. Waterfall chart 10

16. Waterfall chart HTML 11

17. Waterfall chart HTML Resources 12

18. Waterfall chart Start Render Document Complete Fully Loaded 13

20. Time is limited to the latency of the connection (DSL/Cable/etc) for the single round trip14

23. Includes the latency of the connect ion (DSL/Cable/etc) for a single round trip

24. Also includes whatever server think time was involved in generating the response16

26. Mostly limited by the bandwidth limit of the connection (DSL/Cable/etc)17

27. First view vs Repeat View 18

29. The overall page load time and render time are both affected negatively)Blocking Concurrent 19

30. Case Study: Automation in action

31. Methodology

32. Let’s Automate

34. A Few Points of Clarification We’ll use it to describe where performance pain points are, but that doesn’t mean the page actually has these problems What we’re going to do: Improve performance incrementally Not so good (slow) Awesome (fast) * The real Velocity site is somewhere in the middle!

35. Performance Summary http://bit.ly/au01VY /

36. Waterfall First View Repeat View

37. Per Object

38. Content Analysis by Type

39. Content Analysis by Domain

40. Show Me Where It Hurts Problem Analysis

41. Performance Problems Too many connections (too much orange)

42. Too Many Connections 97 Connections (almost one per request)

43. Too Many Connections

44. Performance Problems Too many connections (too much orange) Too many bytes (too much blue)

45. Too Many Bytes By Type By Domain

46. Performance Problems Too many connections (too much orange) Too many bytes (too much blue) Concurrency

47. Concurrency Browsers can only open and use so many connections at once www.browserscope.org

48. Performance Problems Too many connections (too much orange) Too many bytes (too much blue) Concurrency Bad Caching for repeat views

49. Bad Repeat View Full Fetches Validation

50. Bad Repeat View Connections Bytes

51. Performance Problems Too many connections (too much orange) Too many bytes (too much blue) Concurrency Bad Caching for repeat views No CDN (the greens are too big)

52. The Green Problem #1: No CDN TTFB

53. Performance Problems Too many connections (too much orange) Too many bytes (too much blue) Concurrency Bad Caching for repeat views No CDN (the greens are too big) Too Many Roundtrips (too many greens)

54. The Green Problem #2: Roundtrips Repeat View First View 80 Requests 78 Requests 27 Requests 14 Requests

55. The Green Problem #2: Roundtrips Every fetch still pays the HTTP overhead penalty  TTFB is still a problem Exacerbated by concurrency issues Getting worse as number of objects per page grows Generally, the hardest problem to solve

56. Performance Problems Too many connections Too many bytes (too much blue) Concurrency Bad Caching for repeat views No CDN (the greens are too big) Too Many Roundtrips (too many greens) Others

57. Examples of Other Problems Blocking Javascript 3rd party calls (http://stevesouders.com/p3pc/)

58. Before and after: Keep-alives & compression http://www.youtube.com/watch?v=KPYBF41yiFw

59. Summary

60. Let’s Fix It!!

61. Set-Up

62. Testing Environment WebPageTest Client (East Coast) O’Reilly Datacenter (West Coast) Automation SERVICE (CLOUD)

63. Acceleration Methodology

64. Stepwise Acceleration Start from the beginning and fix the easy stuff Step by step acceleration of the page Apply techniques/methods/etc and see the result Try to make it as fast as possible

65. Step 1: Low Hanging Fruit

66. Keep-Alive Solves the too-many connection problem (Less Orange!) Will help alleviate the TCP connection setup overhead 97 Connections

67. Compression Addresses the too-many-bytes problem (Less Blue!) We’ll compress textual content (html/css/etc) Not the only solution to less blue, but the easiest

68. WebPageTest http://bit.ly/cKkjGz

69. Before and After ~17.8sec ~10.5sec

70. What We Helped: Keep-Alive 97 Connections  19 Connections

71. What We Helped: Compression

72. How Did We Do? Original KA+Comp Improvement First View Repeat View 52% 71% 34% 94% 31% 51% 23% 75% 40% 62%

74. Pros and Cons Pros Really easy to do Single configuration switches in servers, proxies, or load balancers Good benefit seen right away Cons Compression has processing overhead On their own they’re just not enough

75. Step 2: Repeat View Problem

76. Poor Client Side Caching Original KA+Comp

77. Problem Still Exists ~6.2sec

78. How Do We Get Better Caching RFC 2616, Section 13 Caching headers should be used on static (non-changing) objects, so they can be cached browser-side And by intermediate caching proxies Validators are not enough

79. WebPageTest http://bit.ly/aCP3iX

80. Before and After ~2.0sec ~6.2sec

81. How Did We Do? KA+Comp With Good Caching Improvement Repeat View 70% 42% 67%

82. Pros and Cons Pros Good caching can have a major performance impact on repeat visits to a page Sometimes it’s easy to do Browsers generally pay attention (although interpretation may vary slightly) Cons The spec appears scary Invalidation and stale content

83. Step 3: CDN

84. What Does a CDN do? Global network of proxy caches Get cacheable content close to users Reduce TTFB (smaller greens)

85. TTFB Problem

86. WebPageTest http://bit.ly/a9ZJcF

87. Before and After ~8.3sec ~10.5sec

88. TTFB Savings Per object TTFB savings of ~50%

89. How Did We Do? KA+Comp +CDN Improvement First View 21% 17% 22% 0.7 sec 2.3 sec 2.7 sec Seconds Gained

90. Before and after: Adding a CDN http://www.youtube.com/watch?v=BR5hO5rL8lE

91. Pros and Cons Pro Good mitigation of the TTFB problem Established industry: lots of vendors to choose from Cons Sometimes costly May require code change (CDN’ed objects should be written to the CDN domain)

92. Step 4: Steroids- the Hard Stuff

93. We Can Get Better! Still too many roundtrips Still too many bytes Not Fast Enough!!

94. What to do Next? Reduce Roundtrips Combine images Combine JavaScript Combine CSS Reduce Payload even more Minify CSS and JavaScript Add Image Compression Increase Concurrency Add a couple of domains to the mix

95. WebPageTest http://bit.ly/bbT3v4

96. Before and After ~3.8sec ~8.3sec

97. How Did We Do? +CDN 81 107 +Strangeloop 11 37 Improvement First View 19% 30% 54% 45% 31% 0.5 sec 4.6 sec 4.1 sec Seconds Gained

98. Before and after: The final, fastest version http://www.youtube.com/watch?v=IPn0T1UacIA

99. Pros and Cons Pros Most significant benefit for the hardest part of the acceleration lifecycle Address multiple performance points (somtimes multiple ones with the same technique) Cons It’s not easy Regression

100. Different Browsers Safari Mobile Chrome 10 IE 7 IE 8 IE 6 FireFox 4 Chrome 9 FireFox 3 Safari 5

101. Flow Conversion ? ? ? 3.8 Seconds 11 Roundtrips

108. “These stats don’t apply to me.”

111. “These stats don’t apply to me either.”

112. How to perform a 5-minute speed/revenue benefit analysis of your site

113. Step 1Perform WebPagetests in IE7 and IE8. Calculate the load time difference as a percentage.

114. Step 2Use Google Analytics to calculate your current order value per visit for IE7 and IE8.

115. Step 3Determine your order value per visit, by connection speed (cable, DSL, T1, dialup).

116. Step 3 con’tDetermine your order value per visit, by connection speed (cable, DSL, T1, dialup).

117. Step 4Correlate the results of steps 1 to 3 in simple graphs.

118. Step 5Test your site to get a sense of how much faster it could be. strangeloopnetworks.com/test-your-website

119. Step 6Compare these gains to your graphs from step 4. What lift can you anticipate in value per visit?

120. Caveats Correlation does not imply causation. Browser and connection speed might imply something about the buyer (i.e. s/he is more affluent) that is unrelated to the effects of speed.

121. But this trend seems to hold true in the real world.

122. Case study

123. How to be your company’s in-house performance evangelist

124. The average exec wants to know 3 things What’s in it for the company? What’s in it for me? How do we compare to our competitors?

125. When talking to an exec… Tell the time, not how the watch works. Most important, urgent point first. Keep it short. Keep it simple. Make it visual. Be ready to give context.

126. What to say: #1 “Our site is slower than our competitors. We’re losing money.”

129. What to say: #2 “We’ve proven that, when our site is faster for users, they spend more.”

130. What to say: #3 “This is where we should be aiming.”

131. What to say: #4 “Consumers expect EVERY website to load fast.”