2012 Annual State of the Union for Mobile Ecommerce Performance [Velocity EU]

First Annual State of the Union for Mobile
Ecommerce Performance
Joshua Bixby
www.strangeloopnetworks.com
www.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 connections
How it works


http://youtu.be/LK5eHr0qdh8


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


Latency

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

Geography


How does data work on a mobile network?


3G vs LTE


Case Study
What 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


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


Step 2: CDN


CDN


What should we expect?

Faster average time to first byte for the objects
on the page

• No change to round trips
• No change to byte count
• Better start render time


Before and after


What we helped



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)


Before and after


What we helped



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

• Fewer round trips to onload
• Fewer bytes to onload


Before and after


What we helped



http://youtu.be/e0oFr0pSRn8


Overall improvements


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


Why is our test different?

Testing cell connecting
3G tests
LTE 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


Usability


Tablets


iPad 2 versus Galaxy Tablet

iPad 2 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

512 MB DDR2 (1066 Mbit/s
Memory RAM) 1GB RAM

Cellular Radio 3G 3G
Class 12 (4+1/3+2/2+3/1+4
GPRS YES slots), 32 - 48 kbps

EDGE YES Class 12
HSDPA, 14.4 Mbps; HSUPA, HSDPA, 21 Mbps; HSUPA,
Speed 2 Mbps 5.76 Mbps

iPhone 4 versus Galaxy S

iPhone 4 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
Class 10 (4+1/3+2 slots), 32 - Class 12 (4+1/3+2/2+3/1+4
GPRS 48 kbps slots), 32 - 48 kbps

EDGE Class 10, 236.8 kbps Class 12
HSDPA, 7.2 Mbps; HSDPA, 7.2 Mbps; HSUPA,
Speed HSUPA, 5.76 Mbps 5.76 Mbps

iPhone 4 vs Galaxy S (3G)


3G compared to desktop


iPhone 5 versus Galaxy S3

iPhone 5 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
Class 12 (4+1/3+2/2+3/1+4 slots),
GPRS YES 32 - 48 kbps

EDGE YES Class 12
DC-HSDPA, 42 Mbps; HSDPA, 21 Mbps;
HSUPA, 5.76 Mbps, LTE, 100 Mbps; HSDPA, 21 Mbps; HSUPA,
Speed Rev. A, up to 3.1 Mbps 5.76 Mbps

iPhone 5 vs Galaxy S3 (LTE)


LTE compared to desktop


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


© 2012 Strangeloop Networks
2011 Strangeloop. Faster Websites. Automatically.
Strangeloop. Faster Websites. Automatically. 103

2012 Annual State of the Union for Mobile Ecommerce Performance [Velocity EU]

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (19)

Semelhante a 2012 Annual State of the Union for Mobile Ecommerce Performance [Velocity EU]

Semelhante a 2012 Annual State of the Union for Mobile Ecommerce Performance [Velocity EU] (20)

Último

Último (20)

2012 Annual State of the Union for Mobile Ecommerce Performance [Velocity EU]

Notas do Editor