Ecommerce: How an online retailer achieved a 17% conversion lift with faster page loading

SUMMARY: Marketers focus on the content of a page and let developers worry about the load time. Does it matter if the customer has to wait another two seconds to see a page?

The answer in this case study is "yes." This ecommerce team increased conversion rates nearly 17% sitewide by reordering when content displayed on its pages. Find out why your social sharing buttons might be costing you sales.

by Adam Sutton, Senior Reporter

CHALLENGE

The user experience of an ecommerce site can have a big impact on sales. The team at Yankee Retail, owner of the Home Decorating Company ecommerce site, saw a clear connection between customer experience and revenue.

"The better the user experience a customer has, the more likely they are to purchase and therefore, the more likely we are to increase conversion rates," said Justin Potts, CEO, Yankee Retail.

Although somewhat subjective, user experience can be improved in clear, concrete ways. Yankee Retail focused on one factor: speed.

"We didn't necessarily think we had a problem, but we knew that our site could be faster," Potts said.

CAMPAIGN

Yankee Retail set out to improve page load times on its luxury home goods site, Home Decorating Company. The team hoped that prioritizing the most important content on each page would increase conversion rates.

Step #1. Partner with a developer

Potts approached the project with a marketing mindset. He wanted the site to load faster, but the ultimate goal was to increase conversions. The marketing team needed development resources to reach that goal.

Since most marketers are not familiar with Web design, it's important to have a good developer. This person should have solid experience with site design and have improved page load times in the past, according to Potts.

Step #2. Benchmark performance

The next step in improving site load speeds is to gather performance metrics for your site so you can compare them before and after the project. You will want metrics for each page as well as sitewide averages.

You will need two groups of benchmarks:

Marketing benchmarks

These include bounce rate, page views, time on site, conversion rate and average order value. (Note: conversion is defined as a completed purchase.)

Technical benchmarks

Start render time — the time it takes for the first item to display on the page.

Load time — the time it takes for the page to fully load.

Time to interact — the time it takes for the primary interactive content of the page to load. For example, the "add to cart" button of a product page would be considered primary interactive content.

Many free tools are available to test your webpages. For example, WebPagetest.org has a free browser-based tool that provides a wealth of information about any page. The results include a "waterfall" diagram that lists the time and order in which each element loaded on the page.

Step #3. Prioritize page content

An ecommerce page can have dozens of elements. For example, Home Decorating Company's homepage has:

Images

An image slideshow, or "slider"

A search tool

Social media buttons

Text

Menus

Links

These elements do not load all at once. They load sequentially, from top to bottom, based on their position in the page's HTML code. An element that takes a long time to load will delay everything that follows it.

Yankee Retail thought changing the order in which elements loaded on a page could increase conversion rates. By displaying the most important content first, pages would give users what they wanted faster and make them more likely to convert.

Below are the factors the team weighed to determine when each page element should load:

Important vs. unimportant

Page elements that were assumed to assist user conversion were given priority over less-important elements.

For example:

Product pages — The team considered the product's name and description to be more important on a product page than social sharing buttons. As a result, the buttons were set to load later.

Homepage — Following similar logic, the team set product-related information to load on the homepage before the chat tool and safe-shopping verification widget.

"Regardless of how much we faster we could make a page load, we chose the key pieces of information for a customer that should load first," Potts said.

Slow vs. fast

Some page elements load faster than others. The team wanted slower elements to load only after the important information had displayed.

This meant that many of the site's dynamic elements, such as its chat tool and social sharing buttons, were set to load after important static elements, such as the site's phone number. Large static elements, such as high-quality images, were also set to load later.

Slow vs. even faster

The team designed some static elements of the pages to save to each visitor's browser cache on arrival. This helped ensure faster load times when visitors returned to a page (as long as they had caching enabled).

To further speed load times, Yankee Retail started using a content delivery network. This allowed the team to detect a visitor's location and automatically send a page's static content from the closest server on the network.

Step #4. Test and maintain performance

With so many changes made across the website, Yankee Retail did a thorough performance check. The team reviewed the content on each page to ensure it displayed and operated as expected.

Once the team completed the review, they tested the site's performance again to see how it compared to before the project began. The results looked great. The team intends to keep them that way.

"As we continually add and integrate new functionality to the site, we need to make sure that it is working and loading properly in the system, which we do," Potts said.

RESULTS

"Right away, the site was loading faster," Potts said. "That was having an impact on stickiness and bounce rate, and that in turn was having an impact on conversions."

The team was also surprised to see an improvement in the site's average order value. Here are results for the first two months after the project compared to the two months before:

Marketing metrics:

Conversion rate: 16.7% increase

Order value: 4.7% increase

Page views: 8.5% increase

Time on site: 8.4% increase

Bounce rate: 5.8% decrease

Technical metrics:

Start render time: 18% faster

Load time: 42% faster

Time to interact: 43% faster

"We didn't want a faster site just for the sake of a faster site," Potts said. "We all have organizational objectives, whether that's increased revenue, increased profitability, reduced expenses or whatever that may be. This is just one tool in a business owner's bag to achieve those."