2012 annual state of the union for mobile ecommerce performance [velocity eu]

First Annual State of the Union for Mobile Ecommerce PerformanceJoshua Bixby

www.strangeloopnetworks.comwww.webperformancetoday.com


Source: http://shuterstock.com


Agenda

Why speed matters

How cell networks work

Case study: What speeds up a site on mobile?

Mobile study test methodology

Results


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/


Cell connectionsHow it works


http://youtu.be/LK5eHr0qdh8

http://youtu.be/LK5eHr0qdh8


http://youtu.be/ClhWIvZFS8I

http://youtu.be/ClhWIvZFS8I


Powering up

Source: http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=W3A01Tb8MFf


Concurrency

Device + Environment (Location, Interference etc..) + Availability + Scale


http://youtu.be/c1FomWJ1ZP4

http://youtu.be/c1FomWJ1ZP4

23√ √√© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 23

Latency


Geography


How does data work on a mobile network?


3G vs LTE


Case StudyWhat speeds up a mobile site?


Methodology


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.


Setup


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.


Summary of key metrics


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


What does it look like?

http://youtu.be/iPtbU1KvLjM

http://youtu.be/iPtbU1KvLjM


Key metrics – original site


Let’s Fix it!


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


Step 1: Low-Hanging Fruit


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)


Keep-alive connections


HTTP compression


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


Before and after


What we helped

Connection count• 83 connections 30 connections

Key metrics


Step 1: Improvements



http://youtu.be/qMGAOqQQqvw

http://youtu.be/qMGAOqQQqvw


Step 2: CDN


CDN


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


Before and after


What we helped



http://youtu.be/aiViEjuVb_g

http://youtu.be/aiViEjuVb_g


Why a CDN doesn’t help more: Latency


How does data work on a mobile network?


Step 3: Mobile Front End Optimization


Mobile FEO

Consolidation of resources• Images• CSS• JavaScript

Image compression

Minification• JavaScript• CSS


Mobile FEO



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


Before and after


What we helped



http://youtu.be/J_gU2Z_b-6I

http://youtu.be/J_gU2Z_b-6I


Step 4: More Mobile FEO


More Mobile FEO

Deferral• Analytics• Marketing tags• Ads• Etc.


3rd party calls



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


Before and after


What we helped



http://youtu.be/e0oFr0pSRn8

http://youtu.be/e0oFr0pSRn8


Overall improvements


2012 State of Mobile Ecommerce PerformanceHow fast do leading m-commerce sites load for real users over cellular networks?


Why is our test different?

Testing cell connecting3G testsLTE tests

Real browsers

Real phones/tablets

Cool phones/tablets


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?


All done by hand: Interns


Methodology

http://youtu.be/XapspPBxVJY

http://youtu.be/XapspPBxVJY


Usability


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

iPhone 4 versus Galaxy S

Platform iOS 4.1 Android 2.3.6


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


iPhone 4 vs Galaxy S (3G)


3G compared to desktop

iPhone 5 versus Galaxy S3

Platform iOS 6 Android 4.0.4


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


iPhone 5 vs Galaxy S3 (LTE)


LTE compared to desktop


Source: http://fuzzyco.com/outliers/

2012 annual state of the union for mobile ecommerce performance [velocity eu]

Technology

faster websites

strangeloop service

cell networks

mobile site

mobile devices

mobile network

real site

key metrics original