responsive web design: why image optimization is crucial for a

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 highly 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.

Trilibis Mobile April 2014 2

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 2013 data from the Pew Research Centeri, 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 browsing.ii 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. A recent Forrester surveyiii 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.

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 web sitesiv 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.


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

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 Commerce Performance Indexv (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.


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, there is evidenceiv 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 study conducted by Walmartvi 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 Search Agencyvii 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.

21%$

48%$

31%$

Only%1%in%5%Responsive%Sites%Demonstrated%Good%Load%Times%

Good$(<$4$secs)$

Bad$(438$secs)$

Ugly$(>$8$secs)$

0"

500"

1000"

1500"

2000"

2500"

3000"

Good"(<"4"secs)" Bad"(438"secs)" Ugly"(>8"secs)"

Image&Weight&a&Key&Driver&of&Overall&Page&Weight&

Other"Weight"

Image"Weight"


OPTIMIZING PAGE WEIGHT ON RESPONSIVE WEBSITES Responsive websites are often not designed with image optimization in mind. 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 RWD place heavy processing demands on the network and the device. For desktop computers with high-‐bandwidth connections and abundant local resources (disk, RAM), page weight is not a major concern. But for mobile devices, the exact opposite is true.

What if a web server could pre-‐process pages before serving them to devices?

Could server-‐side image optimization deliver a lower page weight without compromising user experience? To answer these questions, we analyzed those websites in our sample that served a home page weight greater than 1MB and served at least one image exceeding 100KB in size. 64 of the 155 websites in our survey met these criteria.

We ran every image on these websites through an image optimization process that would ensure excellent rendition on a wide range of desktop and mobile devices. To replicate a real-‐world experience, we optimized the images across all devices including mobile and desktop.

For the compression we used a cross-‐platform, open-‐source optimizer (GD graphics library), and selected image compression levels as follows: • PNG compression level set to 9 of 9 (max) • JPG compression level set to 50 of 100 • Mobile set to 640 pixels wide

The results were extraordinary.

Before server-‐side optimization, the total image weight of all 64 responsive websites was 115MB. The image optimization process dramatically reduced the page weight for every class of device: down to 50MB for desktop browsers, 30MB for tablets, and 27MB for smartphones (a reduction in page weight of 57 percent, 74 percent and 77 percent, respectively). The mean page weight of the 64 websites was 1.8MB; optimization reduced this to 780KB (desktop), 470KB (tablet) and 420KB (phone).


CASE STUDIES: APPLYING SERVER-‐SIDE OPTIMIZATION

It certainly makes sense to optimize images for the sake of efficiency, and our tests so far had yielded some dramatic page weight economies. An important benefit of lighter images is improved page load time — especially for mobile devices on cellular networks. We wondered how much we could improve the overall user experience for some real-‐world examples, and achieve the target load time for RWD sites on mobile devices of no more than 3-‐4 seconds.

We selected three RWD websites: boldandnoble.com, engadget.com, and starbucks.com. For each site, we replicated each site’s content on our own webserver. We then optimized all the images used on the home page of each website, calculated the image weight savings for both desktop and mobile devices, and then calculated load times both before and after optimization.

CASE 1: BoldandNoble.com Images accounted for 2.2MB (49 percent) of the total 4.5MB home page weight. Optimization results: • Reduced mobile page weight from 2.2MB to 212KB (90% savings). • Shortened load time from 6.63 seconds to 3.912 seconds (41% reduction).


CASE 2: Engadget.com Images accounted for 0.9MB (53 percent) of the total 1.7MB home page weight. Optimization results: • Reduced mobile page weight from 861KB to 362KB (58% savings). • Shortened load time from 11.814 seconds to 5.45 seconds (54% reduction).

CASE 3: Starbucks.com Images accounted for 0.9MB (53 percent) of the total 1.7MB home page weight. Optimization results: • Reduced mobile page weight from 892KB to 90KB (91% savings). • Shortened load time from 4.454 seconds to 3.206 seconds (28% reduction).

.


ADDING DEVICE AWARENESS TO RESPONSIVE DESIGN WEBSITES There is a wealth of excellent guidance on designing websites that deliver a superior user experience on mobile devices. Using responsive techniquesviii is considered a best practice for ensuring a consistent, “one web” experience across all devices.

In this survey, for 4 out of 5 highly rated responsive design websites, page weight and load time were sub-‐optimal. Applying server-‐side optimization techniques resulted in much lighter pages and substantially improved page-‐load times

These findings highlight some important design considerations for responsive websites: n Paying attention to image size is critical to

ensure responsive websites load quickly and deliver the best experience for mobile users.

n 69 percent of the responsive sites we sampled were image-‐heavy, with images contributing to more than 50 percent of overall page weight.

n The responsive sites in this survey generally loaded slowly 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

n 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.

Recommendations for website designers Our research shows that delivering a truly exceptional user experience on the Web requires more than simply redefining layout and styling for the screen width of a particular device.

Performance and user context are two critical areas where the limitations of responsive design are apparent.

To address these shortcomings, server-‐side technologies can be used in conjunction with responsive design techniques. These provide the ability to fine-‐tune the user experience for the device that is accessing the website. Server-‐side controls can easily allow for a complete swap of crucial page elements and enable custom functionality based on local device characteristics.

For example, a retailer can ensure fast presentation of a product catalog with images optimized for the accessing device. Or a content-‐heavy site can deliver entirely different ad placement based on device and user context.

These server-‐side technologies are simple to implement and apply readily available server-‐side computing resources to optimize the image size for the accessing device before it is sent to the client. This approach can deliver much faster load times — and a far better experience for the user.

Trilibis is focused on creating server-‐side technologies that simplify multi-‐device development and deployment. By marrying server-‐side technology with responsive design techniques, the web server can handle all the heavy lifting, providing the mobile visitor with a smooth and fast web experience.


APPENDIX A: LIST OF ALL SITES SURVEYED 2012.buildconf.com/ 2012.dconstruct.org/ 2012.fromthefront.it/ 2013.ampersandconf.com/ 2013.uxlondon.com/ 24ways.org/ 8faces.com/ ableton.com/ abookapart.com/ abwoodenwatches.com/ adayinbigdata.com/ aids.gov/rwd-‐router/ alistapart.com/ alwayscreative.net/ anderssonwise.com/ andytaylor.me/ aneventapart.com/ awwwards.com/ bahs.com/ bbc.co.uk/ beamland.com/ beta.tfl.gov.uk/ beta.visitstockholm.com/ boldandnoble.com/ bostonglobe.com/ cafeevoke.com/ capitalone.com/ carters.com/ chrisbrogan.com/ christmas.jackdaniels.com/ cinnamontoast.ca/ clearleft.com/ cloggs.co.uk/ colly.com/ contentsmagazine.com/ css-‐tricks.com/ currys.co.uk/ dacs.org.uk/ dadaabstories.org/ danielvane.com/ davegamache.com/ designedtomove.org/ designweekportland.com/ disney.com/ dmcileasing.com/ dressresponsively.com/ dribbble.com/ ebags.com/ ee.co.uk/ einstein.edu/ engadget.com/

fantassin.fr/ firebox.com/ fitforaframe.com/ fivesimplesteps.com/ fizzle.co/sparkline foodsense.is/ formfett.net/ fray.com/ garmin.com/ gatwickairport.com/ getbootstrap.com/ getdonedone.com/ gigaom.com/ gingerwhale.com/ goldinteractive.ch/ google.com/culturalinstitute/home gov.org/ gravitymovie.warnerbros.com/ happycog.com/ harvard.edu/ hbc.com/ hiutdenim.co.uk/ house.pl/kampania/ html.adobe.com/ hubspot.com/ iawriter.com/ipad/ indochino.com/ itravelyork.info/ jcsuzanne.com justinaguilar.com/ kennedyandoswald.com/ kershaw.kaiusaltd.com/ khanacademy.org/ kickstarter.com/year/2012 kinhr.com/ lancaster.ac.uk/ lifeingreenville.com/ listverse.com/ macdonaldhotels.co.uk/ mailchimp.com/ mashable.com/ maximin.tv/srm/ microsoft.com/en-‐ph/ microsoft.com/en-‐us/ mitsubishi-‐motors.com.au/ mry.com/ mulberry.com/us/ multcolib.org/ myrainbownursery.co.uk/ nd.edu/ nixon.com/ca/en/

nixon.com/uk/en/ nixon.com/us/en/ nokia.com/us-‐en/ nordicruby.org/ nscs.org/ oldspitalfieldsmarket.com/ oliverrussell.com/ olympic.ca/ omusicawards.com/ oxforddictionaries.com/us/ path.com/ pittsburghkids.org/ salesforce.com/ saltsurf.com/ sasquatchfestival.com/ sbnation.com/ singita.com/ skinnyties.com/ smashingmagazine.com/ sony.com/ spigotdesign.com/ squarespace.com/ starbucks.com/ stuffandnonsense.co.uk/ taktisk.volkswagen.no/ tattly.com/ teamtreehouse.com/ teehanlax.com/ thatma.de/ thenextweb.com/ thepaintdrop.com/ theprivatebank.com/ theworkcycle.com/ tilde.io/ time.com/time/ traveloregon.com/ trentwalton.com/ ucsd.edu/ unitedpixelworkers.com/ us.aritzia.com/ us.illyissimo.com/ us.suitsupply.com/ viljamis.com/ visitlondon.com/ vouchercodes.co.uk/ whisperism.com/ whitelotusaromatics.com/ wired.co.uk/ worldwildlife.org/ wythehotel.com/ zurb.com/


APPENDIX B: LOAD TIMES OF THE MOST IMAGE-‐HEAVY RESPONSIVE WEBSITES Responsive website Load Time Good/Bad/Ugly einstein.edu/ 2.49 alwayscreative.net 2.83 kennedyandoswald.com/#!/premiere-‐screen 2.90 awwwards.com 3.03 fitforaframe.com/ 3.98 saltsurf.com/ 4.21 hiutdenim.co.uk/ 4.47 2012.fromthefront.it/ 4.50 lifeingreenville.com/ 4.54 2012.buildconf.com/ 4.74 nixon.com/ca/en/ 4.81 path.com/ 4.84 us.suitsupply.com/en_US/home 5.04 gravitymovie.warnerbros.com/ 5.08 bbc.co.uk/ 5.13 ucsd.edu 5.42 html.adobe.com 5.54 beamland.com/ 5.59 nscs.org 5.67 designedtomove.org/ 5.76 thenextweb.com/ 5.78 us.illyissimo.com/ 5.87 tattly.com 5.95 mry.com/ 6.16 visitlondon.com/ 6.49 us.aritzia.com/ 6.54 boldandnoble.com/ 6.98 nordicruby.org/ 7.05 worldwildlife.org/ 7.51 theprivatebank.com/ 7.56 abwoodenwatches.com 7.59 house.pl/kampania 8.05 microsoft.com/en-‐us/ 8.12 teamtreehouse.com 8.14 adayinbigdata.com/ 8.72 starbucks.com/ 9.89 pittsburghkids.org/ 10.34 currys.co.uk/gbuk/index.html 10.75 fandango.com/movies/valentinesday 10.91 singita.com/ 11.35 engadget.com/ 11.42 omusicawards.com 11.87 carters.com/ 12.21 time.com/time/ 12.63 oldspitalfieldsmarket.com 13.39 disney.com 13.40 formfett.net/ 13.44 cloggs.co.uk/ 14.13 nokia.com/us-‐en/ 15.48 sony.com/ 15.52 hubspot.com/ 15.97 itravelyork.info/ 15.98 traveloregon.com 16.24 olympic.ca/ 17.66 garmin.com/en-‐US 18.57 kinhr.com 20.50 oliverrussell.com 21.14 wired.co.uk 21.98 dadaabstories.org 24.76 google.com/culturalinstitute/home 27.97 sbnation.com/ 28.66 sasquatchfestival.com/ 48.08


APPENDIX C: STUDY METHODOLOGY Trilibis compiled a list of 155 prominent responsive sites based on published data from Dashburst, Econsultancy, Mobify, Search Engine Journal, and The Next Web. Researchers then examined the total page and image weights of the home page of each of these responsive sites, and then measured the load time of each page on a mobile device. For the image optimization analysis, we optimized the JPEG and PNG images of the targeted sites using image compression and resizing methods suitable for desktop machines, tablets, and smartphones. Other sources referenced in this survey: i Internet Retailer, September 2013 ii Adobe Digital Marketing Blog, March 2013 iii More Than Hype: Determining When To Use Responsive Web Design, Mark Grannan & Peter Sheldon, Forrester Research, November 2013 iv The Great Web Slowdown, Web Performance Today, February 2014 v Keynote Systems. Performance Index: Mobile Commerce (Retail) – US, March 2014 vi How page speed correlates to business metrics at Walmart.com, Web Performance Today, February 2012. vii Mobile Experience Scorecard: Fortune 100 Companies, The Search Agency, October 2013 viii 12 Tips for Creating a Mobile-‐Friendly Website, CIO.com, March 2014

Documents

responsive web design: why image optimization is crucial for a