by Adam Sutton
, Senior Reporter
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.
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:
These include bounce rate, page views, time on site, conversion rate and average order value. (Note: conversion is defined as a completed purchase.)
- 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
- An image slideshow, or "slider"
- A search tool
- Social media buttons
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.
- 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.
"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:
- 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
- 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."
- Waterfall diagram example
- Product page
- Page load sequence example
SourcesHome Decorating CompanyYottaa
— Managed and executed the effort for Yankee Retail
Related ResourcesMarketing Research Chart: Measuring website optimization ROIB2C Web Optimization: 23% lift in conversions by optimizing step one of funnelEcommerce: 3 test ideas to optimize the customer shopping experienceEcommerce Marketing: 5 takeaways from ROI Revolution Retail Traffic Summit