How Grainger packs a lot into a little space on its mobile site

B2B giant W.W. Grainger uses two coding methods that allow for plenty of functionality with high site availability and fast page loads.

Abby Callard

The mobile commerce site home page of W. W. Grainger Inc., No. 92 in the Internet Retailer Mobile 500, does not scrimp on features.

“Looking at the Grainger mobile site it is hard to believe that the home page weighs less than 100 kilobytes,” says Krishna Reddy, web performance evangelist at Keynote. “The site has excellent functionality and user interface. It has all the traditional menu options, product images and banners, along with Search and Login buttons.”

Combine the low page weight with a high success rate (also known as site availability) and you have a top five mobile commerce site in terms of performance, according to Keynote. For the week ending July 20, Grainger’s mobile site was No. 4 on the Internet Retailer-exclusive Keynote Mobile Commerce Performance Index. Grainger’s mobile home page loads in 4.03 seconds and has a page weight of 83 kilobytes—well under Keynote’s recommendation of 100 kilobytes.

One way Grainger, a B2B retailer of maintenance, repair and other products for businesses, keeps the page weight low is by using a coding method called Data Uniform Resource Identifier (Data URI), which groups elements and codes them directly into the HTML or CSS file. This way, the web browser only makes one server request for the HTML or CSS file rather than multiple server requests for all the individual files, which slows mobile page loads.

Another way Grainger manages to cram in functionality while using few page objects is by using image sprites, Reddy says. With image sprites, Grainger combines all the icons for the home page—the menu icons and also the Grainger logo—in one file, a sprite, that consequently requires just one server request rather than numerous requests.

“Grainger has been consistently in the top five for over two months now,” Reddy says. “If Grainger works towards improving its already excellent availability then it has a great chance of making it to the top spot.”

Grainger did not respond to a request to comment on its mobile site performance.

To see complete results (including response time, site availability, page weight in kilobytes, total page elements, and index score) for all 30 retailers on the Keynote Mobile Commerce Performance Index, click here.

Keynote measures, exclusively for Internet Retailer, 28 standalone m-commerce sites optimized for smartphones and two responsive design sites, which are single sites that render content in ways that fit the screen size of a device, including desktop PCs, tablets, smartphones and smart TVs. For the index, Keynote measures the smartphone versions of the responsive sites.

The 30 representative 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 EDT, emulating the Apple iPhone 5 smartphone on two wireless networks: AT&T and Sprint, both using 3G, 4G and 4G LTE networks. Keynote runs the tests in Dallas, 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.

Today, 20% of U.S. Internet-enabled mobile phone users have 4G or 4G LTE wireless data connections, 71% have 3G, and 9% have 2G, according to research firm Informa Telecoms & Media. And according to research and consulting firm Deloitte, 63% of U.S. smartphone users most often connect to the web on their devices on a Wi-Fi network.


data URI, image sprites, Keynote, m-commerce, mobile commerce, mobile site performance, W.W. Grainger