Hire Magento 2 developers (up to 5 years exp, Magento 2 experience since beta release) Contact us now!

Featured

How Loading Time Affects Conversion Rate – Staples case study

main-qimg-a3d364fbf6b7bd98f998ca6986678d28

Autumn and winter are the busiest seasons for online retailers as there are many holidays during this period of time. Merchants often provide many promotions, discounts in order to increase their conversion rate within holiday season.

However, they often forget that things like page speed load can decrease their bounce rate and increase incomes.

There are many case studies and researches on this topic, but we would like to show you the most recent one from one of the biggest web stores, powered by world’s leading e-commerce platform.

In this article, we will focus on the process as it is important to understand who are the key players in it, which departments of your company should be involved and how to make it efficient and result oriented.

Staples is one of the Fortune 500’s largest office supplies retailers. Staple’s retail network has more than 2000 stores in 26 countries. Based on its turnover their store is one of the largest e-commerce stores in the USA.

According to the latest Internet Retailer’s report Staple’s online store is powered by Magento platform.

100716_leadingvendors_page14

Staple’s e-commerce department is constantly improving the UX and the page speed load time of the store as it directly influences their conversion rates.

By the time when the company decided to pay more attention to speeding up their e-commerce store it was already obvious that decreasing the page speed load will lower the bounce rate.

571914756dbb40d28b180dee85963d06

 

To improve the speed of Staples.com the company has formed a team of representatives from different departments:

  • Management: the representatives from management department were responsible for determining which functionality should be present from the user’s perspective.
  • IT: IT department engineers were responsible for choosing the ways of implementation of new functionality.
  • Marketing: marketing department was in head of the design process and content implementation.
  • Merchandising: merchandising department employees were setting up the process of visual displaying of the products.
  • Analytics: this department was collecting all of the data based on the results and accumulating it in the final reports .

The company also set the regular meetings for this project: each week the team gathered up to discuss 1-2 functions of the store and the process of its implementation. Product owner was in charge of reporting on the progress.

Setting the KPI’s.

One of the most important decisions was to consider whether the target KPI full load time (FPL – Full Page Load) or to focus on improving time to the user’s ability to interact with the page (Time To Interact).

The team eventually decided to focus on the full load time, as it is more specific indicator. While the indicator “time to interact” is harder to measure and could be interpreted in different ways.

Banners on the web-site.

There were a lot of banners, and in many cases, they were too “heavy”. Also, image optimization parameters were selected randomly by different designers.

1fc29f651989440e8b8af4e81d9f1dd5

Similar images or different versions of the same banner could vary in size: 25 KB for some, and  250 KB for the others.

The team optimized the existing banners and implemented a process of creating a banner, to avoid such problems in the future.

A/B testing

One more interesting finding of the team was that the practice of A / B testing inside the company was ineffective. Two different tools of A / B testing (which were adding scripts to the site with the external calls) were used.

The team chose only one of A/B testing tools and implemented the event of ending scenario to make sure that the pages testing was over. Once the scenario is over the script deletes itself from the page.

3rd party services requests

It was necessary to optimize the amount of references to third-party services: analytical services, advertising systems, advice services and review buttons / social network widgets.

Some of them were removed. They also admitted that this part could be still improved in the future.

21f4803c7a434cd0a4d8c184ad9ccf5e

Number of Database requests

Some of the pages on the web-site made 200 requests to the database. The team has optimized them up to 10 per page.

JavaScript

Script code on the site has been substantially refactored, its size reduced by 48%, and in the lines of code – by 52%.

CSS

Styles on the site were also optimized. Their size has been reduced by 83%, and in lines – by 88%.

Key takeaways from the optimization

1. Result-oriented focus

From the very beginning the team worked, based on the sprints (according to the Scrum methodology). However, they couldn’t see any improvements.

The Scrum methodology didn’t feel like the right way of development as it was focused on making local changes, but it didn’t affect the overall long-term goals. The management team decided to focus on the results delivery and tried to implement as many global features as they could within each release.

2. Focus on each page performance

The team realized that in order to achieve significant results, it is necessary to focus on specific pages that are visited by the majority of users – the home page, product page, search, login, shopping cart.

Results

  • The home page loading time was decreased by 1 second.
  • Page loading time reduced for 98% of users. For ones with the slowest internet, it reduced by up to 6 seconds.
  • Overall conversion rate of the store increased by 10%.

 

Pavlo Okhrem
Article by Pavlo Okhrem

CEO/Co-founder at eLogic Commerce. E-commerce expert. International conferences speaker.