Your SlideShare is downloading. ×
O'Reilly webcast: Joshua Bixby on Mobile Performance Trends and Predictions
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

O'Reilly webcast: Joshua Bixby on Mobile Performance Trends and Predictions

6,574
views

Published on

Slides from Strangeloop president Joshua Bixby's O'Reilly webcast: …

Slides from Strangeloop president Joshua Bixby's O'Reilly webcast:

At Velocity EU in October 2012, Strangeloop president Joshua Bixby will unveil findings from the first comprehensive study ever conducted of mobile performance over 3G networks. In this webcast, Joshua talks about why measuring 3G performance is important, and what kind of evolution we can expect to see from mobile networks, browsers, site development, and performance best practices in 2013.

Published in: Technology

0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,574
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
104
Comments
0
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Twitter @joshuabixby\n
  • Twitter @joshuabixby\n
  • Transcript

    • 1. Mobile Performance Trends and PredictionsJoshua Bixby
    • 2. Agenda Market Why is faster better? Measuring performance Visualizing performance How does data work on a mobile network? Best practices in action Evolution Strangeloop study: State of Mobile Ecommerce Performance© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 2
    • 3. Growth of Smartphone Sales(as % of total mobile phone sales)© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 3
    • 4. Traffic from Mobile Devices (2011)© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 4
    • 5. © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 5
    • 6. Customer Profile Top 200 Internet retailer, US based Target geography: US and Europe $3B in revenue 30,000 employees© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 6
    • 7. Page Views by Mobile Device© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 7
    • 8. Experiment Induce delay on HTML 200msec, 500msec, 1000msec Apply to small percentage of traffic 12 weeks Monitor impact on key business metrics© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 8
    • 9. Results© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 9
    • 10. Impact on Bounce Rate© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 10
    • 11. Impact on Returning Visitors© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 11
    • 12. 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© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 12
    • 13. Performance MeasurementMeasuring Page Speed on Mobile Devices© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 13
    • 14. 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© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 14
    • 15. 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© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 15
    • 16. iWebInspector Web Inspector, but for iOS Simulator http://www.iwebinspector.com/© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 16
    • 17. 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© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 17
    • 18. Aardwolf Remote JavaScript debugging (all platforms) http://lexandera.com/aardwolf/© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 18
    • 19. Mobile Perf Bookmarklet More focus on performance http://stevesouders.com/mobileperf/ mobileperfbkm.php Super bookmarklet with lots of tools built in© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 19
    • 20. PCAP2HAR Turn packet captures to waterfalls http://pcapperf.appspot.com/© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 20
    • 21. Real User Monitoring (RUM) RUM tools are increasing in availability • Google Analytics • New companies and solutions emerging 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)© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 21
    • 22. WebPagetest© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 22
    • 23. 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© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 23
    • 24. Visualizing Performance© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 24
    • 25. Visualizing Performance© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 25
    • 26. Visualizing Performance© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 26
    • 27. Visualizing Performance© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 27
    • 28. Visualizing Performance© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 28
    • 29. Visualizing Performance© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 29
    • 30. How does data work on a mobile network?© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 30
    • 31. Stepwise AccelerationAccelerating a Real Site© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 31
    • 32. Methodology© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 32
    • 33. 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© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 33
    • 34. Setup© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 34
    • 35. © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 35
    • 36. 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© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 36
    • 37. Summary of Key Metrics© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 37
    • 38. 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 on mobile devices© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 38
    • 39. What Does It Look Like? http://www.youtube.com/watch?v=jo4zxzv3USg Text© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 39
    • 40. Key Metrics – Original Site© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 40
    • 41. Let’s Fix it!© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 41
    • 42. 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© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 42
    • 43. Step 1: Low Hanging Fruit© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 43
    • 44. 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 the text-based content (HTML, CSS, JS, etc)© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 44
    • 45. Keep-alive Connections© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 45
    • 46. HTTP Compression© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 46
    • 47. 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© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 47
    • 48. Before and After© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 48
    • 49. What We Helped Connection Count • 83 connection  30 connection Key metrics© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 49
    • 50. Step 1: Improvements© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 50
    • 51. Step 1: Improvements© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 51
    • 52. What Does It Look Like? http://www.youtube.com/watch?v=qMGAOqQQqvw© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 52
    • 53. 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© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 53
    • 54. Step 2: CDN© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 54
    • 55. CDN© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 55
    • 56. CDN Static resources are served from locations near the requesting client (mobile or otherwise) Shorter distance between client and content means smaller TTFB© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 56
    • 57. 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© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 57
    • 58. Before and After© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 58
    • 59. Impact on TTFB© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 59
    • 60. What We Helped© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 60
    • 61. Step 2: Improvements© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 61
    • 62. Step 2: Improvements© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 62
    • 63. What Does It Look Like? http://www.youtube.com/watch?v=aiViEjuVb_g© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 63
    • 64. Pros and Cons Pros • CDNs are always a good way to reduce TTFB • Physics! • Well-established industry; lots and lots of vendors Cons • Can sometimes be costly • Why wasn’t it faster?© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 64
    • 65. CDN and speed© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 65
    • 66. Step 3: Mobile Front End Optimization© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 66
    • 67. Mobile FEO Consolidation of resources • Images • CSS • JavaScript Image Compression Minification • JavaScript • CSS Optimal use of localStorage (more on this later)© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 67
    • 68. Mobile FEO© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 68
    • 69. 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 on performance metrics • Reduction in round trips • Reduction in byte count (on top of HTTP Compression) • Better start render time • Better document complete time© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 69
    • 70. Before and After© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 70
    • 71. What We Helped© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 71
    • 72. Step 3: Improvements© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 72
    • 73. Step 3: Improvements© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 73
    • 74. What Does It Look Like? http://www.youtube.com/watch?v=J_gU2Z_b-6I© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 74
    • 75. 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)© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 75
    • 76. Step 4: More Mobile FEO© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 76
    • 77. More Mobile FEO Deferral • Analytics • Marketing tags • Ads • Etc.© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 77
    • 78. 3rd Party Calls© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 78
    • 79. 3rd Party Calls© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 79
    • 80. 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© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 80
    • 81. Before and After© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 81
    • 82. Before and After© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 82
    • 83. Before and After© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 83
    • 84. What We Helped© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 84
    • 85. Step 4: Improvements© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 85
    • 86. Step 4: Improvements© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 86
    • 87. What Does It Look Like? http://www.youtube.com/watch?v=e0oFr0pSRn8© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 87
    • 88. 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© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 88
    • 89. Quick Summary of Stepwise Acceleration© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 89
    • 90. Overall Improvements© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 90
    • 91. Overall Improvements© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 91
    • 92. Mobile Caching© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 92
    • 93. Stating the Obvious Caching is good!!!© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 93
    • 94. First View of a Page© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 94
    • 95. Repeat View with Terrible Caching© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 95
    • 96. Repeat View with Validations Only© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 96
    • 97. Repeat View with Good Caching© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 97
    • 98. 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/© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 98
    • 99. 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© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 99
    • 100. 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© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 100
    • 101. 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© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 101
    • 102. 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!© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 102
    • 103. Evolution© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 103
    • 104. Evolution: Mobile Networks© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 104
    • 105. The Phone matters© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 105
    • 106. Browsers: Slow and Steady Growth© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 106
    • 107. Responsive Images© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 107
    • 108. Make Full Site Available© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 108
    • 109. Full Site Matters© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 109
    • 110. Full Site Matters© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 110
    • 111. Enhance with Javascript© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 111
    • 112. State of Mobile Ecommerce PerformanceHow fast do leading m-commerce sites load for real userson 3G?© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 112
    • 113. Report: Key Areas of Exploration• Speed – How fast are web pages on a 3G connection?• Devices – What is faster: Android or iPhone? – What is faster: iPad or Android tablet?• Usability – Do companies have mobile-specific sites? – Who do they serve them to? – Do they let people view the full site from a mobile site?© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 113
    • 114. © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 114
    • 115. © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 115
    • 116. © 2012 Strangeloop Networks 2011 Strangeloop. Faster Websites. Automatically. Strangeloop. Faster Websites. Automatically. 116
    • 117. © 2012 Strangeloop Networks 2011 Strangeloop. Faster Websites. Automatically. Strangeloop. Faster Websites. Automatically. 117