The document discusses optimizing mobile web performance. It begins with an agenda for the presentation and statistics showing the importance of mobile. Common mobile user frustrations are outlined. The presenters then discuss understanding the complex mobile ecosystem and content that impacts page load times. Optimization best practices covered include responsive design, reducing page weight and requests, and myths around technologies like CDNs. The presentation concludes that holistic optimization is needed to overcome challenges and win on mobile.
3. 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
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
@marlinmobile
www.yottaa.com | www.marlinmobile.com 4
Why is everyone so focused on mobile?
5. Mobile traffic - it’s just the tip of the iceberg
#mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 5
0.7 Billion
7. #mobileweb @yottaa
@marlinmobile
www.yottaa.com | www.marlinmobile.com 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
26% feel that checkout is frustrating
8. #mobileweb @yottaa
@marlinmobile
www.yottaa.com | www.marlinmobile.com 8
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. #mobileweb @yottaa
@marlinmobile
www.yottaa.com | www.marlinmobile.com 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
business simply does not care.
13. Now consider the average eCommerce page
#mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 13
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
14. Cannot impact 3rd party dynamic
content like social media or ads
CONTENT DELIVERY
NETWORKS
#mobileweb @yottaa
@marlinmobile
www.yottaa.com | www.marlinmobile.com 14
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
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
No redirects = low latency & fewer errors New code may affect rankings
17. Responsive Web Design Dirty Little Secret
#mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 17
ALL websites are exactly the
same in page size and requests!
18. Little r – presentation mostly
– Fluid, flexible layout
– Media queries
– Responsive images
Big R
– Dynamic serving
BOTH are better than
#mobileweb @yottaa
@marlinmobile
www.yottaa.com | www.marlinmobile.com 18
The difference between little r and big R
19. #mobileweb @yottaa
@marlinmobile
www.yottaa.com | www.marlinmobile.com 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
@marlinmobile
www.yottaa.com | www.marlinmobile.com 20
Reduce requests
Still loading…
So what went wrong?
23. #mobileweb @yottaa
@marlinmobile
www.yottaa.com | www.marlinmobile.com 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
@marlinmobile
www.yottaa.com | www.marlinmobile.com 24
Myth #3: Delay-loading 3rd party assets wins
Example:
analytics tag
keeps the page
from completely
loading
Time to First Paint:
5 seconds
26. #mobileweb @yottaa
@marlinmobile
www.yottaa.com | www.marlinmobile.com 26
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
27. #mobileweb @yottaa
@marlinmobile
www.yottaa.com | www.marlinmobile.com 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
@marlinmobile
www.yottaa.com | www.marlinmobile.com 28
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.
This is important because if you consider the average web page, you can see that it’s actually a complex online application.
The average web page:
Requires the browser to download and display 1.4MB or more of content
From over 40 domains
Making 200 or more round trips
…in under 4 seconds