Cloud Connect Santa Clara 2013: Web Acceleration and Front-End Optimization (Hooman Beheshti)

7,903 views

Published on

One approach to performance is to accelerate the network; another is to optimize the application by reducing how much the network is needed and pushing content out towards the user. In this session, Hooman Beheshti reveals how technologies like Front-End Optimization and Content Delivery Networks work alongside the rest of the cloud computing stack to improve performance and increase user productivity.

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

No Downloads
Views
Total views
7,903
On SlideShare
0
From Embeds
0
Number of Embeds
6,175
Actions
Shares
0
Downloads
32
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Cloud Connect Santa Clara 2013: Web Acceleration and Front-End Optimization (Hooman Beheshti)

  1. 1. Web Acceleration and Front End Optimization Cloud Connect 2013 Santa Clara Hooman Beheshti VP Technology, Strangeloop hooman@strangeloopnetworks.com
  2. 2. Web Application Acceleration• Means lots of things to lots of people – TCP optimization – Caching – HTTP protocol optimization – Compression – Etc• We’ll focus on “front-end” issues – Front-end Optimization (FEO) – Sometimes called WCO or WPO© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 2
  3. 3. Better Performance = Better Business© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 3
  4. 4. © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 4
  5. 5. Impact of page load time on average dailysearches per user 0.00%-0.10%-0.20%-0.30%-0.40%-0.50%-0.60%-0.70% 50ms pre- 100ms pre- 200ms 200ms post- 400ms post- header header post-header ads header© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 5
  6. 6. © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 6
  7. 7. Impact of additional delay on business metrics 0.00% -0.50% Percent change -1.00% -1.50% -2.00% -2.50% -3.00% -3.50% -4.00% -4.50% -5.00% 50 200 500 1000 2000 Added delay Queries per visitor Query refinement Revenue per visitor Any clicks Satisfaction© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 7
  8. 8. © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 8
  9. 9. Shopzilla had another angle Big, high-traffic site  16 month re- ◦ 100M impressions a engineering day ◦ Page load from 6 seconds to 1.2 ◦ 8,000 searches a ◦ Uptime from 99.65% to second 99.97% ◦ 20-29M unique visitors ◦ 10% of previous hardware a month needs ◦ 100M products© 2010 Strangeloop Networks http://en.oreilly.com/velocity2009/public/schedule/detail/7709 Strangeloop. Faster Websites. Automatically. 9
  10. 10. 5-12% increase in revenue© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 10
  11. 11. Mobile Case Study© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 11
  12. 12. Customer Profile• Top 200 Internet retailer, US based• Target geography: US and Europe• $3B in revenue• 30,000 employees© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 12
  13. 13. Page Views by Mobile Device© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 13
  14. 14. Experiment• Induce delay on HTML – 200msec, 500msec, 1000msec• Apply to small percentage of traffic• 12 weeks• Monitor impact on key business metrics© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 14
  15. 15. Results© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 15
  16. 16. Impact on Bounce Rate© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 16
  17. 17. Impact on Returning Visitors© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 17
  18. 18. More Details• http://www.webperformancetoday.com/2011/11/2 3/case-study-slow-page-load-mobile-business- metrics/• http://velocityconf.com/velocityeu/public/schedul e/detail/21632© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 18
  19. 19. What Is FEO?© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 19
  20. 20. What Is FEO? 0 6 12© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 20
  21. 21. What Is FEO? 0 6 12© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 21
  22. 22. What Is FEO? DNS TTFB TCP Download Connection 0 6 12© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 22
  23. 23. What Is FEO? Back End: The time from when the request is made by the browser to last byte of the HTML response Front End: Everything after the HTML arrives Important Timers: Start Render onload (Document Complete) 0 6 12© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 23
  24. 24. Google’s Waterfall Chart© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 24
  25. 25. Measurement/Tools© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 25
  26. 26. Waterfall Analysis• Best way to address front-end problems is to diagnose your site/application through waterfall analysis© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 26
  27. 27. Waterfall Tools: webpagetest.org© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 27
  28. 28. Waterfall Tools: HTTPWatch© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 28
  29. 29. Waterfall Tools: Firebug© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 29
  30. 30. Waterfall Tools: WebKit Dev Tools© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 30
  31. 31. Waterfall Tools: PCAP2HAR© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 31
  32. 32. Measurement – a pretty big deal• Synthetic performance “proxies” – Backbone testing services – Desktop tools and browser plugins – Browser-based tests – But: • Not real users • Often no latency/bandwidth limitations imposed on testing agents© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 32
  33. 33. Measurement – a pretty big deal• Real User Monitoring (RUM) – Using real user beacons – Services available – Can build your own – Now a part of Google Analytics – Caveat: need lots of data!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 33
  34. 34. W3C’s Navigation Timing https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 34
  35. 35. Front End Problems© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 35
  36. 36. Front End Performance Problems© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 36
  37. 37. Front End Performance Problems• Latency: – every round trip incurs a latency penalty© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 37
  38. 38. Front End Performance Problems• Latency: – every round trip incurs a latency penalty• Payload: – last mile bandwidth isn’t infinite© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 38
  39. 39. Front End Performance Problems• Latency: – every round trip incurs a latency penalty• Payload: – last mile bandwidth isn’t infinite• Caching: – coming back to the page must be much faster© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 39
  40. 40. Front End Performance Problems• Latency: – every round trip incurs a latency penalty• Payload: – last mile bandwidth isn’t infinite• Caching: – coming back to the page must be much faster• Rendering: – browser work takes time© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 40
  41. 41. Client Platforms• Desktop vs Mobile – Desktop browsers have more access to compute resources – Larger screens – Faster networks (lower latency)• The problems are often similar – Addressing them is often different© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 41
  42. 42. Addressing Front End Problems© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 42
  43. 43. Latency• TTFB (Time To First Byte)• Every fetch incurs the latency penalty• Two ways to address the problem: – Reduce latency – Get rid of round trips© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 43
  44. 44. CDN• Global network of caching proxies that gets content closer to all your users• The closer the asset, the lower the latency• CDNs have become a core piece of infrastructure for most modern web sites and services• Lots of vendors to choose from© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 44
  45. 45. CDN Edge Cache Edge Cache Origin Origin Edge Cache Data Center Edge Cache© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 45
  46. 46. CDN• Small object delivery – Only static assets are placed on edge caches – Users go direct to origin to get dynamic content – HTML pages reference objects on the CDN• Whole Site Delivery (Dynamic Site Acceleration) – All transactions go through CDN, even dynamic content – More than caching • Acceleration • Security • Optimization Origi – More expensive n Da© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 46
  47. 47. CDN Per object TTFB savings of ~50%© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 47
  48. 48. CDN: because physics!!• Well understood way to leverage science• Mitigates the latency problem by reducing it for the majority of your users• Less effective when it comes to mobile users© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 48
  49. 49. Mobile Networks (3G example)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 49
  50. 50. Resource Consolidation• Eliminating round trips altogether also fights the latency problem, often more effectively Combine images into fewer "packages"© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 50
  51. 51. Resource Consolidation• A number of consolidation techniques – Images (sprites) – JavaScript/CSS consolidation/concatenation – Inlining (DataURI for images) – MHTML (IE only)• Browser makes one request for the “package”• HTML is marked up so the browser can get individual resources from inside the package© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 51
  52. 52. Payload Reduction• Bytes still need to get from server (cloud or otherwise) to client• Ways to reduce bytes: – HTTP compression – JS/CSS minification – Image compression (lossless or lossy)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 52
  53. 53. Payload Reduction• Any reduction in bytes will make pages load faster• This is particularly important with mobile clients© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 53
  54. 54. Browser Caching• The browser cache is a resource seldom used optimally• Reasons why we generally don’t do good browser caching – Caching rules are often complicated – We never want to server stale content© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 54
  55. 55. Browser Caching• Use long expiry on static objects – Served from origin – Served from CDN• Invalidation framework is a must – Protect against serving stale content – Example: versioning /images/image.jpg  /images/image.jpg?v=00001© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 55
  56. 56. Browser Caching on Mobile Platforms• Different than desktop• The cache available to the browsers is relatively small• Use HTML5’s localStorage instead of browser cache – A programmable cache, unlike HTTP object caches – Limited size (~2.5MB per domain) – Good for caching CSS/JS, and small images© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 56
  57. 57. Rendering Issues• More complicated• The order of events in the browser makes a difference to how fast a page looks – Put things in the optimal order for rendering• Deferral – CSS and JS (sometimes images) • Not at the expense of a page’s start render – Asynchronous JavaScript• 3rd party services have an impact on page rendering• Above the fold vs below the fold© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 57
  58. 58. “The HTML Problem”© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 58
  59. 59. Performance Pain: The HTML Problem• HTML base pages are often generated after the server runs some business logic• This is typically observed as “server think time”, which affects time to first byte© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 59
  60. 60. Performance Pain: The HTML Problem TTFB = Latency + Server think time• HTML base pages are often generated after the server runs some business logic• This is typically observed as “server think time”, which affects time to first byte© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 60
  61. 61. Performance Pain: The HTML Problem TTFB = Latency + Server think time• HTML base pages are often generated after the server runs some business logic• This is typically observed as B “server think time”, which affects L time to first byte O C K E D© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 61
  62. 62. Performance Pain: The HTML Problem TTFB = Latency + Server think time• HTML base pages are often generated after the server runs some business logic• This is typically observed as B “server think time”, which affects L time to first byte O C• Not always logic related: could K be caused by issues within the E cloud infrastructure itself D• HTML is often seen as dynamic• Cannot be cached, anywhere in the network© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 62
  63. 63. HTML Caching• Some level of caching for HTML is generally a good idea• This is especially true if HTML isn’t truly dynamic and is static for small periods of time• Great for server offload• Solutions that allow granular caching of HTML© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 63
  64. 64. Some Examples© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 64
  65. 65. Before and After Waterfalls Before FEO After FEO First Time Visitor 58 roundtrips  5 roundtrips 4.2 seconds  1.1 seconds Repeat Visitor 57 roundtrips  4 roundtrips 3.2 seconds  0.7 seconds© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 65
  66. 66. Cloud Connect Home Page© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 66
  67. 67. Cloud Connect Home Page 2.8 sec 5.63 sec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 67
  68. 68. Cloud Connect Home Page FEO 2.8 sec 5.63 sec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 68
  69. 69. Cloud Connect Home Page FEO 2.8 sec To onload Before After Round Trips 122 58 5.63 sec KBytes 1024 895© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 69
  70. 70. Cloud Connect Home Page FEO Start Render: +36% 1.8 Doc Complete: +35.5% se c 2.8 sec 3.64 sec To onload Before After Round Trips 122 58 5.63 sec KBytes 1024 895© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 70
  71. 71. What Does it Look Like? http://youtu.be/uszBaW5yMI0© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 71
  72. 72. Mobile Example• Velocity Conference 2012• Step-wise acceleration of O’reilly’s site (for a mobile phone on 3G) – Start with the original site (purposely made worse) – Add CDN – Add resource consolidation and payload reduction – Add deferrals• Examine impact of each© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 72
  73. 73. What Does it Look Like? http://youtu.be/iPtbU1KvLjM© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 73
  74. 74. Original Site + CDN 15.29 sec 13.7 sec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 74
  75. 75. Add Consolidation and Payload Reduction 9.47 sec To onload Before After 13.7 sec # of resources 92 28 KBytes 727 417© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 75
  76. 76. Add Deferral© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 76
  77. 77. Add Deferral© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 77
  78. 78. Add Deferral 2.2 sec 3.6 sec 9.47 sec 5.56 sec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 78
  79. 79. What Does it Look Like? http://youtu.be/zTTxdAtbhsg© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 79
  80. 80. Summing up…© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 80
  81. 81. Sounds Really Easy!• It’s not!• Some techniques are just difficult to implement• Optimizing for performance sometimes requires significant dev resources – Mortal companies can’t afford to sacrifice new feature cycles• Maintenance and upkeep is a constant problem – Every version to roll out will need optimization© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 81
  82. 82. FEO Automation Industry• Solutions available to automatically do this stuff• Multiple deployment options – Software/Hardware/Service – Cloud apps will use either service or software• The goal is to “fix the code” for performance, automatically© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 82
  83. 83. It Gets Complicated• Rewriting HTML can break pages• You have to do this stuff based on browser – Play to the strength of each browser (supported techniques, etc) – Stay away from their weaknesses (bugs, undocumented issues, etc) – Mobile is its own beast• Optimizing once per page isn’t enough – First view (cold cache) – Repeat view (warm cache) – User flow© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 83
  84. 84. When Looking For FEO Automation• Do your research, and understand your needs• Understand the deployment model and how disruptive it will be to you, if at all• Are there provisions in place for breaking pages• Granularity in functionality: – Browser-based optimization – mobile – first/repeat views – transaction flows• Choose what’s right for you, based on your needs© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 84
  85. 85. Thank Youhooman@strangeloopnetworks.com 85

×