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