Idea Transcript
RESPONSIVE WEB DESIGN: WHY IMAGE OPTIMIZATION IS CRUCIAL FOR A MOBILE-‐FRIENDLY CUSTOMER EXPERIENCE
EXECUTIVE SUMMARY
Responsive websites are often not designed with the crucial mobile user as the foremost priority. For many web designers and developers, ensuring a high-‐quality visual experience and delivering a project within tight timelines are top priorities.
However, the automatic smooth image resizing and other layout transformations that are the essence of responsive design can place heavy processing demands on mobile devices. In this survey, Trilibis assesses the impact of image-‐heavy responsive websites on the experience of mobile users.
SURVEY FINDINGS
! Paying attention to image size is critical for ensuring that responsive websites load quickly and deliver the best experience for mobile users. ! In this survey, for 4 out of 5 h ighly rated responsive design websites, page weight and load time were sub-‐optimal. ! 69 percent of the responsive sites we sampled were image-‐heavy, with images contributing to more than 50 percent of overall page weight. ! The responsive sites in this survey generally performed badly on mobile phones. – –
Only 32 out of the 155 responsive sites (21 percent) responded with acceptable load times. 32 percent took anywhere from 8 to 48 seconds to load
! Server-‐side image optimization delivered some compelling performance gains on mobile devices: – –
Image weight was reduced by 77 percent. Page-‐load times were reduced by 28-‐54 percent.
RESPONSIVE DESIGN AND CUSTOMER EXPERIENCE FOR MOBILE
Millions of consumers prefer to use mobile devices to connect with the websites of marketers, publishers and top brands. According to August i 2013 data from the Pew Research Center , 63 percent of U.S. adult mobile phone owners now use their phones to go online—double the level of 2009. Significantly, 34 percent of these consumers say they access the web primarily from their mobile phones. Meanwhile, tablets, which account for 8 percent of total U.S. web traffic, have surpassed smartphones as the preferred device for mobile ii browsing. Designing for optimal presentation of content on mobile devices has become a high priority for website developers. For many of them, ensuring that their website will display perfectly across all types of mobile devices and all major browsers — on tablets and mobile phones, as well as desktops. Responsive web design (RWD) has become a popular web design methodology to address this need. iii A recent Forrester survey reported that more than 40 percent of developers chose responsive design, or a variant of it, as part of their current web design approach. The same report also noted the “hype and lack of understanding” associated with RWD, especially with regard to best practices related to implementation.
Trilibis Mobile
Here at Trilibis, we’ve watched the market shift from so-‐called “m-‐dot” websites, which are developed specifically for mobile phones (and offer content that differs from full-‐featured desktop sites), to a general market consensus that, for most brands, it makes more sense to have a single website codebase that serves content to all kinds of devices — desktop, phone and tablet. We support the RWD approach because we see it as an efficient way to deliver a holistic “one web” experience across all devices. However, this ‘one size fits all’ approach has some potential and significant downsides. Radware recently tested the load times of the top 500 retail iv web sites and found that pages are heavier and slower than they were just one year ago. This correlates with our own experiences. Through our work with clients to eliminate performance issues on their websites, we noticed that aspects of RWD sites were often the reason for slow site load on mobile devices. Too often, in the rush to deploy a time-‐sensitive website, performance and page-‐load time are not given the necessary attention to ensure the best experience for mobile users.
April 2014
2
ANALYSIS: IMAGE SIZE VS. PAGE WEIGHT While a number of factors can determine the overall weight (i.e., size in bytes) of a web page, images are generally the principle contributor. This is particularly true for responsive websites, which generally serve the same content to all devices. This can lead to overly large images being served to mobile devices. This survey sets out to measure the image weight of the top RWD websites and assesses: 1.
How much do images contribute to page weight on responsive websites?
2.
How much does this affect load time for different types of users?
3.
Can page weight and load time be reduced without affecting user experience?
To compile a list of the best RWD sites, we turned to the industry experts. Our shortlist was based on recommendations provided by Dashburst, Econsultancy, Mobify, Search Engine Journal, and The Next Web. This yielded a list of 155 prominent
Trilibis Mobile
websites that use RWD techniques to optimize content for mobile devices (see Appendix A). To better understand how much the size of each website’s home page consisted of images, we ran a set of tests on all 155 sites to rank them by page weight. We encountered a wide range of results: the lightest page was a mere 57KB while the heaviest came in at a whopping 11MB. On average, the mean home page weight of the 155 sites we sampled was 1.7MB, with a median weight of 1.2MB. Notably, this figure was considerably heavier than the 420KB average page weight of the top 30 retailers tracked on the Keynote Mobile v Commerce Performance Index (a well-‐regarded industry benchmark). Also of note was the distribution of image weight as a percentage of overall page weight. For 107 of the 155 sites (69 percent), images constituted more than 50 percent of overall page weight. The six most image-‐heavy sites served home pages with more than 90 percent of overall page weight consisting of images.
April 2014
3
PAGE WEIGHT VERSUS LOAD TIME
Most designers would agree that a heavy page directly conflicts with a core objective that led to the adoption of a RWD approach: to deliver an excellent experience for the mobile users. In fact, iv there is evidence that, in general, pages delivered to mobile users are loading more slowly: 9.3 sec in 2014 vs 7.7 sec in 2013, based on the median load time of 500 ecommerce home pages. More importantly, there is a direct relationship between page-‐load time and shopper behavior. A vi study conducted by Walmart concluded that faster pages resulted in more buyers than non-‐buyers. Other research underscores the emphasis on page-‐ load times. The March Keynote index showed average load time for all top 30 retailers on mobile devices was 7.73 seconds, with the longest clocking in at 18.15 seconds. Research conducted by The vii Search Agency found that the average time it takes to load a Fortune 100 company homepage on a smartphone is about 5 seconds. This research found that average page load speeds were much quicker on dedicated mobile sites (2.9 seconds) than on desktop sites accessed via a smartphone (6.57 seconds), while those sites using responsive
design had the slowest load speeds, timing out at an average of 8.4 seconds. Based on the performance of dedicated mobile sites, one conclusion that can be drawn from this is that 3-‐4 seconds is a reasonable target for page-‐load time on mobile devices. To understand the load times of the 155 responsive sites in this survey, we tested them using the Akamai Mobitest on-‐line tool and recorded the following times: mean: 7.95 seconds; median: 5.82 seconds; minimum: 0.54 seconds; maximum: 48.08 seconds. There was clearly room for much improvement in page-‐load time for the responsive design websites we sampled: 1. The responsive sites generally loaded slowly on mobile phones. Only 32 out of the 155 responsive sites (21 percent) responded with acceptable load times of less than 4 seconds. 32 percent required anywhere from 8 to 48 seconds to load. 2. Load time becomes unacceptable when page weight exceeds 1 MB. 3. On average, images make up 50–60 percent of page weight in this survey.
Image&Weight&a&Key&Driver&of&Overall&Page&Weight&
Only%1%in%5%Responsive%Sites% Demonstrated%Good%Load%Times%
3000" 2500"
31%$
2000"
21%$ Good$($8$secs)$
500"
48%$
Other"Weight" Image"Weight"
0" Good"(