Web Performance Automation - NY Web Performance Meetup

4,778 views
4,703 views

Published on

Slide deck from a presentation made by Strangeloop president Joshua Bixby

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,778
On SlideShare
0
From Embeds
0
Number of Embeds
2,390
Actions
Shares
0
Downloads
90
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • Optimizing web performance doesn’t just drive more traffic to a website. It also improves the user experience, increases revenue, and reduces operating costs. In 2010, there’s an important convergence happening between two previously divergent communities: The business community is aware of the direct relationship between site speed and business metrics. The technical community has a growing expertise and understanding of web performance issues.The gap between how sites currently perform and how users want sites to perform is still huge, but companies finally have the incentive – and access to tools – to bridge that gap. This year there’s a palpable urgency surrounding web performance optimization, as companies race to lead the pack in delivering sites that meet – and ideally, exceed – user expectations.
  • Web Performance Automation - NY Web Performance Meetup

    1. 1. Performance Automation<br />Making pages faster automatically<br />
    2. 2. Agenda<br /><ul><li> Introduction
    3. 3. What is performance automation
    4. 4. Basic terminology and concepts
    5. 5. Case Study
    6. 6. History of performance automation
    7. 7. Market overview and challenges
    8. 8. Q&A</li></li></ul><li>
    9. 9. Web Performance<br />
    10. 10. Making sites faster <br />without changing code<br />
    11. 11.
    12. 12. Basic terminology and concepts<br />
    13. 13.
    14. 14.
    15. 15.
    16. 16. Waterfall chart<br />11<br />
    17. 17. Waterfall chart<br />HTML<br />12<br />
    18. 18. Waterfall chart<br />HTML<br />Resources<br />13<br />
    19. 19. Waterfall chart<br />Start <br />Render<br />Document <br />Complete<br />Fully<br />Loaded<br />14<br />
    20. 20. Waterfall component breakdown<br />DNS lookup<br />DNS Lookup<br /><ul><li>Takes one packet in each direction
    21. 21. Time is limited to the latency of the connection (DSL/Cable/etc) for the single round trip</li></ul>15<br />
    22. 22. Waterfall component breakdown<br />TCP Connection<br />TCP Connection<br /><ul><li>3 packets</li></ul> - ClientServer (SYN)<br /> - ServerClient (SYN/ACK)<br /> - ClientServer (ACK)<br /><ul><li>Time is limited to the latency of the connection (DSL/Cable/etc) for the single round trip</li></ul>16<br />
    23. 23. Waterfall component breakdown<br />Time To First Byte<br />Time to First Byte<br /><ul><li>Time from the request packet (usually 1) to the first packet of the response
    24. 24. Includes the latency of the connect ion (DSL/Cable/etc) for a single round trip
    25. 25. Also includes whatever server think time was involved in generating the response</li></ul>17<br />
    26. 26. Waterfall component breakdown<br />Content Download<br />Download<br /><ul><li>Time it takes for the entire content of the response to get to the browser
    27. 27. Mostly limited by the bandwidth limit of the connection (DSL/Cable/etc)</li></ul>18<br />
    28. 28. First view vs Repeat View<br />19<br />
    29. 29. Concurrency<br />Concurrency<br /><ul><li>Blocking script don't let the browser use available resources (network, connections, etc) to fetch more content from the server
    30. 30. The overall page load time and render time are both affected negatively</li></ul>Blocking<br />Concurrent<br />20<br />
    31. 31. Case Study: Automation in action<br />
    32. 32. Methodology<br />
    33. 33. Let’s Automate<br />
    34. 34.
    35. 35. A Few Points of Clarification<br />We’ll use it to describe where performance pain points are, but that doesn’t mean the page actually has these problems<br />What we’re going to do:<br />Improve performance incrementally<br />Not so good<br />(slow)<br />Awesome<br />(fast)<br />* The real Velocity site is somewhere in the middle!<br />
    36. 36. Performance Summary<br />http://bit.ly/au01VY /<br />
    37. 37. Waterfall<br />First View<br />Repeat View<br />
    38. 38. Per Object<br />
    39. 39. Content Analysis by Type<br />
    40. 40. Content Analysis by Domain<br />
    41. 41. Show Me Where It Hurts<br />Problem Analysis<br />
    42. 42. Performance Problems<br />Too many connections (too much orange)<br />
    43. 43. Too Many Connections<br />97 Connections<br />(almost one per request)<br />
    44. 44. Too Many Connections<br />
    45. 45. Performance Problems<br />Too many connections (too much orange)<br />Too many bytes (too much blue)<br />
    46. 46. Too Many Bytes<br />By Type<br />By Domain<br />
    47. 47. Performance Problems<br />Too many connections (too much orange)<br />Too many bytes (too much blue)<br />Concurrency<br />
    48. 48. Concurrency<br />Browsers can only open and use so many connections at once<br />www.browserscope.org<br />
    49. 49. Performance Problems<br />Too many connections (too much orange)<br />Too many bytes (too much blue)<br />Concurrency<br />Bad Caching for repeat views<br />
    50. 50. Bad Repeat View<br />Full Fetches<br />Validation<br />
    51. 51. Bad Repeat View<br />Connections<br />Bytes<br />
    52. 52. Performance Problems<br />Too many connections (too much orange)<br />Too many bytes (too much blue)<br />Concurrency<br />Bad Caching for repeat views<br />No CDN (the greens are too big)<br />
    53. 53. The Green Problem #1: No CDN<br />TTFB<br />
    54. 54. Performance Problems<br />Too many connections (too much orange)<br />Too many bytes (too much blue)<br />Concurrency<br />Bad Caching for repeat views<br />No CDN (the greens are too big)<br />Too Many Roundtrips (too many greens)<br />
    55. 55. The Green Problem #2: Roundtrips<br />Repeat View<br />First View<br />80 Requests<br />78 Requests<br />27 Requests<br />14 Requests<br />
    56. 56. The Green Problem #2: Roundtrips<br />Every fetch still pays the HTTP overhead penalty  TTFB is still a problem<br />Exacerbated by concurrency issues<br />Getting worse as number of objects per page grows<br />Generally, the hardest problem to solve<br />
    57. 57. Performance Problems<br />Too many connections<br />Too many bytes (too much blue)<br />Concurrency<br />Bad Caching for repeat views<br />No CDN (the greens are too big)<br />Too Many Roundtrips (too many greens)<br />Others<br />
    58. 58. Examples of Other Problems<br />Blocking Javascript<br />3rd party calls (http://stevesouders.com/p3pc/)<br />
    59. 59. What it looks like<br />http://bit.ly/velocity-original<br />
    60. 60. Summary<br />
    61. 61. Let’s Fix It!!<br />
    62. 62. Set-Up<br />
    63. 63. Testing Environment<br />WebPageTest Client<br />(East Coast)<br />O’Reilly Datacenter <br />(West Coast)<br />SERVICE (CLOUD)<br />
    64. 64. Acceleration Methodology<br />
    65. 65. Stepwise Acceleration<br />Start from the beginning and fix the easy stuff<br />Step by step acceleration of the page<br />Apply techniques/methods/etc and see the result<br />Try to make it as fast as possible<br />
    66. 66. Step 1: Low Hanging Fruit<br />
    67. 67. Keep-Alive<br />Solves the too-many connection problem (Less Orange!)<br />Will help alleviate the TCP connection setup overhead<br />97 <br />Connections<br />
    68. 68. Compression<br />Addresses the too-many-bytes problem (Less Blue!)<br />We’ll compress textual content (html/css/etc)<br />Not the only solution to less blue, but the easiest<br />
    69. 69. WebPageTest<br />http://bit.ly/cKkjGz<br />
    70. 70. Before and After<br />~17.8sec<br />~10.5sec<br />
    71. 71. What We Helped: Keep-Alive<br />97 Connections  19 Connections<br />
    72. 72. What We Helped: Compression<br />
    73. 73. How Did We Do?<br />Original<br />KA+Comp<br />Improvement<br />First View <br />Repeat View<br />52%<br />71%<br />34%<br />94%<br />31%<br />51%<br />23%<br />75%<br />40%<br />62%<br />
    74. 74. What it looks like<br />http://bit.ly/velocity-keep-alives<br />
    75. 75. Pros and Cons<br />Pros<br />Really easy to do<br />Single configuration switches in servers, proxies, or load balancers<br />Good benefit seen right away<br />Cons<br />Compression has processing overhead<br />On their own they’re just not enough<br />
    76. 76. Step 2: Repeat View Problem<br />
    77. 77. Poor Client Side Caching<br />Original<br />KA+Comp<br />
    78. 78. Problem Still Exists<br />~6.2sec<br />
    79. 79. How Do We Get Better Caching<br />RFC 2616, Section 13<br />Caching headers should be used on static (non-changing) objects, so they can be cached browser-side <br />And by intermediate caching proxies<br />Validators are not enough<br />
    80. 80. WebPageTest<br />http://bit.ly/aCP3iX<br />
    81. 81. Before and After<br />~2.0sec<br />~6.2sec<br />
    82. 82. How Did We Do?<br />KA+Comp<br />With Good Caching<br />Improvement<br />Repeat View<br />70%<br />42%<br />67%<br />
    83. 83. Pros and Cons<br />Pros<br />Good caching can have a major performance impact on repeat visits to a page<br />Sometimes it’s easy to do<br />Browsers generally pay attention (although interpretation may vary slightly)<br />Cons<br />The spec appears scary<br />Invalidation and stale content<br />
    84. 84. Step 3: CDN<br />
    85. 85. What Does a CDN do?<br />Global network of proxy caches<br />Get cacheable content close to users<br />Reduce TTFB (smaller greens)<br />
    86. 86. TTFB Problem<br />
    87. 87. WebPageTest<br />http://bit.ly/a9ZJcF<br />
    88. 88. Before and After<br />~8.3sec<br />~10.5sec<br />
    89. 89. TTFB Savings<br />Per object TTFB savings of ~50%<br />
    90. 90. How Did We Do?<br />KA+Comp<br />+CDN<br />Improvement<br />First View<br />21%<br />17%<br />22%<br />0.7 sec<br />2.3 sec<br />2.7 sec<br />Seconds Gained<br />
    91. 91. What it looks like<br />http://bit.ly/velocity-CDN<br />
    92. 92. Pros and Cons<br />Pro<br />Good mitigation of the TTFB problem<br />Established industry: lots of vendors to choose from<br />Cons<br />Sometimes costly<br />May require code change (CDN’ed objects should be written to the CDN domain)<br />
    93. 93. Step 4: Steroids - the Hard Stuff<br />
    94. 94. We Can Get Better!<br />Still too many roundtrips<br />Still too many bytes<br />Not Fast Enough!!<br />
    95. 95. What to do Next?<br />Reduce Roundtrips<br />Combine images<br />Combine JavaScript<br />Combine CSS<br />Reduce Payload even more<br />Minify CSS and JavaScript<br />Add Image Compression<br />Increase Concurrency<br />Add a couple of domains to the mix<br />
    96. 96. WebPageTest<br />http://bit.ly/bbT3v4<br />
    97. 97. Before and After<br />~3.8sec<br />~8.3sec<br />
    98. 98. How Did We Do?<br />+CDN<br />81<br />107<br />+Strangeloop<br />11<br />37<br />Improvement<br />First View<br />19%<br />30%<br />54%<br />45%<br />31%<br />0.5 sec<br />4.6 sec<br />4.1 sec<br />Seconds Gained<br />
    99. 99. What it looks like<br />http://bit.ly/velocity-awesomest<br />
    100. 100. Pros and Cons<br />Pros<br />Most significant benefit for the hardest part of the acceleration lifecycle<br />Address multiple performance points (somtimes multiple ones with the same technique)<br />Cons<br />It’s not easy<br />Regression<br />
    101. 101. Other performance opportunities<br />
    102. 102. 3rd Party content & Javascript<br />
    103. 103. AdditionalTCP based optimizations*<br />*Image credit: FastSoft[http://www.fastsoft.com/how-it-works/]<br />
    104. 104. DNS based optimizations<br />
    105. 105. Different Browsers<br />Safari Mobile<br />IE 7<br />IE 8<br />IE 6<br />FireFox 3<br />Chrome 4<br />Chrome 5<br />FireFox 2<br />Safari 4<br />
    106. 106. Flow<br />Conversion<br />?<br />?<br />?<br />3.8 Seconds<br />11 Roundtrips<br />
    107. 107. Performance automation market<br />
    108. 108. 1993<br />2002<br />1999<br />2006<br />2000<br />2007<br />1996<br />1995<br />1998<br />2004<br />2003<br />2009<br />2008<br />2010<br />
    109. 109. History of performance automation<br />“I will deliver what the server gives me as efficiently as possible to the browser.”<br />“I will transform what the server gives me to optimize it for the user’s browser”<br />Delivery<br />Transformation<br />
    110. 110. Deliveryvs Transformation<br />Transformation <br />Delivery<br />Original<br />9.5 seconds<br />63 roundtrips<br />5.7 seconds<br />63 roundtrips<br />2.1 seconds<br />9 roundtrips<br />
    111. 111. Delivery market<br />
    112. 112. Delivery market<br />
    113. 113. Players delivery market<br />
    114. 114. Transformation market<br />
    115. 115. Transformation market<br />
    116. 116. Transformation market<br />
    117. 117. Performance automation challenges<br />
    118. 118. Challenges<br /><ul><li>Javascript
    119. 119. Ajax
    120. 120. Flash
    121. 121. Mobile
    122. 122. Third Party Content
    123. 123. Browsers
    124. 124. Bad code- no standardization
    125. 125. Measurment- How and What</li></li></ul><li>Opportunity<br />
    126. 126. “Speed is the next competitive advantage.” <br />- Steve Souders, Google<br />
    127. 127. Q&A<br />

    ×