June 2, 2014, 3:50 PM

The ugly truth about responsive design (and how to fix it)

Critics have claimed responsive design site performance is slow. In a first-of-its-kind e-retail study, Internet Retailer and Keynote examined 12 retail responsive design sites and found that site load times on smartphones are not only slow - at 18 seconds, they're very slow. But some retailers and mobile commerce vendors have devised new ways to optimize responsive sites that vastly reduce mobile page load times.

Lead Photo

A 1-second delay in web site page load time translates into a 7% loss in conversions, according to research firm Aberdeen Group Inc. So if an e-retailer makes $100,000 a day from its mobile site, a 1-second page delay could mean around $2.5 million in lost sales every year. If that's the case, what does an 18-second page load time mean?

Unless your business model is giving away money, not even a consumer with the patience of Job is going to stick around for 18 seconds to see your wares. In fact, 79% of smartphone users will avoid shopping at sites they consider slow, according to a study by content delivery network Akamai Technologies Inc.

Retailers and experts in e-commerce and m-commerce have long maintained that responsive sites load too slowly. But there has never been an objective measure to test the merit of this complaint. Until now.

It turns out responsive design sites are slow on smartphones, very slow. That's the conclusion that emerges from an Internet Retailer-exclusive, monthlong study of 12 e-retail responsive design sites conducted by web and mobile performance testing, monitoring and analytics firm Keynote.

While the home pages of the 12 sites on average loaded on desktop PCs in 3.15 seconds and on tablets in 2.80 seconds (both on high-speed connections), it took a staggering 18.24 seconds on average for responsive home pages to load on smartphones over a combination of 3G and 4G connections, Keynote finds (see box at the end of this story for methodology). Not only is this unacceptable when it comes to performance (Keynote says optimal page load times on smartphones are 2 to 6 seconds, depending on the Internet connection speed), an 18-second page load time is a gigantic hurdle to converting shoppers on smartphones into buyers.

"Retailers know huge numbers of consumers use smartphones as part of the purchase process, but so many consumers on smartphones delay committing to purchase until they can access a different device," says Ken Harker, the senior consultant at Keynote who led the responsive design site performance test. "If retail web pages on smartphones were snappy and fast with 2-second load times, you would have a lot more people committing to buy right then and there on their smartphones rather than wait until later to complete the purchase on a device that offers far faster performance."

To put the 18.24-second responsive smartphone load time in perspective, on the weekly Internet Retailer-exclusive Keynote Mobile Commerce Performance Index, which measures 28 standalone m-commerce sites designed specifically for smartphones and two responsive sites on smartphones, the average page load time for the week ending May 4 was 11.09 seconds. The standalone m-commerce site of Sears Holdings Corp. had the top speed of 2.29 seconds.

Responsive design is heralded by some as the future of e-commerce and m-commerce site design, but it is still relatively new to e-retail, and the performance issues it causes may trouble online retail executives. But while Internet Retailer's and Keynote's first-of-its-kind study of responsive in retail shows that responsive design is not a reliable solution for serving customers on smartphones, some retailers and vendors are showing there are ways to optimize responsive sites, as well as new responsive approaches that can vastly improve performance on smartphones.

And they're keeping in mind, based on earlier Internet Retailer research on m-commerce sites for smartphones, that consumers want smartphone sites with the features and functions of a desktop site. That means hacking off parts of a site to make it load faster is not the answer. Further, retailers benefit from customers doing much of their shopping on smartphones at home, where they have high-speed Wi-Fi networks that speed up sites with even the most egregious load times on slower connections. But even on super-fast Internet connections like Wi-Fi there remains a significant difference in load time between m-commerce sites (faster) and responsive design sites (slower), which only sets the bar higher for responsive design.

Retailers have yet to discover the winning formula for employing responsive design, says Michael Facemire, a Forrester Research Inc. principal analyst who specializes in mobile and responsive sites and mobile apps.

"It's still early in retail when it comes to learning how to create mobile shopping experiences, regardless of whether it's on a responsive design site, a mobile site or a mobile app," Facemire says. "This is especially the case with responsive design."

For example, the Cascading Style Sheets 3 specification, which is a key component to responsive design, is still relatively new. CSS3 is a markup language that defines web pages and denotes where elements appear on a page. Retailers will be hard-pressed to find experts who are fluent in both CSS3 and JavaScript who can really define how to do responsive, and do it right, Facemire says.

Facemire adds that businesses building responsive sites often take shortcuts to quickly get responsive sites online.

"Mobile is still early in its maturity, yet demand for mobile experiences is incredibly high," he says. "That combination leads retailers to take shortcuts. One shortcut I see often is how fast can we get something to market—and in the process they overlook quality and performance."

Adding six weeks to the development time to be thorough beats delivering fast with a site that takes 18 seconds to load on a smartphone, Facemire says.

comments powered by Disqus



Get a Free Subscription to IR


From The IR Blog


Terri Mock / E-Commerce

How online jewelers fared this Valentine’s Day

The key takeaway: Start early, because sales tail off in the last few days before ...


Cynthia Price / E-Commerce

4 tips for improving email marketing results

Every piece of data you collect can help you serve your audience exactly what they ...