2012 annual state of the union for mobile ecommerce performance [velocity eu]
Post on 27-Jan-2015
108 Views
Preview:
DESCRIPTION
TRANSCRIPT
First Annual State of the Union for Mobile Ecommerce PerformanceJoshua Bixby
www.strangeloopnetworks.comwww.webperformancetoday.com
4© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 4
5© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 5
Source: http://shuterstock.com
6© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 6
Agenda
Why speed matters
How cell networks work
Case study: What speeds up a site on mobile?
Mobile study test methodology
Results
7© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 7
Why Speed Matters
This section left intentionally blank*
*Because for the first time in five years I’m going to omit the slides that preach about speed=revenue and save all of us the repetition. If you’ve lived under a rock for the last five years and need to hear more, look at:
http://www.strangeloopnetworks.com/web-performance-optimization-hub/
8© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 8
9© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 9
Cell connectionsHow it works
10© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 10
11© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 11
http://youtu.be/LK5eHr0qdh8
12© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 12
13© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 13
14© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 14
15© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 15
http://youtu.be/ClhWIvZFS8I
16© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 16
Powering up
Source: http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=W3A01Tb8MFf
17© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 17
18© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 18
19© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 19
20© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 20
21© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 21
21© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 21
Concurrency
Device + Environment (Location, Interference etc..) + Availability + Scale
22© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 22
http://youtu.be/c1FomWJ1ZP4
23√ √√© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 23
Latency
24√ √√© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 24
Geography
25© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 25
How does data work on a mobile network?
26© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 26
3G vs LTE
27© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 27
Case StudyWhat speeds up a mobile site?
28© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 28
Methodology
29© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 29
Setup
All testing done on 3G from Vancouver.• Nexus S • Rogers Network
Traffic flows through Strangeloop service.• We apply optimizations in the path.
The phone does everything else.
30© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 30
Setup
31© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 31
Setup
32© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 32
33© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 33
34© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 34
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.
35© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 35
Summary of key metrics
36© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 36
Performance problems
Too many connections
Too many bytes
No CDN
Too many round trips
3rd party calls (marketing tags, analytics, etc)
Similar to desktop, but impact is different on mobile devices
37© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 37
What does it look like?
http://youtu.be/iPtbU1KvLjM
38© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 38
Key metrics – original site
39© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 39
Let’s Fix it!
40© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 40
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.
Start with the easy stuff and get more advanced with each step
Try to make the page as fast as possible
41© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 41
Step 1: Low-Hanging Fruit
42© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 42
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)
43© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 43
Keep-alive connections
44© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 44
HTTP compression
45© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 45
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
46© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 46
Before and after
47© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 47
What we helped
Connection count• 83 connections 30 connections
Key metrics
48© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 48
Step 1: Improvements
49© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 49
Step 1: Improvements
50© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 50
What does it look like?
http://youtu.be/qMGAOqQQqvw
51© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 51
Step 2: CDN
52© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 52
CDN
53© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 53
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
54© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 54
Before and after
55© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 55
What we helped
56© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 56
Step 2: Improvements
57© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 57
Step 2: Improvements
58© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 58
What does it look like?
http://youtu.be/aiViEjuVb_g
59√ √√© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 59
Why a CDN doesn’t help more: Latency
60© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 60
How does data work on a mobile network?
61© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 61
Step 3: Mobile Front End Optimization
62© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 62
Mobile FEO
Consolidation of resources• Images• CSS• JavaScript
Image compression
Minification• JavaScript• CSS
63© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 63
Mobile FEO
64© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 64
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
65© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 65
Before and after
66© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 66
What we helped
67© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 67
Step 3: Improvements
68© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 68
Step 3: Improvements
69© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 69
What does it look like?
http://youtu.be/J_gU2Z_b-6I
70© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 70
Step 4: More Mobile FEO
71© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 71
More Mobile FEO
Deferral• Analytics• Marketing tags• Ads• Etc.
72© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 72
3rd party calls
73© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 73
3rd party calls
74© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 74
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
75© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 75
Before and after
76© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 76
Before and after
77© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 77
Before and after
78© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 78
What we helped
79© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 79
Step 4: Improvements
80© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 80
Step 4: Improvements
81© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 81
What does it look like?
http://youtu.be/e0oFr0pSRn8
82© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 82
Overall improvements
83© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 83
2012 State of Mobile Ecommerce PerformanceHow fast do leading m-commerce sites load for real users over cellular networks?
84© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 84
Why is our test different?
Testing cell connecting3G testsLTE tests
Real browsers
Real phones/tablets
Cool phones/tablets
86© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 86
Report: Key areas of exploration
• Usability– Do companies have mobile-specific sites?– Who do they serve them to?– Do they let people view the full site from the mobile
site?
• Speed– How fast are web pages on a 3G connection?– How fast are web pages on an LTE connection?
• Devices– Which is faster: An Android or an iPhone?– Which is faster: An iPad or Android tablet?
85© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 85
All done by hand: Interns
87© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 87
Methodology
http://youtu.be/XapspPBxVJY
88© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 88
Usability
89© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 89
91© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 91
90© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 90
91© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 91
92© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 92
Tablets
iPad 2 versus Galaxy Tablet
Platform iOS 5.1 Android 4.04
Browser Safari Android Browser
Processor 1 GHz Apple A5 1 GHz ARM
Display 9.5 inch 10.1-inch
Memory512 MB DDR2 (1066 Mbit/s
RAM) 1GB RAM
Cellular Radio 3G 3G
GPRS YESClass 12 (4+1/3+2/2+3/1+4
slots), 32 - 48 kbps
EDGE YES Class 12
SpeedHSDPA, 14.4 Mbps; HSUPA,
2 MbpsHSDPA, 21 Mbps; HSUPA,
5.76 Mbps
iPad 2 Galaxy Tablet
94© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 94
iPhone 4 versus Galaxy S
Platform iOS 4.1 Android 2.3.6
Browser Safari Android Browser
Processor 1GHz Apple A4 1GHz ARM
Display 3.5- inch 4-inch
Memory 512 MB eDRAM 512 MB RAM
Cellular Radio 3G 3G
GPRSClass 10 (4+1/3+2 slots), 32 -
48 kbpsClass 12 (4+1/3+2/2+3/1+4
slots), 32 - 48 kbps
EDGE Class 10, 236.8 kbps Class 12
SpeedHSDPA, 7.2 Mbps; HSUPA, 5.76 Mbps
HSDPA, 7.2 Mbps; HSUPA, 5.76 Mbps
iPhone 4 Galaxy S
96© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 96
iPhone 4 vs Galaxy S (3G)
97© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 97
iPhone 4 vs Galaxy S (3G)
98© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 98
3G compared to desktop
iPhone 5 versus Galaxy S3
Platform iOS 6 Android 4.0.4
Browser Safari Android Browser
Processor 1.3GHz Apple A6 1.4 GHz quad-core ARM
Display 4-inch 4.8-inch
Memory 1G eDRAM 1GB RAM
Cellular Radio 3G/LTE 3G, 4G
GPRS YESClass 12 (4+1/3+2/2+3/1+4 slots),
32 - 48 kbps
EDGE YES Class 12
Speed
DC-HSDPA, 42 Mbps; HSDPA, 21 Mbps; HSUPA, 5.76 Mbps, LTE, 100 Mbps;
Rev. A, up to 3.1 MbpsHSDPA, 21 Mbps; HSUPA,
5.76 Mbps
iPhone 5 Galaxy S3
100© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 100
iPhone 5 vs Galaxy S3 (LTE)
101© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 101
LTE compared to desktop
4© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 4
Source: http://fuzzyco.com/outliers/
103© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically.© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 103
top related