Understand and overcome mobile web performance challenges

www.yottaa.com | www.marlinmobile.com
Understand and Overcome!
Mobile Web Performance

#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

Agenda
#mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 3
Mobile: much ado about...what exactly?
Smaller is only the beginning
Optimization best practices
Overcome and win
Q&A

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
@marlinmobile
Why is everyone so focused on mobile?

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

#mobileweb @yottaa
@marlinmobile
Plus, it’s a part of virtually every transaction

#mobileweb @yottaa
@marlinmobile
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
26% feel that checkout is frustrating

#mobileweb @yottaa
@marlinmobile
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%

#mobileweb @yottaa
@marlinmobile
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
business simply does not care.

Smaller is only the beginning.

#mobileweb @yottaa
@marlinmobile
Know the mobile ecosystem
This is your mobile experience now…
…its complicated

#mobileweb @yottaa
@marlinmobile
And what goes into loading a web page
Images
Javascript
Via HTTPArchive, May ‘13-’14

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
• RWD w/out RESS
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

Cannot impact 3rd party dynamic
content like social media or ads
CONTENT DELIVERY
NETWORKS
#mobileweb @yottaa
@marlinmobile
Reality: ever-growing content and complexity
PAGELOADTIME
ITEFFORT&TIME
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
YOURSELF

Optimization best practices.

Implement Responsive Web Design
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
No redirects = low latency & fewer errors New code may affect rankings

Responsive Web Design Dirty Little Secret
ALL websites are exactly the
same in page size and requests!

Little r – presentation mostly
– Fluid, flexible layout
– Media queries
– Responsive images
Big R
– Dynamic serving
BOTH are better than
#mobileweb @yottaa
@marlinmobile
The difference between little r and big R

#mobileweb @yottaa
@marlinmobile
Fact: Reducing Page Weight/Requests Works
increased
performance by
68%
by reducing
HTTP requests
small page-1.5s
big page – 4.7s

Desktop: 78 requests, 5.1sec load time
Mobile: 38 requests, 20.8sec load time
#mobileweb @yottaa
@marlinmobile
Reduce requests
Still loading…
So what went wrong?

#mobileweb @yottaa
@marlinmobile
Fact: Mobile behaves differently
Example:
parallelizing requests
HURTS mobile
experience

#mobileweb @yottaa
@marlinmobile
Myth #1: A CDN solves everything
Example:
Cloud storage
being used for
image assets

#mobileweb @yottaa
@marlinmobile
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.

#mobileweb @yottaa
@marlinmobile
Myth #3: Delay-loading 3rd party assets wins
Example:
analytics tag
keeps the page
from completely
loading
Time to First Paint:
5 seconds

Overcome and win.

#mobileweb @yottaa
@marlinmobile
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
FEO

#mobileweb @yottaa
@marlinmobile
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

#mobileweb @yottaa
@marlinmobile
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
Get insight and data on your ENTIRE mobile ecosystem.

THANK YOU

Understand and overcome mobile web performance challenges

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (18)

En vedette

En vedette (6)

Similaire à Understand and overcome mobile web performance challenges

Similaire à Understand and overcome mobile web performance challenges (20)

Dernier

Dernier (20)

Understand and overcome mobile web performance challenges

Notes de l'éditeur