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/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

Geography

How does data work on a mobile network?

3G vs LTE

Case StudyWhat speeds up a mobile site?

Methodology

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.

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

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

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

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

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

• 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

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

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

Digital Strategies for eCommerce: Exploring the eCommerce

Manual eCommerce by eCommerce News

eCommerce from A to Z - Duval Union Academy

eCommerce Event Agenda · Presentation on Developing an Effective eCommerce Strategy Across All Channels Panel – Learning from eCommerce Strategies of the Enterprises Bahrain eCommerce

eCommerce best practicesfiles.meetup.com/19147467/eCommerce-best-practices1.2.pdf · 2016-10-18 · eCommerce best practices for starters ... Magento-based ecommerce –currently

Radware State of the Union: Ecommerce Page Speed & Web Performance Infographic

OpenStack Workload Reference Architecture: eCommerce · OpenStack Workload Reference Architecture: eCommerce 2 OpenStack for eCommerce For this reference architecture, the eCommerce

Building eCommerce apps - Philadelphia eCommerce Meetup

The German-German Monetary Union 1990 - Alexander …€¦ · · 2010-08-26The German-German Monetary Union 1990 ... o Flows refer to current payments ... Slide 23 Velocity versus

LEGAL ASPECTS OF THE ECOMMERCE SHOP - Ecommerce Summit

eCommerce - Knowledgebase / ESP Websites / eCommerce - …

The rise of ecommerce,ecommerce business in India

UNION PACIFIC RAILROAD Intermodaluprr/@customers/documents/up_pdf... · UNION PACIFIC RAILROAD Intermodal. ... † Instant access to ﬂ eet through eCommerce solutions ... giving

Building a Best-in-Class eCommerce Capabilitycapregroup.com/uploads/eCommerce-Capability.pdf · 6 Building a Best-in-Class eCommerce Capability eCommerce is a digital, fast-moving

Ecommerce Website Designing Company in Delhi | Ecommerce Solution

SingPost eCommerce eCommerce in Asia Pacific t eCommerce March 2015r.pdf · ECOMMERCE LEADER IN APAC Localized front end, payments, order & store management 1000+ eCommerce Clients

eCommerce Summit Atlanta State Of eCommerce

TUMBLEWEED CATALOG 2013 - Ecommerce Blog — Ecommerce

Ecommerce Marketing Blog - Ecommerce News, Online Store

Ecommerce Website Designs | Ecommerce Web Development Company