Users are now browsing the Web across smartphones, tablets and the desktop. Find out how performance differs for each screen and what to consider in order to deliver a great online experience.
6. DESKTOP SMARTPHONE TABLET
Source: Yankee Group and Keynote Systems, 2012
Verizon and AT&T wireless connections were used for the smartphone and tablet device measurements
7. 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
8. 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
9. Smartphones & tablets: Why so much difference?
Source: Yankee Group and Keynote Systems, 2012
10. 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
12. 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
13. 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 Bytes downloaded 2318 KB
Images 15 Images 32
Page elements 20 Page elements 57
14. 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â Page â2â
Data URIs improve performance âŠbut subsequent page impacted
after change⊠due to images not cached
Keynote Performance Consulting case study
15. 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
16. 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