The 90-Minute Mobile Optimization Life Cycle
Hooman Beheshti VP Technology, Strangeloop
Velocity 2012
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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
Mobile Performance Optimization
Why Should We Care?
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 4
Growth of Smartphone Sales (as % of total mobile phone sales)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 5
Traffic from Mobile Devices (2011)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 6
Mobile Sales
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 7
Case Study
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 9
Page Views by Mobile Device
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 11
Results
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 12
Impact on Bounce Rate
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 13
Impact on Returning Visitors
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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
Performance Measurement
Measuring Page Speed on Mobile Devices
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 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. 18
iWebInspector
• Web Inspector, but for iOS Simulator • http://www.iwebinspector.com/
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 20
Aardwolf
• Remote JavaScript debugging (all platforms) • http://lexandera.com/aardwolf/
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 22
PCAP2HAR
• Turn packet captures to waterfalls • http://pcapperf.appspot.com/
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 24
Webpagetest
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 26
Visualizing Performance
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 27
Visualizing Performance
0 6 12
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 28
Visualizing Performance
0 6 12
DNS TTFB
TCP Connection
Download
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 29
Visualizing Performance
0 6 12
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 30
Visualizing Performance
0 6 12
Back End: The time from when the request is made by the browser to last byte of the HTML response
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 31
Visualizing Performance
0 6 12
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
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 32
Visualizing Performance
0 6 12
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)
Stepwise Acceleration
Accelerating a Real Site
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 34
Methodology
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 36
Setup
Origin Data Center
Origin
3G Connection
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 37
Cooking Show Methodology
*No tiger blood was used during any of these tests!
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 38
Let’s Pick a Site!
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 39
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 41
Waterfall and Key Performance Metrics
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 42
Per Object Breakdown (partial)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 43
Content Breakdown
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 44
Problem Analysis
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 45
Performance Problems
• Too many connections
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 46
Too Many Connections
83 Connections
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 47
Connection Cost is High
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 48
Performance Problems
• Too many connections • Too many bytes
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 49
Too Many Bytes
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 50
Performance Problems
• Too many connections • Too many bytes • No CDN
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 51
Too Long to First Byte
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 53
Performance Problems
• Too many connections • Too many bytes • No CDN • Too many round trips
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 54
Too Many Round Trips
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 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. 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. 58
3rd party
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 59
3rd party
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 60
3rd party
Before Start Render
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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 on mobile devices
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 62
What Does it Look Like?
http://www.youtube.com/watch?v=jo4zxzv3USg
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 63
Summary of Key Metrics
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 64
Key Metrics – Original Site
0
10
20
30
40
50
60
70
80
90
100 Round trips to onload
0
100
200
300
400
500
600
700
800
900
1000 Bytes to onload (KB)
0
1
2
3
4
5
6
7
8
9 Start Render (sec)
0
5
10
15
20
25 Doc Complete (sec)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 65
Let’s Fix It!
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 67
Step1: Low Hanging Fruit
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 69
Keep-alive Connections
83 Connections
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 70
HTTP Compression
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 72
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 73
Before and After
20.52 sec 15.29 sec
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 74
What We Helped
• Connection Count – 83 connection à 30 connection
• Key metrics
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 75
Step 1: Improvements
0
10
20
30
40
50
60
70
80
90
100 Round trips to onload
0
100
200
300
400
500
600
700
800
900
1000 Bytes to onload (KB)
0
1
2
3
4
5
6
7
8
9 Start Render (sec)
0
5
10
15
20
25 Doc Complete (sec)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 76
Step 1: Improvements
0
10
20
30
40
50
60
70
80
90
100 Round trips to onload
0
100
200
300
400
500
600
700
800
900
1000 Bytes to onload (KB)
0
1
2
3
4
5
6
7
8
9 Start Render (sec)
0
5
10
15
20
25 Doc Complete (sec)
23 %
25 % ~9%
20.52
15.289
5.231
7.738
7.059
0.679
945
727
218
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 77
What Does it Look Like?
http://www.youtube.com/watch?v=qMGAOqQQqvw
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 79
Step 2: CDN
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 80
CDN
Edge Cache
Edge Cache
Edge Cache
Edge Cache
Origin Data Center
Origin
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 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. 83
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 84
Before and After
15.29 sec 13.7 sec
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 85
Impact on TTFB
Avg = 655 ms Avg = 394 ms
-39.8 %
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 86
What We Helped
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 87
Step 2: Improvements
0
10
20
30
40
50
60
70
80
90
100 Round trips to onload
0
100
200
300
400
500
600
700
800
900
1000 Bytes to onload (KB)
0
1
2
3
4
5
6
7
8
9 Start Render (sec)
0
5
10
15
20
25 Doc Complete (sec)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 88
Step 2: Improvements
0
10
20
30
40
50
60
70
80
90
100 Round trips to onload
0
100
200
300
400
500
600
700
800
900
1000 Bytes to onload (KB)
0
1
2
3
4
5
6
7
8
9 Start Render (sec)
0
5
10
15
20
25 Doc Complete (sec)
15.289
13.737
1.552
7.059
6.245
0.814
12% 10 %
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 89
What Does it Look Like?
http://www.youtube.com/watch?v=aiViEjuVb_g
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 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. 92
CDN Edge Selection - Desktop
Edge Cache
Edge Cache
Edge Cache
Edge Cache
Origin Data Center
Origin
DNS Resolver
CDN DNS Brains
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 93
CDN Edge Selection – Mobile Network
Edge Cache
Edge Cache
Edge Cache
Edge Cache
Origin Data Center
Origin
DNS Resolver
CDN DNS Brains
DNS Resolver
?
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 95
CDN Edge Selection – Mobile Networks
CDN 1
CDN 2
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 96
CDN Edge Selection – Mobile Networks
CDN 1
CDN 2
Ping cdn.domain.com
Ping IP that CDN picked for desktop
Both pings from phone
Both pings from phone
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 97
HERESY!!
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 99
Step 3: Mobile Front End Optimization
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 101
Mobile FEO
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 103
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 104
Before and After
13.7 sec
9.47 sec
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 105
What We Helped
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 106
Step 3: Improvements
0
10
20
30
40
50
60
70
80
90
100 Round trips to onload
0
100
200
300
400
500
600
700
800
900
1000 Bytes to onload (KB)
0
1
2
3
4
5
6
7
8
9 Start Render (sec)
0
5
10
15
20
25 Doc Complete (sec)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 107
Step 3: Improvements
0
10
20
30
40
50
60
70
80
90
100 Round trips to onload
0
100
200
300
400
500
600
700
800
900
1000 Bytes to onload (KB)
0
1
2
3
4
5
6
7
8
9 Start Render (sec)
0
5
10
15
20
25 Doc Complete (sec)
13.737
9.477
4.260
6.245
3.656
2.589
727
417
310
92
28
64
43% 70 %
41% 31 %
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 108
What Does it Look Like?
http://www.youtube.com/watch?v=J_gU2Z_b-6I
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 110
Step 4: More Mobile FEO
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 111
More Mobile FEO
• Deferral – Analytics – Marketing tags – Ads – Etc
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 112
3rd Party Calls
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 113
3rd Party Calls
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 115
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 116
Before and After
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 117
Before and After
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 118
Before and After
9.47 sec
3.6 sec
5.56 sec
2.2 sec
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 119
What We Helped
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 120
Step 4: Improvements
0
10
20
30
40
50
60
70
80
90
100 Round trips to onload
0
100
200
300
400
500
600
700
800
900
1000 Bytes to onload (KB)
0
1
2
3
4
5
6
7
8
9 Start Render (sec)
0
5
10
15
20
25 Doc Complete (sec)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 121
Step 4: Improvements
0
10
20
30
40
50
60
70
80
90
100 Round trips to onload
0
100
200
300
400
500
600
700
800
900
1000 Bytes to onload (KB)
0
1
2
3
4
5
6
7
8
9 Start Render (sec)
0
5
10
15
20
25 Doc Complete (sec)
34 %
41 % 41%
64 %
9.477
5.557
3.92
3.656
2.163
1.493
417
275
142
28
10
18
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 122
What Does it Look Like?
http://www.youtube.com/watch?v=e0oFr0pSRn8
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 124
Quick Summary of Stepwise Acceleration
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 125
Overall Improvements
Original
Keep-alive /Compression
CDN
Mobile FEO 1
Mobile FEO 2
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 126
Overall Improvements
0
10
20
30
40
50
60
70
80
90
100 Round trips to onload
0
100
200
300
400
500
600
700
800
900
1000 Bytes to onload (KB)
0
1
2
3
4
5
6
7
8
9 Start Render (sec)
0
5
10
15
20
25 Doc Complete (sec)
89 % 71 %
72 % 73 %
20.52
5.557
14.963
7.738
2.163
5.575
945
275
670
93
10
83
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 127
Mobile Caching
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 128
Stating The Obvious
Caching is Good!!!
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 129
First View of a Page
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 130
Repeat View with Terrible Caching
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 131
Repeat View with Validations Only
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 132
Repeat View with Good Caching
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 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. 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. 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. 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. 138
Bing’s Use of localStorage
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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
A Little Bonus!
Maybe there’s another site we can accelerate…
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 141
Velocityconf.com
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 142
Waterfall and Key Performance Metrics
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 143
What Does it Look Like?
http://www.youtube.com/watch?v=hsQnkIPTgo4
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 144
Further Analysis
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 145
Further Analysis
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 147
Step 1: Deferral
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 149
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 150
Before and After
12.61 sec
6.2 sec 2.1sec
4.7 sec
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 151
Before and After
12.61 sec
6.2 sec 2.1sec
4.7 sec
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 152
What We Helped
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 153
What Does it Look Like?
http://www.youtube.com/watch?v=XD6QkP0bNak
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 154
Step 2: Less Deferral?
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 155
Let’s Look at the Page Again
Visible
Deferred Images
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 156
Let’s Look at the Page Again
Visible
Deferred Images
Make more images available before
onload
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 158
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 159
Before and After
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 160
Before and After
2.1sec
4.7 sec
2.18 sec
5.3 sec
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 161
What Does it Look Like?
http://www.youtube.com/watch?v=eLmzd8A7RbA
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 163
Step 3: One Last Thing
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 164
One Last Thing
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 165
One Last Thing
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 166
One Last Thing
200 msec
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 167
One Last Thing
200 msec
775msec
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 169
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 170
Before and After
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 171
Before and After
775msec
236 msec
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 172
Before and After
2.18 sec
5.3 sec
1.78 sec
3.2 sec
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 173
What Does it Look Like?
http://www.youtube.com/watch?v=gQgsxDiWqLQ
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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
We Covered Everything, right?
Not Quite…
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 177
Site-wide Optimizations - flows
Actual User Interaction
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 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
Lessons Learned From The Field
Things you should know about mobile devices
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 181
More on Mobile Cache Behavior
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 182
Mobile Cache Behavior User
Action Device No Cache Headers* With Last-Modified* With Last-Modified and max-age* With max-age*
New window or tab
Android (Nexus S, v2.3.7) All from cache All from cache All from cache All from cache
iOS (iPhone 3GS, v5.1.1) None from cache All from cache All from cache All from cache
Exit browser, lock phone,
unlock phone, open browser
Android (Nexus S, v2.3.7) All from cache All from cache All from cache All from cache
iOS (iPhone 3GS, v5.1.1) None from cache All from cache All from cache All from cache
Kill browser, launch browser
Android (Nexus S, v2.3.7) All from cache All from cache All from cache All from cache
iOS (iPhone 3GS, v5.1.1) None from cache All from cache All from cache All from cache
Reboot phone Android (Nexus S, v2.3.7) All from cache All from cache All from cache All from cache
iOS (iPhone 3GS, v5.1.1) None from cache All from cache All from cache All from cache
After page loads, click URL and hit
enter
Android (Nexus S, v2.3.7) All from cache If-Modified-Since and Cache-Control:max-age=0
If-Modified-Since and Cache-Control:max-age=0 All from cache
iOS (iPhone 3GS, v5.1.1) None from cache All from cache All from cache All from cache
Refresh after page loads
Android (Nexus S, v2.3.7) Cache-Control:no-cache Cache-Control:no-cache Cache-Control:no-cache Cache-Control:no-cache
iOS (iPhone 3GS, v5.1.1) Cache-Control:max-age=0 If-Modified-Since and Cache-Control:max-age=0
If-Modified-Since and 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. 183
HTTP Pipelining
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 184
Typical HTTP Operation
Client
GET /thing1!
GET /thing3!
GET /thing2!
Server
T I M E
200 STATUS OK!
200 STATUS OK!
200 STATUS OK!
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 185
Typical HTTP
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 186
HTTP With Pipelining
Client
GET /thing1 GET /thing2 GET /thing3!
Server
T I M E
200 STATUS OK!
200 STATUS OK!
200 STATUS OK!
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 187
HTTP with Pipelining
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 189
TCP Windows
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 190
TCP’s Initial Congestion Window (init_cwnd)
Client Server (init_cwnd =6)
T I M E
SYN!
SYN/ACK!
ACK!
GET /!
200 STATUS OK (+Data)!
Data!
Data!
Data!
Data!
Data!
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 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. 193
Small Receive Window
Client Server (init_cwnd =6)
T I M E
SYN (Win=2920)!
SYN/ACK (Win=xxx)!
ACK (Win=2920)!
GET / (Win=2920)!
200 STATUS OK (+Data)!
Data!
Wait for ACK!
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 194
Rx Window examples: Windows
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 195
Rx Windows: iOS (iPhone/iPad)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 196
Rx Windows: Android (Gingerbread)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 197
Rx Windows: Android (ICS)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 199
Sleeping Radios!
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 201
This Could Complicate Testing
Run 1 Run 2
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 202
Waterfall Detail (Run 2)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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
Final Thoughts
(This is slide 204!!!)
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 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. 206
Thank you.
" [email protected] " http://strangeloopnetworks.com
" Velocity Office Hours: Wednesday @2.30pm
Top Related