View
203
Download
2
Category
Preview:
DESCRIPTION
Citation preview
www.yottaa.com | www.marlinmobile.com
Understand and Overcome!
Mobile Web Performance
www.yottaa.com | www.marlinmobile.com 2#mobileweb @yottaa @marlinmobile
Your Presenters
Ari WeilVP of Products, Yottaa@aweil
Adrian MendozaCo-founder, Marlin Mobile@marlinUX
www.yottaa.com | www.marlinmobile.com 3
Agenda
#mobileweb @yottaa @marlinmobile
Mobile: much ado about...what exactly?Smaller is only the beginningOptimization best practicesOvercome and winQ&A
www.yottaa.com | www.marlinmobile.com 4
20% of electronics purchases using mobile35% of mobile visitors prefer www to m.site80% of mobile revenue from full site browsing
#mobileweb @yottaa @marlinmobile
Why is everyone so focused on mobile?
www.yottaa.com | www.marlinmobile.com 5
Mobile traffic - it’s just the tip of the iceberg
#mobileweb @yottaa @marlinmobile
0.7 Billion
www.yottaa.com | www.marlinmobile.com 6#mobileweb @yottaa @marlinmobile
Plus, it’s a part of virtually every transaction
www.yottaa.com | www.marlinmobile.com 7#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
www.yottaa.com | www.marlinmobile.com 8#mobileweb @yottaa @marlinmobile
And when you get it wrong, you lose…BIG
64%OF SMARTPHONE USERS EXPECT PAGES TO LOAD IN
UNDER 4s
$1BnAPPAREL &ACCESSORIESPURCHASES
in Q113
71%Of all retail transactions
SMARTPHONEUSERS SHOPVIA MOBILE
48%
Expect mobile to be fasterthan desktop
85%Will go to a competitorto transact
42%Will neverreturn toyour site
29%
www.yottaa.com | www.marlinmobile.com 9#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 saybusiness simply does not care.
www.yottaa.com | www.marlinmobile.com
Smaller is only the beginning.
www.yottaa.com | www.marlinmobile.com 11#mobileweb @yottaa @marlinmobile
Know the mobile ecosystem
This is your mobile experience now…
…its complicated
www.yottaa.com | www.marlinmobile.com 12#mobileweb @yottaa @marlinmobile
And what goes into loading a web page
Images
Javascript
Via HTTPArchive, May ‘13-’14
www.yottaa.com | www.marlinmobile.com 13
Now consider the average eCommerce page
#mobileweb @yottaa @marlinmobile
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
www.yottaa.com | www.marlinmobile.com 14
Cannot impact 3rd party dynamic content like social
media or ads
CONTENT DELIVERY NETWORKS
#mobileweb @yottaa @marlinmobile
Reality: ever-growing content and complexityPA
GE L
OA
D T
IME IT
EFFO
RT &
TIM
E
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
www.yottaa.com | www.marlinmobile.com
Optimization best practices.
www.yottaa.com | www.marlinmobile.com 16
Implement Responsive Web Design
#mobileweb @yottaa @marlinmobile
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
www.yottaa.com | www.marlinmobile.com 17
Responsive Web Design Dirty Little Secret
#mobileweb @yottaa @marlinmobile
ALL websites are exactly the same in page size and requests!
www.yottaa.com | www.marlinmobile.com 18
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
www.yottaa.com | www.marlinmobile.com 19#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
www.yottaa.com | www.marlinmobile.com 20
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?
www.yottaa.com | www.marlinmobile.com 21#mobileweb @yottaa @marlinmobile
Fact: Mobile behaves differently
Example:parallelizing requests HURTS mobile experience
22#mobileweb @yottaa @marlinmobile
www.yottaa.com | www.marlinmobile.com
Myth #1: A CDN solves everything
Example:Cloud storage being used for image assets
23#mobileweb @yottaa @marlinmobile
www.yottaa.com | www.marlinmobile.com
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 @marlinmobile
www.yottaa.com | www.marlinmobile.com
Myth #3: Delay-loading 3rd party assets wins
Example:analytics tag keeps the page from completely loading
Time to First Paint:5 seconds
www.yottaa.com | www.marlinmobile.com
Overcome and win.
www.yottaa.com | www.marlinmobile.com 26#mobileweb @yottaa @marlinmobile
Optimizations that work (but…TNSTAAFL)
Treats Middle mile geographic latency
Good for Individual assets, streaming media
Challenges
Visitor context
Related assets
VersioningCDN
Treats Content weight, round trips
Good for Efficient asset delivery, rendering
Challenges
Visitor context
Device capabilities
Ongoing care & feedingFEO
www.yottaa.com | www.marlinmobile.com 27#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
www.yottaa.com | www.marlinmobile.com 28#mobileweb @yottaa @marlinmobile
Marlin Mobile: Monitor your mobile web
Get insights from REAL mobile devicesSee your REAL customer view on mobileSign up for a free account – marlinmobile.com/free
Get insight and data on your ENTIRE mobile ecosystem.
THANK YOU
#mobileweb @yottaa @marlinmobile
www.yottaa.com | www.marlinmobile.com 29
Recommended