Mobile Web Performance

(1)

Understand and Overcome!

(2)

#mobileweb @yottaa

@marlinmobile www.yottaa.com | www.marlinmobile.com 2

Your Presenters

Ari Weil

VP of Products, Yottaa

@aweil

Adrian Mendoza

Co-founder, Marlin Mobile

@marlinUX

(3)

Agenda

Mobile: much ado about...what exactly?

Smaller is only the beginning

Optimization best practices

Overcome and win

(4)

20% of electronics purchases using mobile

35% of mobile visitors prefer www to m.site

80% of mobile revenue from full site browsing

#mobileweb @yottaa

(5)

Mobile traffic - it’s just the tip of the iceberg

(6)

#mobileweb @yottaa

(7)

So you see, this “small” problem can be BIG

51% say websites hard to navigate & use

46% say product images are too small

41% are concerned about security

(8)

#mobileweb @yottaa

And when you get it wrong, you lose…BIG

64%

OF SMARTPHONE

USERS EXPECT

PAGES TO LOAD IN

UNDER

4s

$1Bn

APPAREL &

ACCESSORIES

PURCHASES

in Q113

71%

Of all retail

transactions

SMARTPHONE

USERS SHOP

VIA MOBILE

48%

Expect mobile

to be faster

than desktop

85%

Will go to

a competitor

to transact

42%

Will never

return to

your site

29%

(9)

Don’t be that business

that if they arrive on a business site that isn't working well on

mobile, they take it as an indication of the

48% of users say

(10)

www.yottaa.com | www.marlinmobile.com

(11)

Know the mobile ecosystem

This is your mobile experience now…

(12)

#mobileweb @yottaa

And what goes into loading a web page

Images

Javascript

(13)

Now consider the average eCommerce page

Trust Icons

High-Res Images

Long-scrolling pages

Social Media

Dynamic Content

In Addition:

• A/B Tests

• Analytic tracking

• Beacons

• Chat

• Personalization

• Pixels

Visitors expect

fast, flawless

experiences on

any device

Marketing needs

social media and

other tags to

engage visitors

IT needs control

to ensure speed,

scalability and

security

(14)

Cannot impact 3

rd

_{party dynamic}

content like social media or ads

CONTENT DELIVERY

NETWORKS

#mobileweb @yottaa

Reality: ever-growing content and complexity

PAGE

LOAD

T

IME

IT

EFF

ORT

& TI

ME

SITE LAUNCH

ONGOING MAINTENANCE AND USER ENGAGEMENT EFFORTS

UPDATE CONTENT

& IMAGES

ADD SOCIAL MEDIA

WIDGETS

ADD REAL TIME

PERSONALIZATION

A/B TEST PAGE

CONTENT

Hiding components

cannot keep pace

with ongoing User &

Marketing needs

Cannot control page load

behavior, content priority

FRONTEND

OPTIMIZATION

Manual effort for every

content change

DO IT

(15)

(16)

Implement Responsive Web Design

#mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 16

Advantages

Disadvantages

Most consistent user experience possible Requires additional code re-working

No duplicate content maintains rankings

Difficult to differentiate mobile content

Max link value. No risk of split link value

Could affect usability/CRO

(17)

Responsive Web Design Dirty Little Secret

ALL websites are exactly the

(18)

Little r – presentation mostly

–

Fluid, flexible layout

–

Media queries

–

Responsive images

Big R

–

Dynamic serving

BOTH are better than

#mobileweb @yottaa

(19)

Fact: Reducing Page Weight/Requests Works

increased

performance by

68%

by reducing

HTTP requests

small page-1.5s

big page – 4.7s

(20)

Desktop: 78 requests,

5.1sec

load time

Mobile: 38 requests,

20.8sec

load time

#mobileweb @yottaa

Reduce requests

Still loading…

(21)

Fact: Mobile behaves differently

Example:

parallelizing requests

HURTS mobile

(22)

#mobileweb @yottaa

Myth #1: A CDN solves everything

Example:

Cloud storage

being used for

image assets

(23)

Myth #2: Design for First Paint is enough

Time to First Paint:

5 seconds

Your users radio stays on for

an additional 12 seconds

burning their battery.

(24)

#mobileweb @yottaa

Myth #3: Delay-loading 3

rd

_{party assets wins}

Example:

analytics tag

keeps the page

from completely

loading

Time to First Paint:

5 seconds

(25)

(26)

#mobileweb @yottaa

Optimizations that work (but…TNSTAAFL)

Treats

Middle mile geographic latency

Good for

Individual assets, streaming media

Challenges Visitor context

Related assets

Versioning

CDN

Treats

Content weight, round trips

Good for

Efficient asset delivery, rendering

Challenges Visitor context

Device capabilities

Ongoing care & feeding

(27)

Yottaa: holistic site optimization service

See business results before you buy

www.yottaa.com/prove-it

40% FASTER

InstantON

AppSequencing

MORE CONTROL

ContextIntelligence

DEEP INSIGHT

(28)

#mobileweb @yottaa

Marlin Mobile: Monitor your mobile web

Get insights from REAL mobile devices

See your REAL customer view on mobile

Sign up for a free account

–

marlinmobile.com/free

(29)