Milliseconds for money

Photo by CardMapr.nl on Unsplash.

The correlation between performance and conversions for ecommerce sites

Over the years, there has been a multitude of articles written by various experts about the impact of site performance on conversion rates. Here are a few, if you’d like to do your own research: Google, Neil Patel, Unbounce, Google again.

The TL;DR version is: the longer your page load time, the lower the conversion percentage. This holds true across all types of websites but none more-so than ecommerce sites. This article won’t attempt to add any new flavor to that discussion. It’s been proven and proven again until it is now accepted cannon. Instead, the intention of this article is to identify a few common – as well as some uncommon – approaches you can use to squeeze some additional performance out of your site.

Some of you may already be asking “How long will users wait for the page to load?” The general consensus is three seconds, at a maximum. Even that comes at a cost of losing up to half of your potential conversions due to abandonment. Unfortunately, the average ecommerce page load time is well above the three-second mark. The page load time problem is even worse when users are browsing on their cellular networks. According to Ericsson’s findings, the biological stress responses of waiting on an unresponsive website is similar to watching a horror movie. It is safe to say that is not the User Experience any site is going for.

Now that everyone is sufficiently scared, let’s take a look at some common – and relatively easy – places to optimize your site performance.

Website performance best practices

One could reasonably assume if you are reading an agency blog about ecommerce site performance, you’ve likely got the basics covered and are looking for a little more thought leadership, which we will get to. But just in case, I want to cover the most common places for ecommerce site performance gains that should be addressed first.

This subject has also been covered ad nauseum, so I’ll just provide some resources for any interested parties to dig into: image sizing & compression, JS & CSS minification, enabling HTTP/2, and GZIP compression.

I’ll give you a moment to get your development team to implement these items, if needed. Done? Awesome, let’s move on.

Less common ideas for site-speed performance gains

Now that your site is optimized for common performance hindrances, let’s take a look at three less-talked-about areas where we can steal some milliseconds for your users (and make more sales).

Reduce and optimize database queries

I’m sure everyone has heard stories about how what started out as a small store or single product grew in demand, completely changing the demand space for the product. In these types of scenarios – whether the growth is gradual or rapid – oftentimes the underlying technology does not always grow with the business. The out-of-the-box solution that was perfectly acceptable as a solution at the onset of the business can quickly become a sales hindrance. One place this often shows up is query optimization.

We have all seen the sections while online shopping that are “related products” or “others also bought.” In most scenarios, those products require additional database queries to be delivered to the end user. This is great UX for their shopping experience and certainly provides additional sales opportunities. However, as your online store matures, there may be a better way to provide this type of content to your users. The downside cost of these additional opportunities is they typically require additional database queries to be served to the end user.

These additional queries could negatively affect site performance. But that doesn’t mean we need to remove those sections. Depending on your level of control within your platform, along with the database’s structure, there may be opportunities to directly associate related products to the original product. Or you could potentially combine what is being executed as multiple queries into a single query using join statements.

One of the most common situations in which this could happen is when your site is using third-party plugins (think Wordpress + WooCommerce). Inherently these plugins are designed to be added to and removed from an existing site at any time. Typically, this means they must not alter the configuration of the underlying core code or database that powers the site as a whole. While this is a great approach to get your store up and running, it’s certainly a rug to look under for performance gains once the store is more mature.

Optimize your frontend frameworks

Frameworks such as Bootstrap, Foundation, Vue 2, etc., provide many advantages to get a website up and running. However, oftentimes they contain code utilized on the site. The most popular framework is Bootstrap. It’s a very robust framework that is easy to get started with by including its CDN link. The problem with that is it likely contains a multitude of things that are not used on your site. Here is the current list of components included with Bootstrap 5: Accordion, Alerts, Badge, Breadcrumb, Buttons, Button Group, Card, Carousel, Close Button, Collapse, Dropdowns, List Group, Modal, Navs & Tabs, Navbar, Offcanvas, Pagination, Popovers, Progress, Scrollspy, Spinners, Toasts, Tooltips.

Does your website contain every single one of those? If not, you need to be removing the code that powers them. This sounds very easy, but in reality it is not always so simple. There are online tools such as PurifyCSS or Unused CSS. Perfect, what could go wrong? Quite a lot, actually. CSS Tricks has an article containing a screenshot of what happens when it ran its site through an online tool. Spoiler alert: it wasn’t great. If any of these tools remove the wrong code, you may inadvertently break your site. Maybe even your checkout process.

Another common option is to utilize a build tool, such as PurgeCSS. (This is how we do it at Doe-Anderson.) However, even this approach has a couple drawbacks. One, you have to be utilizing a build pipeline to utilize PurgeCSS. Two, it requires configuration and testing to ensure it is working as expected. This configuration can grow more complex as you add additional tooling to your site. Want to switch out your icon set? You will need to ensure PurgeCSS is not removing code you will need. Three, it can lead to not being intentional with your CSS code. While this additional tooling can remove some of the burden from your developers, they cannot become too reliant on it. A combination of human skill and proper tooling is required to create the most optimized ecommerce site.

Tailor your solution to your audience

As pointed out in our previous blog post, Browsers are bad for browsing, an over optimization for conversation can make the shopping experience very sterile for your customers. We do not want that. It may sound odd coming from an advertising agency, but sometimes there can be too many creative assets on a page. That eighth image on your product slider can be dropped. Perhaps that third product video is better left on the cutting room floor. Or maybe that product slider should not exist at all. All these things are subjective though. The constant for your site should be a strong branding presence that does not negatively affect your conversions.

How do you cut through the subjectivity and get to some raw data you can use to confidently make decisions? One strategy would be to run A/B tests to see how your audience responds to removing some of the graphical assets on the page. The benefit of an A/B test is you can test (crazy?) ideas without having to fully commit to them. You can choose what percentage of your site visitors get the variant. Then you study the data to determine what type of effect it had. If it’s good, you can keep the change. Or maybe just expose it to a larger percentage of your customer base. Or maybe push the test even farther. This is another scenario in which giving a specific answer is not positive because every customer base is different.

Hopefully these tips have given you some new locations to focus on for site speed optimization for your ecommerce site. If you follow these strategies, you can save your users some milliseconds. We don’t want them feeling like they are wasting precious time right before they decide if they want to purchase your product.

Interested in learning more about how ecommerce site speed may apply to your brand? Our development and strategy teams are here to help. Get in touch!