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

Transcription

1 1 June 17, 2014 Responsive Web Design: A Three-Screen Study in Site Performance Ken Harker Senior Consultant ken.harker@keynote.com Keynote Consulting Mobile Research Summit: Data & Insights 2014 June 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 2

3 One Screen To Rule Them All 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 most users followed along with the main herd 3

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? Build two versions of your site? Or one version that adapts to different screen sizes? 4

5 The Smartphone Has Been An Afterthought 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 [Source: 5

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 43% of those visitors only use mobile devices when shopping at Target [Source: 6

7 Graceful degradation vs. progressive enhancement 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 degradation design strategy 7

8 8 June 17, 2014 What is Responsive Web Design?

9 What is Responsive Web Design RWD is a web design approach aimed at creating web sites with an optimal user interface experience across multiple devices and screen sizes 9

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 Site owners need maintain only one version of the web site 10

11 Real-life Example: HiutDenim 11

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 Introduce new features and content on all screens at the same time 12

13 How is RWD Implemented? 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 example, displaying content in 2 columns instead of 3 columns 13

14 But Is There a Downside? Yes. Performance is the major problem for smartphone users. 14

15 We All Expect Fast Page Loads 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 A 1 second delay in page response time can result in a 7% reduction in conversions [Source: 16

17 We Need Fast Mobile Page Loads 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 Success is measured in milliseconds, not seconds 18

19 Why Does Performance Suffer? 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 mobile 19

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 Best practice standards for the desktop will not work well on mobile [Source: 20

21 Other Hassles with RWD 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 More testing required 21

22 22 June 17, 2014 RWD and Mobile Performance: The Study

23 Keynote and Mobile Performance 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 Important to measure both smartphone and tablet user experiences 23

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 24

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 25

26 Study Results Device Type Response Time (sec) Success Rate (%) Fastest Site (sec) Slowest Site (sec) Responsive Design Desktop % Responsive Design Tablet % Responsive Design Smartphone %

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 27

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 Sometimes, this optimization can have unexpected results and can result in errors 28

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 29

30 Page Weight Matters The fastest RWD sites on smartphones all have less than 1MB of total page weight 30

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

32 32 June 17, 2014 Opportunities to Improve

33 10 Technical Strategies for RWD Sites Reduce the number of HTTP requests Parallel downloads Use as few domains as possible Always load content in the order it appears on the screen Remove unnecessary redirections

34 10 Technical Strategies for RWD Sites Reduce the number of HTTP requests Use as few domains as possible Manage third-party calls Optimize images Parallel downloads Always load content in the order it appears on the screen Effective cache controls Use persistent TCP connections Remove unnecessary redirections Use SSL only when necessary

35 RESS = Responsive + Server-Side 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 appropriatelyscaled images 35

36 36 June 17, 2014 Questions?