10/16/13

What’s the secret to balancing images with speed in mobile?

The North Face knows, and it’s among the fastest performers on a mobile index.

Bill Siwicki , Managing Editor, Mobile Commerce

Images are crucial to selling on e-commerce and m-commerce sites. But while web shoppers are often accessing e-commerce sites on reliable, high-speed, broadband land lines from home or work, smartphone shoppers are accessing m-commerce sites on unpredictable wireless networks of varying speeds. A web page with dozens of pictures can be speedily loaded on a PC with a broadband connection; but over a wireless network, dozens of images could greatly slow the load time for a mobile page.

Outdoors apparel and gear retailer The North Face uses about two dozen images and icons on its mobile commerce web site home page, yet that page loads in 7.56 seconds, which is far better than the 13.88-second average for the 30 retailers on the Keynote Mobile Commerce Performance Index for the week ending Oct. 13. Weighting and combining the 7.56-second load time with a 99.29% success rate (also known as site availability), The North Face earns an index score of 949 out of 1,000, putting it in fifth place. 7.56 seconds is the retailer’s fastest mobile home page load time since the merchant was added to the index in May 2012.

The secret to The North Face’s success in mobile performance, even with a home page loaded with images and icons, is the retailer’s use of two mobile web design techniques: data URI schemes and minifying, says mobile and web performance management firm Keynote.

Data URI is a scheme of encoding data within a web page that make up page elements such as images or CSS, a mark-up language used to define pages and denote where elements appear on a page. With multiple elements encoded within a page, no extra HTTP server request is made to fetch the embedded elements as opposed to a request for each element. URI stands for universal resource identifier, a string of characters used to identify a web resource such as an image. Minifying involves removing all unnecessary characters from source code without affecting functionality; this reduces the size of a file and thus shaves off time from the total page load time.

“Retailers generally rely on images and icons to showcase their products on the home page and to make site navigation easier for mobile shoppers, and The North Face has done this very well for their mobile home page by using data URL schemes to transport about two dozen images and icons,” says Herman Ng, mobile performance evangelist at Keynote. “Another area The North Face does well is minifying HTML, JavaScript and CSS objects on the home page by eliminating unnecessary bytes, such as extra spaces, line breaks and indentations. These might not seem like much of a big deal, but it definitely helps optimize the experience for mobile shoppers.”

The North Face did not respond to a request for comment.

Toolfetch.com LLC topped the Keynote Mobile Commerce Performance Index for the week ending Oct. 13 with a load time of 3.56 seconds and a success rate of 99.80% for a perfect index score of 1,000. Sears Holdings Corp. came in second with a load time of 5.18 seconds and a success rate of 99.30% for a score of 977. And W.W. Grainger Inc. came in third with a load time of 5.57 seconds and a success rate of 99.59% for a score of 975.

The index average load time was 13.88 seconds, the average success rate was 94.80% and the average score was 845.

The North Face is No. 146 in the newly published 2014 Internet Retailer Mobile 500, Toolfetch.com is No. 352, Sears is No. 30, and Grainger is No. 92.

Click here then click on Keynote Mobile Commerce Performance Index Part 1 and Part 2 to view complete results for all 30 retailers on the index.

Keynote measures 30 representative m-commerce sites exclusively for Internet Retailer. The sites include merchants in multiple categories and channels, and of multiple sizes, ranging from such giants as Amazon.com Inc. to mid-sized retailers like Toolfetch.com LLC. Keynote tests the sites in the index every hour Monday through Sunday from 8:00 a.m. through midnight Eastern time, emulating two different smartphones on two different wireless networks: Apple Inc.’s iPhone 5 on AT&T and the Samsung Galaxy SIII on T-Mobile, both using 4G networks. Keynote runs the tests in New York and San Francisco.

Keynote combines a site’s load time and success rate, equally weighted, into a single score. Given that both performance and availability are important, the score reflects the overall quality of the home page; a higher score indicates better performance. Scores also reflect how close sites are to each other in overall quality. The index average score is the midpoint among all the sites’ scores. To consistently rank high on the Keynote index, sites must hit availability targets of 99.5% or better and be faster than 10 seconds to load on average. Top-performing sites load in under five seconds.

While 4G adoption among U.S. consumers has been steadily rising, only a fraction of all U.S. wireless connections are 4G. Consequently, retailers benchmarking their mobile commerce site performance against the Keynote index should keep in mind that most of their m-commerce site shoppers will experience page load times slower than those on the index.

Topics:

data URI, herman ng, Keynote, m-commerce, m-commerce site, m-commerce site performance, minify, Mobile, mobile commerce, mobile design, performance, The North Face

NEWS CATEGORIES Back to Top...