Responsive Web Design: A Three-Screen Study in Site Performance

(1)

Responsive Web Design: A Three-Screen Study in

Site Performance

Ken Harker Senior Consultant [email protected] Keynote Consulting

Mobile Research Summit: Data & Insights 2014

June 2014

2014

(2)

All Web Sites Want To Do The Same Thing

Show the site visitor the information

that she wants in a way that is pleasant

to read on the device that she is using

(3)

One Screen To Rule Them All

3

 In the early days of the web, (almost) all screens were the same

 _{While the size of computer monitors increased over time, it did so gradually, and}

(4)

The Smartphone Changes Everything

 How do have a web site that is pleasant to read on a big screen and on a handheld device?

(5)

The Smartphone Has Been An Afterthought

5

 As recently as the 2012 holiday shopping season, only 60% of the top 100 e-retailers even had mobile sites at all

 On many sites, only the Home page was optimized for mobile

 On average, 19% of pages requested by mobile browsers returned mobile-optimized content

 Too many mobile sites, even today, offer only a small fraction of the content available on the desktop site

 _{Fewer development resources, less operational monitoring, poor understanding}

(6)

The Smartphone Is No Longer a Niche

 Amazon.com is the #1 online shopping destination in the world

 178 million monthly unique visitors

 _{29% of those visitors only use mobile devices when shopping at Amazon}  Target is the #4 online shopping destination online

 66 million monthly unique visitors

(7)

Graceful degradation vs. progressive enhancement

7

 Graceful degradation is the idea that you should design the site to give the best experience possible, and then accommodate any shortcomings of the device as best as possible

 In progressive enhancement, you design the best possible experience for the most basic devices first, and gradually enhance the user experience for devices with greater capabilities and fewer constraints

 Responsive Web Design can use either a “graceful degradation” or a “progressive enhancement” approach, but in the real world, RWD is typically a “graceful

(8)

What is Responsive Web Design?

(9)

What is Responsive Web Design

9

RWD is a web design approach aimed

at creating web sites with an optimal

user interface experience across

(10)

What is Responsive Web Design

 An RWD site requires a minimum of scrolling, resizing, or panning whether being viewed on large displays or small displays

 Content is adapted to the viewing environment on the fly, without separate “desktop” and “mobile” sites

(11)

Real-life Example: HiutDenim

(12)

The Benefits of RWD

 A primary benefit of Responsive Web Design is that there is only one URL for each page on the site

 _{Search engines need only index one URL for the content}

 Content providers can focus on one SEO strategy

 More users may find your products or services through organic search

 _{Social media engagement is enhanced}

 _{When users share URLs on Facebook, Twitter, Pinterest, etc. it doesn’t matter if their friends are on mobile devices}

or desktop devices

 Marketing analytics are easier

 You can still get breakdowns of users by browser types (mobile versus desktop) but no longer is the mobile and desktop traffic separate

 Innovate Faster

 Fewer specialized teams

 Avoid the hassle of outsourcing the mobile site effort to a third-party specialty design house

(13)

How is RWD Implemented?

13

 Fluid grids use percentages and other flexible techniques rather than fixed sizes or pixel counts

 Flexible images are also adapted to deliver high quality at different screen resolutions

 Sometimes, images can be avoided altogether using newer HTML5 markup options

 _{CSS media queries allow the page to adapt its formatting to different screen sizes; for}

(14)

But Is There a Downside?

Yes.

Performance is the major

(15)

“In the blink of

an eye.”

(16)

Waiting is Not Pleasant

 47% of consumers expect web pages to load in 2 seconds or less

 _{40% abandon web sites that take longer than 3 seconds to load}

 79% of shoppers who are dissatisfied with a site’s performance are unlikely to return

(17)

After 10

seconds, half of

your customers

are gone.

(18)

The Bottom Line

 Delays in page load time result in increased abandonment, decreased loyalty, and loss of revenue

 Even very small delays will drive your potential customers to the competition or keep them from returning to your site

(19)

Why Does Performance Suffer?

19

 On almost every site built with RWD, pages load all of the content that users with large displays on fast, wired Internet connections can use, and then “adapt” the content to fit on the small screen

 Mobile network connections (3G, 4G, 4G LTE, even WiFi) do not have the same capabilities as high-speed, low-latency wired network connections

 _{A 1MB page might be completely reasonable on desktop, but incredibly sluggish on}

(20)

Not All Networks Are the Same

 Your standard 3G mobile network connection has significantly slower throughputs and much slower latencies than most home and office wired connections

(21)

Other Hassles with RWD

21

 For sites that display ads, many ad brokers cannot deliver ad images that are fluid, but rather serve content at fixed pixel dimensions

 This complicates the delivery of ad content to smartphone browsers or may force certain pages to use separate desktop and mobile URLs

 Some ad content may be forced to fit, leaving awkward empty space on the screen

 The development cycle might be longer than for a typical non-RWD site

 More requirements in the planning stages

 More development time

(22)

RWD and Mobile Performance: The Study

(23)

Keynote and Mobile Performance

23

 Keynote has been directly measuring and analyzing the mobile web since 2007

 _{We learned early on that it is important to examine the user experience with real}

mobile network connections

(24)

An RWD Study

 In the winter of 2014, Keynote conducted a study of 12 sites built with Responsive Web Design for a special article in Internet Retailer

 Measurements were taken in January and February

 10 retailers in the US and 2 retailers in the UK

 Sites were measured over desktop, smartphone, and tablet

 Desktop measurements were made with high-speed backbone internet connections

 _{Smartphone measurements were taken over 3G and 4G mobile network connections}  _{Tablet measurements were made from high-speed backbone internet connections}

(25)

RWD Study Executive Summary

 None of the sites met Keynote performance targets for the smartphone experience

 _{For the mix of mobile operators on which the UK sites were measured, Keynote}

recommends 3 seconds or faster

 HiutDenim was the fastest UK site at 5.7 seconds on average

 For the mix of mobile operators on which the US sites were measured, Keynote recommends 4.5 seconds or faster

 At 8.74 seconds, Sweetwater was the only US site in the study faster than 10 seconds on average

(26)

Study Results

Device Type Response

Time (sec) Success Rate (%) Fastest Site (sec) Slowest Site (sec)

Responsive Design Desktop 3.15 99.78% 0.92 4.61

Responsive Design Tablet 2.80 99.16% 0.76 4.49

(27)

The Smartphone Experience Was Poor

 Although the study average page load times for Desktop and Tablet were in the 3-5 second range, the average smartphone home page load was over 18 seconds

 Even the best-performing RWD sites failed to meet Keynote performance targets on the smartphone

 Responsive Web Design sites need to optimize for smartphone performance

(28)

One Site Was Even Broken

 One of the sites in the study failed to render the Home Page when viewed on a major US mobile carrier

 Some mobile carrier, especially on their lower-performance networks, employ proxy servers to try to optimize web content going to mobile devices on their network

(29)

The Common Pitfall: Bloat

 A major driver for the slower performance on smartphones is page weight and element count

 Keynote recommends 20 or fewer new HTTP requests and 200K or lighter page weights

 None of the RWD sites met these recommendations

 The two fastest sites in the US were the only two below 300K and 30 elements each

(30)

Page Weight Matters

(31)

Element Count Matters

31

 The fastest RWD sites on smartphones have fewer than 30 round trips to web servers over the mobile network connections

(32)

Opportunities to Improve

(33)

Parallel downloads

Always load content in the order it appears

on the screen Reduce the number of

HTTP requests

Use as few domains as possible

Remove unnecessary redirections

(34)

Parallel downloads

Always load content in the order it appears

on the screen Reduce the number of

HTTP requests

Use as few domains as possible Remove unnecessary redirections Effective cache controls Use persistent TCP connections

Use SSL only when necessary

Manage third-party

(35)

RESS = Responsive + Server-Side

35

 A blended middle ground between developing entirely separate mobile and desktop sites versus having a single version of the web site that tries to adapt to all screens

 Server-side components can determine the kind of device being used (through analysis of the User-Agent string, for example) and automatically optimize some portions of the content before they are sent over the network

 _{For example, rather than sending full resolution photographic images and relying on}

the browser to scale them to fit, the server-side component can send appropriately-scaled images

(36)

Questions?

[email protected]