Slide deck from a presentation made by Strangeloop president Joshua Bixby

1. Performance Automation Making pages faster automatically

3. What is performance automation

4. Basic terminology and concepts

5. Case Study

6. History of performance automation

7. Market overview and challenges

9. Web Performance

10. Making sites faster without changing code

12. Basic terminology and concepts

16. Waterfall chart 11

17. Waterfall chart HTML 12

18. Waterfall chart HTML Resources 13

19. Waterfall chart Start Render Document Complete Fully Loaded 14

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

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

25. Also includes whatever server think time was involved in generating the response17

27. Mostly limited by the bandwidth limit of the connection (DSL/Cable/etc)18

28. First view vs Repeat View 19

30. The overall page load time and render time are both affected negativelyBlocking Concurrent 20

31. Case Study: Automation in action

32. Methodology

33. Let’s Automate

35. 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!

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

37. Waterfall First View Repeat View

38. Per Object

39. Content Analysis by Type

40. Content Analysis by Domain

41. Show Me Where It Hurts Problem Analysis

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

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

44. Too Many Connections

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

46. Too Many Bytes By Type By Domain

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

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

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

50. Bad Repeat View Full Fetches Validation

51. Bad Repeat View Connections Bytes

52. 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)

53. The Green Problem #1: No CDN TTFB

54. 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)

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

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

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

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

59. What it looks like http://bit.ly/velocity-original

60. Summary

61. Let’s Fix It!!

62. Set-Up

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

64. Acceleration Methodology

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

66. Step 1: Low Hanging Fruit

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

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

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

70. Before and After ~17.8sec ~10.5sec

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

72. What We Helped: Compression

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

74. What it looks like http://bit.ly/velocity-keep-alives

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

76. Step 2: Repeat View Problem

77. Poor Client Side Caching Original KA+Comp

78. Problem Still Exists ~6.2sec

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

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

81. Before and After ~2.0sec ~6.2sec

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

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

84. Step 3: CDN

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

86. TTFB Problem

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

88. Before and After ~8.3sec ~10.5sec

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

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

91. What it looks like http://bit.ly/velocity-CDN

92. 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)

93. Step 4: Steroids - the Hard Stuff

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

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

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

97. Before and After ~3.8sec ~8.3sec

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

99. What it looks like http://bit.ly/velocity-awesomest

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

101. Other performance opportunities

102. 3rd Party content & Javascript

103. AdditionalTCP based optimizations* *Image credit: FastSoft[http://www.fastsoft.com/how-it-works/]

104. DNS based optimizations

105. Different Browsers Safari Mobile IE 7 IE 8 IE 6 FireFox 3 Chrome 4 Chrome 5 FireFox 2 Safari 4

106. Flow Conversion ? ? ? 3.8 Seconds 11 Roundtrips

107. Performance automation market

108. 1993 2002 1999 2006 2000 2007 1996 1995 1998 2004 2003 2009 2008 2010

109. History of performance automation “I will deliver what the server gives me as efficiently as possible to the browser.” “I will transform what the server gives me to optimize it for the user’s browser” Delivery Transformation

110. Deliveryvs Transformation Transformation Delivery Original 9.5 seconds 63 roundtrips 5.7 seconds 63 roundtrips 2.1 seconds 9 roundtrips

111. Delivery market

112. Delivery market

113. Players delivery market

114. Transformation market

115. Transformation market

116. Transformation market

117. Performance automation challenges

119. Ajax

120. Flash

121. Mobile

122. Third Party Content

123. Browsers

124. Bad code- no standardization

126. “Speed is the next competitive advantage.” - Steve Souders, Google

127. Q&A