Velocity 2012: The 90-Minute Mobile Optimization Life Cycle
Upcoming SlideShare
Loading in...5
×
 

Velocity 2012: The 90-Minute Mobile Optimization Life Cycle

on

  • 10,858 views

Strangeloop VP Technology Hooman Beheshti demonstrates – in real time – the impact of advanced mobile optimization techniques on another unsuspecting website....

Strangeloop VP Technology Hooman Beheshti demonstrates – in real time – the impact of advanced mobile optimization techniques on another unsuspecting website.

Over the course of the workshop, witness the mobile optimization life cycle, from start to finish:

- Taking the “Before” shot: Choosing a guinea pig site and benchmarking its current performance, focusing on load time, start render time and round trips.
- Iterating through core best practices, including: Keep-Alive, Compression, Far Future Expiry, and Use a CDN.
- Applying a set of advanced, automated, mobile-specific FEO techniques.
- Taking the “After” shot: Analyzing results using different browsers.

Statistics

Views

Total Views
10,858
Views on SlideShare
5,553
Embed Views
5,305

Actions

Likes
13
Downloads
134
Comments
0

28 Embeds 5,305

http://econsultancy.com 3351
http://www.strangeloopnetworks.com 1658
https://econsultancy.com 74
http://lanyrd.com 53
http://marketing-digital.wsimarketingeninternet.com 34
https://twimg0-a.akamaihd.net 23
https://si0.twimg.com 21
http://eventifier.co 20
http://apps.synaptive.net 18
http://translate.googleusercontent.com 11
http://blog.g4marketingonline.com 7
http://www.hanrss.com 6
http://core.traackr.com 4
http://stage.strangeloopnetworks.com 3
http://www.encarolina.com 3
http://bottlenose.com 2
http://www.newsblur.com 2
http://ebulletin.collected.info 2
http://strangeloopnetwork.net 2
http://76.77.72.158 2
http://www.strangeloopnetwork.com 2
http://www.diffbot.com&_=1356882926544 HTTP 1
http://www.diffbot.com&_=1356882942721 HTTP 1
http://www.diffbot.com&_=1356882912088 HTTP 1
http://131.253.14.250 1
http://electrosmart.com 1
http://cms.strangeloopnetworks.com 1
http://www.slashdocs.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Velocity 2012: The 90-Minute Mobile Optimization Life Cycle Presentation Transcript

  • 1. The 90-Minute Mobile Optimization Life Cycle Velocity 2012 Hooman Beheshti VP Technology, Strangeloop hooman@strangeloopnetworks.com
  • 2. Agenda•  Why is faster better?•  Measuring performance –  Tools –  Challenges•  Stepwise acceleration –  Pick a real site, and apply step by step performance optimizations•  Lessons from the field© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 2
  • 3. Mobile Performance OptimizationWhy Should We Care?
  • 4. Growth of Smartphone Sales(as % of total mobile phone sales)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 4
  • 5. Traffic from Mobile Devices (2011)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 5
  • 6. Mobile Sales© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 6
  • 7. Case Study© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 7
  • 8. 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. 8
  • 9. Page Views by Mobile Device© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 9
  • 10. 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. 10
  • 11. Results© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 11
  • 12. Impact on Bounce Rate© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 12
  • 13. Impact on Returning Visitors© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 13
  • 14. More Details•  http://www.webperformancetoday.com/ 2011/11/23/case-study-slow-page-load-mobile- business-metrics/•  http://velocityconf.com/velocityeu/public/ schedule/detail/21632© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 14
  • 15. Performance MeasurementMeasuring Page Speed on Mobile Devices
  • 16. Measurement•  Mobile measurement is still a challenge•  There are some tools out there –  Still pretty manual –  Less about performance and more about functionality –  Lots of simulation•  More complicated because of the number of different platforms and devices that we may need to cover•  Things are getting better© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 16
  • 17. Chrome Remote Debugging (ICS)•  A USB connection lets us see activity of mobile chrome on desktop chrome•  https://developers.google.com/chrome/mobile/ docs/debugging© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 17
  • 18. iWebInspector•  Web Inspector, but for iOS Simulator•  http://www.iwebinspector.com/© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 18
  • 19. Weinre (Web Inspector Remote)•  Remote debugging from the desktop for what the phone is doing•  http://people.apache.org/~pmuellr/weinre/docs/ latest/Home.html© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 19
  • 20. Aardwolf•  Remote JavaScript debugging (all platforms)•  http://lexandera.com/aardwolf/© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 20
  • 21. Mobile Perf Bookmarklet•  More focus on performance•  http://stevesouders.com/ mobileperf/mobileperfbkm.php•  Super bookmarklet with lots of tools built in© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 21
  • 22. PCAP2HAR•  Turn packet captures to waterfalls•  http://pcapperf.appspot.com/© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 22
  • 23. Real User Monitoring (RUM)•  RUM tools are increasing in availability –  Google Analytics –  New companies and solutions emerging•  Measurement on actual devices, for real users•  Need lots of data to draw conclusions –  And must have a way to deal with outliers•  Navigation Timing (only in Chrome for Android right now)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 23
  • 24. Webpagetest© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 24
  • 25. Webpagetest’s Mobile Agent•  Based on the recently open-sourced mobitest agent•  Interacts with the server just like a standard desktop agent•  Available for Android and iOS –  Still in the early stages, but key metrics are reported –  Some features (like scripting) don’t work –  Cold cache tests and videos are working fine –  For iOS, it uses UIWebView rather than Safari•  Even with the limitations, still the best tool for getting a feel for mobile performance© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 25
  • 26. Visualizing Performance© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 26
  • 27. Visualizing Performance 0 6 12© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 27
  • 28. Visualizing Performance DNS TTFB TCP Download Connection 0 6 12© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 28
  • 29. Visualizing Performance 0 6 12© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 29
  • 30. Visualizing Performance Back End: The time from when the request is made by the browser to last byte of the HTML response 0 6 12© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 30
  • 31. Visualizing Performance 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 0 6 12© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 31
  • 32. Visualizing Performance 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. 32
  • 33. Stepwise AccelerationAccelerating a Real Site
  • 34. Methodology© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 34
  • 35. Setup•  All testing done on 3G from Vancouver –  Nexus S with WPT agent –  Rogers Network•  Traffic flows through Strangeloop service –  We apply optimizations in the path –  Used host file entries since DNS overwrite isn’t available on the agent•  The phone does everything else© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 35
  • 36. Setup 3G Connection Origin Origin Data Center© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 36
  • 37. Cooking Show Methodology*No tiger blood was used during any of these tests! © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 37
  • 38. Let’s Pick a Site!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 38
  • 39. © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 39
  • 40. A Few Points of Clarification•  We’re only choosing oreilly.com for fun•  We’re using it only to show what some performance problems are – this doesn’t mean the site has these problems•  The real site is somewhere in the middle of this blue bar© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 40
  • 41. Waterfall and Key Performance Metrics© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 41
  • 42. Per Object Breakdown (partial)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 42
  • 43. Content Breakdown© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 43
  • 44. Problem Analysis© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 44
  • 45. Performance Problems•  Too many connections© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 45
  • 46. Too Many Connections 83 Connections© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 46
  • 47. Connection Cost is High© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 47
  • 48. Performance Problems•  Too many connections•  Too many bytes© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 48
  • 49. Too Many Bytes© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 49
  • 50. Performance Problems•  Too many connections•  Too many bytes•  No CDN© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 50
  • 51. Too Long to First Byte© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 51
  • 52. Time to First Byte•  Every request is subjected to one round trip•  Concurrency of requests helps, as does pipelining – but it’s still a problem –  More on pipelining later•  A bigger problem when there are more objects© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 52
  • 53. Performance Problems•  Too many connections•  Too many bytes•  No CDN•  Too many round trips© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 53
  • 54. Too Many Round Trips© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 54
  • 55. Too Many Round Trips•  Every request is still paying a penalty –  TTFB continues to be a problem•  The higher the latency, the bigger the problem•  Better concurrency on modern mobile browsers is helping, but not enough. This is still a huge problem© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 55
  • 56. Performance Problems•  Too many connections•  Too many bytes•  No CDN•  Too many round trips•  Poor caching (more on this later)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 56
  • 57. Performance Problems•  Too many connections•  Too many bytes•  No CDN•  Too many round trips•  Poor caching (more on this later)•  3rd party calls (marketing tags, analytics, etc)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 57
  • 58. 3rd party© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 58
  • 59. 3rd party© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 59
  • 60. 3rd party Before Start Render© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 60
  • 61. Performance Problems•  Too many connections•  Too many bytes•  No CDN•  Too many round trips•  Poor caching (more on this later)•  3rd party calls (marketing tags, analytics, etc)è Similar to desktop, but impact is different onmobile devices© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 61
  • 62. What Does it Look Like? http://www.youtube.com/watch?v=jo4zxzv3USg© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 62
  • 63. Summary of Key Metrics© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 63
  • 64. Key Metrics – Original Site Round trips to onload Bytes to onload (KB)100 100090 90080 80070 70060 60050 50040 40030 30020 20010 100 0 0 Start Render (sec) Doc Complete (sec) 9 25 8 20 7 6 15 5 4 10 3 2 5 1 0 0 © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 64
  • 65. Let’s Fix It!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 65
  • 66. What Are We Going To Do?•  Stepwise acceleration –  We’ll accelerate the page in multiple steps –  We’ll add techniques at each step and evaluate the performance impact•  We’ll start with the easy stuff and get more advanced with each step•  Try to make the page as fast as possible© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 66
  • 67. Step1: Low Hanging Fruit© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 67
  • 68. Step 1: Optimizations•  Add keep-alive connections –  Address the problem with too many connections –  Lessen the impact of TCP connection setup•  Add HTTP compression –  One way to reduce bytes, and an easy one –  We’ll compress text-based content (HTML, CSS, JS, etc)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 68
  • 69. Keep-alive Connections 83 Connections© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 69
  • 70. HTTP Compression© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 70
  • 71. Step 1: What Should We Expect•  Fewer total connections•  Fewer bytes•  Impact to performance metrics –  Fewer bytes to onload –  No change to roundtrips –  Better document complete time –  Better start render© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 71
  • 72. © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 72
  • 73. Before and After 20.52 sec 15.29 sec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 73
  • 74. What We Helped•  Connection Count –  83 connection à 30 connection•  Key metrics© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 74
  • 75. Step 1: Improvements Round trips to onload Bytes to onload (KB)100 100090 90080 80070 70060 60050 50040 40030 30020 20010 100 0 0 Start Render (sec) Doc Complete (sec) 9 25 8 20 7 6 15 5 4 10 3 2 5 1 0 0 © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 75
  • 76. Step 1: Improvements Round trips to onload Bytes to onload (KB)100 100090 900 94580 80070 218 70060 60050 500 23 % 72740 40030 30020 20010 100 0 0 Start Render (sec) Doc Complete (sec) 9 25 8 7.738 20.52 20 7 0.679 5.231 6 15 5 4 ~9% 7.059 10 25 % 15.289 3 2 5 1 0 0 © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 76
  • 77. What Does it Look Like? http://www.youtube.com/watch?v=qMGAOqQQqvw© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 77
  • 78. Pros and Cons•  Pros –  Really easy to do –  Usually a single configuration option on servers, proxies, or load balancers –  Great bang for the buck•  Cons –  It’s still slow! –  These are, by themselves, just not enough© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 78
  • 79. Step 2: CDN© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 79
  • 80. CDN Edge Cache Edge Cache Origin Origin Edge Cache Data Center Edge Cache© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 80
  • 81. CDN•  Static resources are served from locations near the requesting client (mobile or otherwise)•  Shorter distance between client and content means smaller TTFB© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 81
  • 82. What Should We Expect•  Faster average time to first byte for the objects on the page•  Impact to performance metrics –  No change to round trips –  No change to byte count –  Better start render time –  Better document complete time© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 82
  • 83. © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 83
  • 84. Before and After 15.29 sec 13.7 sec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 84
  • 85. Impact on TTFB -39.8 % Avg = 655 ms Avg = 394 ms© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 85
  • 86. What We Helped© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 86
  • 87. Step 2: Improvements Round trips to onload Bytes to onload (KB)100 100090 90080 80070 70060 60050 50040 40030 30020 20010 100 0 0 Start Render (sec) Doc Complete (sec) 9 25 8 20 7 6 15 5 4 10 3 2 5 1 0 0 © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 87
  • 88. Step 2: Improvements Round trips to onload Bytes to onload (KB)100 100090 90080 80070 70060 60050 50040 40030 30020 20010 100 0 0 Start Render (sec) Doc Complete (sec) 9 25 8 7.059 15.289 20 7 0.814 1.552 6 15 5 4 12% 6.245 10 10 % 13.737 3 2 5 1 0 0 © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 88
  • 89. What Does it Look Like? http://www.youtube.com/watch?v=aiViEjuVb_g© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 89
  • 90. Pros and Cons•  Pros –  CDNs are always good ways to reduce TTFB –  Physics! –  Well-established industry; lots and lots of vendors•  Cons –  Can sometimes be costly –  Why wasn’t it faster?© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 90
  • 91. CDNs for Mobile•  We got faster, but we expected more of an improvement –  Before: we forced requests to go from west coast to east coast –  After: let the CDNs naturally select closest edge•  Wondering out loud… –  Is edge selection for mobile devices not as effective? –  3G more of a mystery than WiFi© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 91
  • 92. CDN Edge Selection - Desktop Edge Cache Edge Cache DNS Resolver CDN DNS Brains Origin Origin Edge Cache Data Center Edge Cache© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 92
  • 93. CDN Edge Selection – Mobile Network DNS Edge Cache Resolver Edge Cache ? CDN DNS Brains Origin Origin Edge Cache Data Center Edge Cache DNS Resolver© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 93
  • 94. CDN Edge Selection – Mobile Networks•  I have no idea how the inside of the cell networks work!•  Test: –  From the phone (on 3G) ping 2 CDN names –  From the phone, ping the IP address the CDN resolved for my desktop© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 94
  • 95. CDN Edge Selection – Mobile Networks CDN 1 CDN 2© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 95
  • 96. CDN Edge Selection – Mobile NetworksBoth pings from phone CDN 1 Ping cdn.domain.com Both pings from phone CDN 2 Ping IP that CDN picked for desktop © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 96
  • 97. HERESY!!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 97
  • 98. Important Questions To Ask•  Not making outrageous claims like “CDNs aren’t effective for mobile devices”!!•  CDNs almost surely deploy servers near cell network exit points. But, what if most of the latency is inside the cell network?•  Does the meaning for “closeness” change for mobile?•  More research is necessary…© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 98
  • 99. Step 3: Mobile Front End Optimization© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 99
  • 100. Mobile FEO•  Consolidation of resources –  Images –  CSS –  JavaScript•  Image Compression•  Minification –  JavaScript –  CSS•  Optimal use of localStorage (more on this later)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 100
  • 101. Mobile FEO© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 101
  • 102. What Should We Expect•  Fewer round trips will mean the TTFB problem should get a lot better•  Fewer bytes will mean better performance –  Images (from image compression) –  CSS/JS (from minification)•  Impact to performance metrics –  Reduction in round trips –  Reduction in byte count (on top of HTTP Compression) –  Better start render time –  Better document complete time© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 102
  • 103. © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 103
  • 104. Before and After 9.47 sec 13.7 sec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 104
  • 105. What We Helped© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 105
  • 106. Step 3: Improvements Round trips to onload Bytes to onload (KB)100 100090 90080 80070 70060 60050 50040 40030 30020 20010 100 0 0 Start Render (sec) Doc Complete (sec) 9 25 8 20 7 6 15 5 4 10 3 2 5 1 0 0 © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 106
  • 107. Step 3: Improvements Round trips to onload Bytes to onload (KB)100 100090 90080 800 72770 92 70060 600 310 6450 50040 40030 300 417 2820 20010 70 % 100 43% 0 0 Start Render (sec) Doc Complete (sec) 9 25 8 20 7 6.245 13.737 6 2.589 15 4.260 5 4 10 3 3.656 9.477 2 5 1 41% 31 % 0 0 © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 107
  • 108. What Does it Look Like? http://www.youtube.com/watch?v=J_gU2Z_b-6I© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 108
  • 109. Pros and Cons•  Pros –  Noticeable and significant benefit over easier techniques –  The mobile form factor lets us be more aggressive with some of the techniques –  Smart use of localStorage•  Cons –  It’s not easy! –  Techniques must survive site changes (regression)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 109
  • 110. Step 4: More Mobile FEO© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 110
  • 111. More Mobile FEO•  Deferral –  Analytics –  Marketing tags –  Ads –  Etc© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 111
  • 112. 3rd Party Calls© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 112
  • 113. 3rd Party Calls© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 113
  • 114. What Should We Expect•  Deferral of round trips to after onload•  Impact to performance metrics –  Fewer round trips to onload –  Fewer bytes to onload –  Better start render time –  Better document complete time© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 114
  • 115. © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 115
  • 116. Before and After© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 116
  • 117. Before and After© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 117
  • 118. Before and After 2.2 sec 3.6 sec 9.47 sec 5.56 sec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 118
  • 119. What We Helped© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 119
  • 120. Step 4: Improvements Round trips to onload Bytes to onload (KB)100 100090 90080 80070 70060 60050 50040 40030 30020 20010 100 0 0 Start Render (sec) Doc Complete (sec) 9 25 8 20 7 6 15 5 4 10 3 2 5 1 0 0 © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 120
  • 121. Step 4: Improvements Round trips to onload Bytes to onload (KB)100 100090 64 % 900 34 %80 80070 70060 60050 500 28 41740 40030 18 300 14220 20010 100 10 275 0 0 Start Render (sec) Doc Complete (sec) 9 25 8 41% 41 % 20 7 6 15 5 4 3.656 9.477 10 3 3.92 1.493 2 5 1 2.163 5.557 0 0 © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 121
  • 122. What Does it Look Like? http://www.youtube.com/watch?v=e0oFr0pSRn8© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 122
  • 123. Pros and Cons•  Pros –  Gives you the control that your marketing team may have given away! –  Solves a very difficult problem, resulting in improvements to all key metrics –  Much better visual experience•  Cons –  Again, not easy! –  Must understand what the purpose of each 3rd party call is© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 123
  • 124. Quick Summary of Stepwise Acceleration© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 124
  • 125. Overall Improvements OriginalKeep-alive /Compression CDNMobile FEO 1Mobile FEO 2 © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 125
  • 126. Overall Improvements Round trips to onload Bytes to onload (KB)100 100090 90080 89 % 71 % 80070 70060 60050 93 500 94540 40030 83 670 30020 20010 100 10 275 0 0 Start Render (sec) Doc Complete (sec) 9 25 72 % 8 7 20 73 % 6 15 5 7.738 20.52 4 10 3 5.575 14.963 2 5 1 2.163 5.557 0 0 © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 126
  • 127. Mobile Caching© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 127
  • 128. Stating The Obvious Caching is Good!!!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 128
  • 129. First View of a Page© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 129
  • 130. Repeat View with Terrible Caching© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 130
  • 131. Repeat View with Validations Only© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 131
  • 132. Repeat View with Good Caching© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 132
  • 133. Mobile Caching•  The primary issues with mobile caching: –  where to put the objects –  the size of the cache•  Some good reading –  Device Cache Sizes •  Wink toolkit study: http://www.winktoolkit.org/blog/204/ •  YUI study: http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/ •  Blaze study: http://www.guypo.com/mobile/understanding-mobile-cache-sizes/ –  Individual Files •  Steve Souders: http://www.stevesouders.com/blog/2010/07/12/mobile-cache-file-sizes/ •  More from YUI: http://www.yuiblog.com/blog/2010/07/12/mobile-browser-cache-limits- revisited/© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 133
  • 134. Mobile Cache Sizes•  Cache sizes are much smaller than desktop –  Android (2.x) about 5-7MB –  iOS is larger (>50MB)•  We need to think about: –  Total cache size limit –  Individual object size limit –  HTML pages•  User behavior may affect what’s served from cache•  Things are getting better, but not at the pace we want© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 134
  • 135. Some More Findings•  Android: –  Firefox and Opera (Gingerbread): ~10MB –  Stock browser in ICS: 25MB –  Chrome on ICS: much larger and based on amount of space available •  http://gent.ilcore.com/2012/02/chrome-fast-for-android.html•  Android and iOS –  When there’s room available, saw aggressive caching behavior© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 135
  • 136. Comparison to Desktop•  IE –  http://blogs.msdn.com/b/ie/archive/2011/03/17/internet- explorer-9-network-performance-improvements.aspx –  Defaults •  IE 6/7/8 à 1/32 of disk, cap of 50MB •  IE9 à 1/256 of disk (bigger disks), cap of 250MB•  Chrome –  Spot checked: >300MB•  Firefox –  Spot checked: >700MB•  From Steve: http://stevesouders.com/cache.php© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 136
  • 137. HTML5 localStorage•  W3C’s Web Storage Spec: –  http://dev.w3.org/html5/webstorage/•  Per domain storage –  Key/value pairs –  ~2.5MB –  Test it: http://dev-test.nemikor.com/web-storage/support- test/•  Programmable –  It can be used for whatever you want –  This includes acting as a programmable object cache!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 137
  • 138. Bing’s Use of localStorage© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 138
  • 139. localStorage as a Cache•  It gives us new space, not shared, to use for caching•  It’s programmable and scriptable, something we’ve never had with HTTP object caches•  Typically good for caching CSS and JavaScript, especially those used site-wide•  Could also be used for small images –  Using DataURI format for images© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 139
  • 140. A Little Bonus!Maybe there’s another site we can accelerate…
  • 141. Velocityconf.com© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 141
  • 142. Waterfall and Key Performance Metrics© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 142
  • 143. What Does it Look Like? http://www.youtube.com/watch?v=hsQnkIPTgo4© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 143
  • 144. Further Analysis© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 144
  • 145. Further Analysis© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 145
  • 146. Functional Acceleration•  Most images are not in the immediate viewport•  Lots of round trips blocking start render•  This time, we’ll accelerate with an eye towards: –  Improving start render time –  Making the page available quicker© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 146
  • 147. Step 1: Deferral© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 147
  • 148. Deferral•  Let’s defer: –  3rd party calls (like before) –  Images not in the viewport•  Also basic Mobile FEO –  Image compression and minification –  Some consolidation of CSS and JavaScript•  What should we expect –  Better start render time –  Better document complete time –  Better visual response – snappier page© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 148
  • 149. © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 149
  • 150. Before and After 2.1 6.2 sec sec 12.61 sec 4.7 sec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 150
  • 151. Before and After 2.1 6.2 sec sec 12.61 sec 4.7 sec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 151
  • 152. What We Helped© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 152
  • 153. What Does it Look Like? http://www.youtube.com/watch?v=XD6QkP0bNak© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 153
  • 154. Step 2: Less Deferral?© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 154
  • 155. Let’s Look at the Page Again Visible Deferred Images© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 155
  • 156. Let’s Look at the Page Again Visible Make more images available before onload Deferred Images© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 156
  • 157. Defer less images•  Let’s not defer one scroll of images –  User can scroll faster and still have the next screen’s images available•  If the visual response is just as fast, then this is a good option if we expect people to scroll on our site right away© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 157
  • 158. © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 158
  • 159. Before and After© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 159
  • 160. Before and After 2.18 2.1 sec sec 4.7 sec 5.3 sec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 160
  • 161. What Does it Look Like? http://www.youtube.com/watch?v=eLmzd8A7RbA© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 161
  • 162. It’s Not Always About Every Metric!•  Visually, we’re about the same as full image deferral, but 4 images are available 2 seconds earlier•  Some of this can be done programmatically – dynamic decisions made by the browser –  Figure out coordinates for image; choose to download now or later© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 162
  • 163. Step 3: One Last Thing© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 163
  • 164. One Last Thing© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 164
  • 165. One Last Thing© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 165
  • 166. One Last Thing 200 msec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 166
  • 167. One Last Thing 200 msec 775 msec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 167
  • 168. Cache the HTML•  Cache the HTML base page itself –  Somewhere in front of the server, before the browser –  In this case, it’s a feature of the service•  Eliminate server processing time –  Serve the HTML faster –  Improve TTFB of the page and all other performance metrics© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 168
  • 169. © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 169
  • 170. Before and After© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 170
  • 171. Before and After 775 msec 236 msec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 171
  • 172. Before and After 2.18 1.78 sec sec 5.3 sec 3.2 sec© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 172
  • 173. What Does it Look Like? http://www.youtube.com/watch?v=gQgsxDiWqLQ© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 173
  • 174. HTML Caching•  HTML is typically dynamic –  It can be static for short periods of time (the velocity home page is a good example) –  Some technologies allow fragmentation of the page into static and dynamic portions•  HTML can be user-agent specific –  For velocity’s home page, the same URL generates different pages depending on the browser•  With HTML Caching, we need extra smarts: –  Granular expiration –  Browser aware –  Careful with personalized content© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 174
  • 175. We Covered Everything, right?Not Quite…
  • 176. Not Done Yet•  We may have made these 2 pages faster, but there’s a lot more to mobile optimization•  Performance is not only about pages –  We should always think about the site•  Optimizations should include operational improvements specific to mobile devices© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 176
  • 177. Site-wide Optimizations - flows Actual User Interaction© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 177
  • 178. More Performance Optimizations•  Converting click events to touch events –  Can save up to 500msec per event•  Smart use of localStorage –  Versioning –  Dynamic decisions based on state of localStorage•  Redirect suppression –  Sites that initially redirect to mobile version incur a costly roundtrip•  3G vs WiFi –  navigator.connection.type – Android only for now© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 178
  • 179. Operational and Other Optimizations•  Hiding the URL bar•  Smart image loading for pinch to zoom –  Automatically detect pinch and grab higher resolution image•  Viewport optimizations –  E.g. Automatic detection of viewport•  Mobile meta tags•  Great presentation from Max Firtman: –  http://velocityconf.com/velocity2011/public/schedule/ detail/19976© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 179
  • 180. Lessons Learned From The FieldThings you should know about mobile devices
  • 181. More on Mobile Cache Behavior© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 181
  • 182. Mobile Cache Behavior User With Last-Modified Device No Cache Headers* With Last-Modified* With max-age* Action and max-age* Android (Nexus S, v2.3.7) All from cache All from cache All from cache All from cache New window or tab iOS (iPhone 3GS, v5.1.1) None from cache All from cache All from cache All from cacheExit browser, Android (Nexus S, v2.3.7) All from cache All from cache All from cache All from cache lock phone,unlock phone,open browser iOS (iPhone 3GS, v5.1.1) None from cache All from cache All from cache All from cache Android (Nexus S, v2.3.7) All from cache All from cache All from cache All from cache Kill browser,launch browser iOS (iPhone 3GS, v5.1.1) None from cache All from cache All from cache All from cache Android (Nexus S, v2.3.7) All from cache All from cache All from cache All from cacheReboot phone iOS (iPhone 3GS, v5.1.1) None from cache All from cache All from cache All from cache After page If-Modified-Since and If-Modified-Since and Android (Nexus S, v2.3.7) All from cache All from cache loads, click Cache-Control:max-age=0 Cache-Control:max-age=0 URL and hit enter iOS (iPhone 3GS, v5.1.1) None from cache All from cache All from cache All from cache Android (Nexus S, v2.3.7) Cache-Control:no-cache Cache-Control:no-cache Cache-Control:no-cache Cache-Control:no-cache Refresh after page loads If-Modified-Since and If-Modified-Since and iOS (iPhone 3GS, v5.1.1) Cache-Control:max-age=0 Cache-Control:max-age=0 Cache-Control:max-age=0 Cache-Control:max-age=0 *Images only: filled cache through a page that referenced ~2MB of images, all with some or no caching headers; then performed user action © 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 182
  • 183. HTTP Pipelining© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 183
  • 184. Typical HTTP Operation GET /thing1! 200 STATUS OK!T GET /thing2!IM Client Server 200 STATUS OK!E GET /thing3! 200 STATUS OK!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 184
  • 185. Typical HTTP© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 185
  • 186. HTTP With Pipelining GET /thing1 GET /thing2 GET /thing3! 200 STATUS OK!TI 200 STATUS OK!M Client ServerE 200 STATUS OK!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 186
  • 187. HTTP with Pipelining© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 187
  • 188. Packet Drop Penalty•  Now, a packet dropped could mean multiple HTTP requests got dropped•  Good reading: –  http://www.guypo.com/ mobile/http-pipelining-big-in- mobile/•  Things to know –  Make sure everything in the middle supports pipelining –  Be aware of HOL blocking© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 188
  • 189. TCP Windows© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 189
  • 190. TCP’s Initial Congestion Window (init_cwnd) SYN! SYN/ACK! ACK! GET /!TI Client ServerM 200 STATUS OK (+Data)! (init_cwnd =6)E Data! Data! Data! Data! Data!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 190
  • 191. TCP Windows•  Increasing init_cwnd is a common performance recommendation –  Google recommends 10 –  Most high performance proxies and load balancers have init_cwnd of much higher than the default 2 or 3 segments –  Nice study on CDN init_cwnd values: •  http://www.cdnplanet.com/blog/initcwnd-settings-major-cdn- providers/•  cwnd during the rest of the connection depends on slow start and congestion avoidance stages of the connection© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 191
  • 192. TCP Windows•  Actual send window calculation is a bit more complicated –  Congestion avoidance –  The other side’s receive window•  The simplified formula: Min(cwnd, receive_window)! Sender (internal calculation) Receiver (internal calculation and advertised in each segment)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 192
  • 193. Small Receive Window SYN (Win=2920)! SYN/ACK (Win=xxx)! ACK (Win=2920)! GET / (Win=2920)!TI Client ServerM 200 STATUS OK (+Data)! (init_cwnd =6)E Data! Wait for ACK!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 193
  • 194. Rx Window examples: Windows© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 194
  • 195. Rx Windows: iOS (iPhone/iPad)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 195
  • 196. Rx Windows: Android (Gingerbread)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 196
  • 197. Rx Windows: Android (ICS)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 197
  • 198. Rx Windows•  It’s still very much a good idea to have larger init_cwnd sizes•  We should be aware of how data is sent to mobile devices•  Android’s move to 14600 (10 x max MSS) in ICS is great!•  Great reading: –  http://www.cdnplanet.com/blog/tune-tcp-initcwnd- for-optimum-performance/© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 198
  • 199. Sleeping Radios!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 199
  • 200. Connection To Cell towers•  Radios disconnect from the tower after idle time (to conserve power) and take 1-2 seconds to reconnect•  Excellent reading from Steve: •  http://www.stevesouders.com/blog/2011/09/21/making-a- mobile-connection/ •  Test it: http://stevesouders.com/ms/© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 200
  • 201. This Could Complicate Testing Run 1 Run 2© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 201
  • 202. Waterfall Detail (Run 2)© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 202
  • 203. The 2 Second Radio Thing•  Not much we can do about it•  Good lesson learned•  Need to keep this in mind as we do more testing•  Optimization opportunity –  You can have small keep-alive requests flow between the phone and the site, as a user navigates through your pages –  Use this carefully à battery and data usage© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 203
  • 204. Final Thoughts(This is slide 204!!!)
  • 205. Summary•  Performance matters!•  Measurement tools can be somewhat frustrating, but they’re heading in the right direction•  Mobile performance optimization is a huge area of opportunity –  Lots of room for acceleration of mobile sites –  New considerations for form factor and operational functionality•  For those of us used to testing desktop browsers, there are new gotchas and fun lessons to learn!© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 205
  • 206. Thank you." hooman@strangeloopnetworks.com" http://strangeloopnetworks.com"  Velocity Office Hours: Wednesday @2.30pm© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 206