July 12, 2011, 5:24 PM

The image fairy can speed up mobile sites

A “sprite” reduces the number of web requests for imagery, enhancing site performance.

Lead Photo

The retailer came out on top of this week's index, its home page downloading on average in 6.08 seconds.

A sprite can do magical things. Based on an analysis of this week’s Keynote Mobile Commerce Performance index, one would think a sprite is a trade secret. If so, mobile and web performance management firm Keynote Systems Inc. is letting the cat out of the bag.

A sprite is a web site management tool stemming from Cascading Style Sheets, or CSS, HTML-based templates that define where various objects, such as images or text boxes, appear on a web page. A web designer places multiple images within a sprite so that instead of making multiple web server requests for each image, a device only makes one server request for the sprite, which then passes the images to the style sheets for placement.

Each web server request a device makes to create a mobile web page takes a tiny chunk of time. But those tiny chunks can add up when a retailer has dozens of objects on a page. Add to that the uncertainty of wireless network latency—the period it takes an object to travel from a server to a web page—and the sum can be slow page loads. That’s why sprites can be so useful.

But of the 30 retailers on the Keynote Mobile Commerce Performance Index, only four are using sprites—Best Buy Co., Foot Locker Inc., Toys ‘R’ Us Inc. and Walmart.com, Keynote Systems says. “There is certainly great room for further optimization in this area,” concludes Herman Ng, mobile performance evangelist at Keynote.

Especially in retail, where images abound. Keynote Systems analyzed the home page content of all 30 retailers’ m-commerce sites and found that, on average, 8.7% of a page is HTML, 7.7% is CSS, 12.6% is JavaScript and a whopping 71% is images. “The higher the number of objects on a page, the higher the latency, which means slower page load times,” Ng says. “To lessen the impact of latency, retailers can use CSS sprites.”

While the top two performers for the week ending July 10 do not use sprites, they do keep the number of page objects to a minimum. Walgreen Co. earned the No. 1 position with an average m-commerce site home page download time of 6.08 seconds, downloading successfully 99.54% of the time. It earned an index score of 949 out of 1,000. Dell came in second with an average load time of 4.93 seconds and a success rate of 99.00%, for a score of 918.

The average download time for all 30 retailers was 9.26 seconds, the success rate was 98.68%, and the score was 679.

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

Keynote Systems measures 30 representative m-commerce sites exclusively for Internet Retailer. The sites include merchants in various categories and channels, and of various sizes, ranging from such giants as Amazon.com Inc., Sears Holdings Corp. and 1-800-Flowers.com Inc., to midsized retailers like Sunglass Hut, Toolfetch.com LLC and Your Electronic Warehouse. Keynote tests the sites in the index every hour Monday through Friday from 8 a.m. through midnight Eastern time, emulating four different smartphones on four different wireless networks: Apple Inc.’s iPhone 4 on AT&T, the HTC Evo on Sprint, the BlackBerry Curve on T-Mobile and the Droid X on Verizon. The HTC Evo and the Droid X run Google Inc.’s Android operating system.

Keynote combines a site’s load time and success rate, equally weighted, into a single score. Given 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.

comments powered by Disqus




From The IR Blog


Philip Masiello / E-Commerce

5 essential e-commerce tools for consumer research

Online retailers have many ways of learning about what consumers want and how they shop, ...


Andrew Ruegger / E-Commerce

How online search data can improve offline retail results

Search data represents the largest, unbiased free source of consumer data in the world.