Post on 14-Jan-2015
description
A 3-Screen Approach to
Website Performance
Optimization Robert Castley
Keynote Systems
Anthony Drewery
Hotels.com
The 3-screen Web is here, now
Source: Keynote Mobile User Study, 2012
Source: Keynote Mobile User Study, 2012
Source: Keynote Mobile User Study, 2012. Internet Retailer Mobile Commerce Guide, 2012.
Source: Yankee Group and Keynote Systems, 2012
Verizon and AT&T wireless connections were used for the smartphone and tablet device measurements
DESKTOP SMARTPHONE TABLET
Site performance across 3-screens varies… Dramatically
Desktop performance does not
carry over to smartphones and
tablets
No website was in the top 3
across all the different screens
Most websites send the same
content to smartphones and
tablets
Source: Yankee Group and Keynote Systems, 2012
Verizon and AT&T wireless connections were used for the smartphone and tablet device measurements
Site performance across 3-screens varies… Dramatically
Desktop performance does not
carry over to smartphones and
tablets
No website was in the top 3
across all the different screens
Most websites send the same
content to smartphones and
tablets
Source: Yankee Group and Keynote Systems, 2012
Verizon and AT&T wireless connections were used for the smartphone and tablet device measurements
Smartphones & tablets: Why so much difference?
Source: Yankee Group and Keynote Systems, 2012
3-screen approach: Optimize with mobile in mind
Connection
- Assume 3G, not PC… even for tablets
Design
- Screen size and touch
Page Construction
- Minimize HTTP requests
- Data URIs
- Minimize redirects
- Manage third parties carefully
Responsive design, custom sites… which one?
Responsive
approach
Custom sites /
progressive
enhancement
approach
Be direct
Latency of mobile is 5X to 10X Web
- TCP connection 100MS -300MS
- First Packet 300MS to 700MS
- Each roundtrip really counts!
Avoid redirections whenever possible
(exception: HTTP to HTTPS)
Limit DNS lookup per page to 1
Always use HTTP Keep Alive
CVS improved their load time 13% by
eliminating 2 redirects
Keep it light
Try to limit number of
elements per page to <10
new HTTP requests
Audit image content for
appropriate resolution,
quality settings and
compression
Bytes downloaded 97 KB
Images 15
Page elements 20
Bytes downloaded 2318 KB
Images 32
Page elements 57
Data URIs: Caution
Embedded content strategy
Good solution for reducing
HTTP requests/round-trips
Bad for content used in
subsequent pages
(not cached)
Results may vary! Test and
monitor.
Page “1”
Data URIs improve performance
after change…
Keynote Performance Consulting case study
Page “2”
…but subsequent page impacted
due to images not cached
Watch third parties
More requests/round trips
Load after point of initial
render
Asynchronous loading
Limit to 1 – 2 calls per
page… at most
Audit continuously
Find your own path
There is NO one-size-fits-all solution
Commit to accurately & consistently
measure performance
- Baseline and compare
Optimize based on where you have
issues/latency
Acknowledge and work within your
technical constraints
Learn from the Hotels.com journey
Top of the World by Izzard, on Flickr
Thank you
keynote.com/kms