The document discusses performance automation, including: - Basic terminology like waterfall charts and how they break down page load times. - A case study showing how automation identified issues like too many connections, bytes, and roundtrips on a site and incrementally improved performance through techniques like caching, CDNs, minification, and domain sharding. - The history and evolution of the performance automation market from delivery to more advanced transformation tools. Challenges include supporting new technologies and standardizing measurements. Speed remains an important opportunity area.

1. Performance AutomationMaking pages faster automatically

2. Agenda Introduction

3. What is performance automation

4. Basic terminology and concepts

5. Case Study

6. History of performance automation

7. Market overview and challenges

8. Q&A

9. Web Performance

10. Making sites faster without changing code

12. Basic terminology and concepts

16. Waterfall chart11

17. Waterfall chartHTML12

18. Waterfall chartHTMLResources13

19. Waterfall chartStart RenderDocument CompleteFullyLoaded14

20. Waterfall component breakdownDNS lookupDNS LookupTakes one packet in each direction

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

22. Waterfall component breakdownTCP ConnectionTCP Connection3 packets - ClientServer (SYN) - ServerClient (SYN/ACK) - ClientServer (ACK)Time is limited to the latency of the connection (DSL/Cable/etc) for the single round trip16

23. Waterfall component breakdownTime To First ByteTime to First ByteTime from the request packet (usually 1) to the first packet of the response

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

26. Waterfall component breakdownContent DownloadDownloadTime it takes for the entire content of the response to get to the browser

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

28. First view vs Repeat View19

29. ConcurrencyConcurrencyBlocking script don't let the browser use available resources (network, connections, etc) to fetch more content from the server

30. The overall page load time and render time are both affected negativelyBlockingConcurrent20

31. Case Study: Automation in action

32. Methodology

33. Let’s Automate

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

36. Performance Summaryhttp://bit.ly/au01VY /

37. WaterfallFirst ViewRepeat View

38. Per Object

39. Content Analysis by Type

40. Content Analysis by Domain

41. Show Me Where It HurtsProblem Analysis

42. Performance ProblemsToo many connections (too much orange)

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

44. Too Many Connections

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

46. Too Many BytesBy TypeBy Domain

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

48. ConcurrencyBrowsers can only open and use so many connections at oncewww.browserscope.org

49. Performance ProblemsToo many connections (too much orange)Too many bytes (too much blue)ConcurrencyBad Caching for repeat views

50. Bad Repeat ViewFull FetchesValidation

51. Bad Repeat ViewConnectionsBytes

52. Performance ProblemsToo many connections (too much orange)Too many bytes (too much blue)ConcurrencyBad Caching for repeat viewsNo CDN (the greens are too big)

53. The Green Problem #1: No CDNTTFB

54. Performance ProblemsToo many connections (too much orange)Too many bytes (too much blue)ConcurrencyBad Caching for repeat viewsNo CDN (the greens are too big)Too Many Roundtrips (too many greens)

55. The Green Problem #2: RoundtripsRepeat ViewFirst View80 Requests78 Requests27 Requests14 Requests

56. The Green Problem #2: RoundtripsEvery fetch still pays the HTTP overhead penalty  TTFB is still a problemExacerbated by concurrency issuesGetting worse as number of objects per page growsGenerally, the hardest problem to solve

57. Performance ProblemsToo many connectionsToo many bytes (too much blue)ConcurrencyBad Caching for repeat viewsNo CDN (the greens are too big)Too Many Roundtrips (too many greens)Others

58. Examples of Other ProblemsBlocking Javascript3rd party calls (http://stevesouders.com/p3pc/)

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

60. Summary

61. Let’s Fix It!!

62. Set-Up

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

64. Acceleration Methodology

65. Stepwise AccelerationStart from the beginning and fix the easy stuffStep by step acceleration of the pageApply techniques/methods/etc and see the resultTry to make it as fast as possible

66. Step 1: Low Hanging Fruit

67. Keep-AliveSolves the too-many connection problem (Less Orange!)Will help alleviate the TCP connection setup overhead97 Connections

68. CompressionAddresses 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. WebPageTesthttp://bit.ly/cKkjGz

70. Before and After~17.8sec~10.5sec

71. What We Helped: Keep-Alive97 Connections  19 Connections

72. What We Helped: Compression

73. How Did We Do?OriginalKA+CompImprovementFirst View Repeat View52%71%34%94%31%51%23%75%40%62%

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

75. Pros and ConsProsReally easy to doSingle configuration switches in servers, proxies, or load balancersGood benefit seen right awayConsCompression has processing overheadOn their own they’re just not enough

76. Step 2: Repeat View Problem

77. Poor Client Side CachingOriginalKA+Comp

78. Problem Still Exists~6.2sec

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

80. WebPageTesthttp://bit.ly/aCP3iX

81. Before and After~2.0sec~6.2sec

82. How Did We Do?KA+CompWith Good CachingImprovementRepeat View70%42%67%

83. Pros and ConsProsGood caching can have a major performance impact on repeat visits to a pageSometimes it’s easy to doBrowsers generally pay attention (although interpretation may vary slightly)ConsThe spec appears scaryInvalidation and stale content

84. Step 3: CDN

85. What Does a CDN do?Global network of proxy cachesGet cacheable content close to usersReduce TTFB (smaller greens)

86. TTFB Problem

87. WebPageTesthttp://bit.ly/a9ZJcF

88. Before and After~8.3sec~10.5sec

89. TTFB SavingsPer object TTFB savings of ~50%

90. How Did We Do?KA+Comp+CDNImprovementFirst View21%17%22%0.7 sec2.3 sec2.7 secSeconds Gained

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

92. Pros and ConsProGood mitigation of the TTFB problemEstablished industry: lots of vendors to choose fromConsSometimes costlyMay 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 roundtripsStill too many bytesNot Fast Enough!!

95. What to do Next?Reduce RoundtripsCombine imagesCombine JavaScriptCombine CSSReduce Payload even moreMinify CSS and JavaScriptAdd Image CompressionIncrease ConcurrencyAdd a couple of domains to the mix

96. WebPageTesthttp://bit.ly/bbT3v4

97. Before and After~3.8sec~8.3sec

98. How Did We Do?+CDN81107+Strangeloop1137ImprovementFirst View19%30%54%45%31%0.5 sec4.6 sec4.1 secSeconds Gained

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

100. Pros and ConsProsMost significant benefit for the hardest part of the acceleration lifecycleAddress multiple performance points (somtimes multiple ones with the same technique)ConsIt’s not easyRegression

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 BrowsersSafari MobileIE 7IE 8IE 6FireFox 3Chrome 4Chrome 5FireFox 2Safari 4

106. FlowConversion???3.8 Seconds11 Roundtrips

107. Performance automation market

108. 19932002199920062000200719961995199820042003200920082010

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”DeliveryTransformation

110. Deliveryvs TransformationTransformation DeliveryOriginal9.5 seconds63 roundtrips5.7 seconds63 roundtrips2.1 seconds9 roundtrips

111. Delivery market