More Related Content Similar to O'Reilly webcast: Joshua Bixby on Mobile Performance Trends and Predictions (20) More from Strangeloop (7) O'Reilly webcast: Joshua Bixby on Mobile Performance Trends and Predictions2. 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
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
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
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
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
30. How does data work on a mobile network?
© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 30
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
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
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
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
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
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
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
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
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
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
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
112. State of Mobile Ecommerce Performance
How fast do leading m-commerce sites load for real users
on 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
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