November 1, 2011, 12:00 AM

Sponsored Supplement - November 2011: Designed for speed

Shoppers want web and mobile sites to load fast. Retailers can significantly improve site performance by adhering to some fundamental design principles.

Lead Photo

Speed matters in Internet and mobile retailing. Shoppers are becoming accustomed to the way top information, entertainment and retailing sites respond quickly to their every command. If they get to a retail site and have to wait, chances are they won't wait long. Thus, excellent site performance is a big competitive advantage for retailers.

"Site performance has to be treated like a feature of the web site that must be constantly measured and discussed at staff meetings so it can be properly optimized," says Patrick Moran, vice president of marketing for New Relic Inc., provider of application performance management services. "Most retail sites take twice as long to load than consumers expect, and that can be a problem, because if consumers don't feel good about a site's responsiveness they know they are one click away from going to another site."

Page weight, the total number of bytes that a browser must download to see all the elements on an e-commerce site, is the most frequently cited culprit for poor site performance. That's particularly true at a time when retail sites are made increasingly complex by such features as video, image zoom, customer review and the Facebook Like button. The more content there is, the longer it will take for the browser to download that content from the site's server.

But there are ways to pack a site with rich content and still make the site load quickly. One way is by paying attention to the code and page tags that instruct the consumer's web browser to contact the web servers to retrieve specific content.

"The proliferation of page tags are like barnacles on a boat, they create a drag on performance by reducing the streamlined effects of the underlying page," says Eric Hansen, CEO of SiteSpect, provider of non-intrusive multivariate testing and behavioral targeting technology. "Optimizing site performance is about identifying which tags and page elements add the most latency and then reordering or selectively removing them without negatively impacting the user experience."

First things first

Another technique has to do with how a retailer's site handles JavaScript, the programming language used in many dynamic Internet applications. Typically, site designers will create a separate JavaScript code string for each piece of content on a web page. One way to streamline the number of requests for content between a browser and server is to bundle JavaScripts into as few files as possible.

Partitioning JavaScripts into two files, one containing the minimum code needed to render the page at the start of the download process and a second file containing code that is not needed until the page is fully loaded, can speed page downloads by serving up content the shopper needs to get started first. The same technique can be applied to Cascading Style Sheets, the language used to control how content is displayed on a web site, such as which fonts are used, text size and indentation.

"Code bundling is being looked at more frequently as page complexity increases," says New Relic's Moran. "The idea is to insert one piece of JavaScript on the page, which calls up a single file that sits on the server, instead of hundreds of lines of code in line with the rest of the site's HTML. Combining codes whenever possible means fewer calls to the server as the page downloads, and fewer calls to the server reduce the chances of the page downloading being halted midstream by a complex content request."

Perception versus reality

An alternative to code bundling is to reorder the programming codes so that all the content above the fold—that is, the content the shopper does not have to scroll down to read—loads first and within three seconds, the length of time most consumers will wait for a page to load. Meanwhile, content below the fold loads last. The technique creates the perception of higher performance even though it may take the entire page six seconds or more to load.

"Perceived speed is a huge factor, especially when it comes to complex pages that take longer to fully download and render," Hansen says. "The goal is to reorder programming code to get the shopper to where they can interact with the page quickly and the page appears fully rendered, while the rest of the page downloads."

Wherever possible, retailers should also consider placing Cascading Style Sheet references, which define how text and images should be rendered, at the top of the page and JavaScript references at the bottom. "A lot of times JavaScript files are placed at the top or in the middle of the page, but each time the browser requests a JavaScript file, it temporarily halts page download," Hansen says. "If the JavaScript blocks the rendering on the page, the consumer winds up viewing a half-baked page for a while."

SiteSpect's optimization platform enables web and mobile marketers to perform non-intrusive multivariate A/B testing and improve key metrics such as conversion and page load times.

Mobile performance

With more and more consumers accessing the web through mobile devices—New Relic says up to 30% of its clients' traffic comes from mobile phones and tablets—web performance is more important than ever. Creating a high-performance mobile web site means building mobile sites that replicate the retailer's brand image on its e-commerce site, but eliminate unnecessary bulk that can affect performance.

"Simplicity reigns supreme in the mobile world," Moran says. "To ensure optimal performance of a mobile site, every page should pull less content and images than the e-commerce site so the mobile browser has less material to render. Mobile users represent a significant chunk of traffic to retailer sites, which means retailers cannot afford a performance issue in this channel."

The first step in creating a high-performance mobile site is designing it to the capabilities of the various mobile devices in the market. While mobile phone technology is advancing at a dizzying pace, not all consumers are keeping up. Many still have feature phones that are based on older WML rendering engines as opposed to HTML rendering engines. Those phones provide limited web browsing, and not the more computer-like experience of modern smartphones such as the iPhone and Android devices.

comments powered by Disqus




From The IR Blog


Anna Johansson / E-Commerce

Why is social proof big for niche brands?

A small online retailer that lacks brand recognition can get a big boost from high ...


Donn Davis / E-Commerce

Technology takeover: The fashion industry is next

We are now entering the third decade of the Amazon effect, and it is just ...

Research Guides