eCommerce website optimization: A quick technical summary for IT experts

In eCommerce, website performance can be the difference between converting and losing a potential loyal customer. Our Adobe Commerce Practice Lead will give you a quick summary of what you should be focusing on.

Agustín Farias
Adobe Commerce Practice Lead
January 5, 2022

Increasing your e-commerce website performance is about offering your customers an outstanding user experience. 

For this, there are three pillars you should focus on:

  • Ensuring customers perceive your website loads and respond to their interactions fast enough.
  • Avoid adding friction with your UI design decisions.
  • Showing you care about your customers individually by providing them a personalized shopping experience.

Improve your website load speed to increase conversion rate and traffic

Web users expect a website to load in 3 seconds or less. Yet, the average load time for an e-commerce website is around 9 seconds. A slow website will make your users leave and direct them towards the competition.

You can even quantify the lost opportunity of a slow website: for every second your customers wait for your website to load, conversions can fall by up to 20%. 

You can calculate how performance improvements could impact your business revenue here. In addition, faster loading leads to a better ranking in Google search results.

There are many things your development team can do in terms of website optimization, but first things first: you cannot improve what you cannot measure. So let’s start with some telemetry.

Leverage telemetry on your e-commerce website

Telemetry is recording metrics of your website usage and performance. For instance, how long it takes for your users to load a particular web page of your storefront or how many Javascript errors you have. 

Some excellent tools enable you to measure your web application through part of or the entire stack. Some options are New Relic, Blackfire, Bugsnag, and Raygun.

Other tools can help you understand your website’s performance while developing it. However, while helpful, they do not reflect your actual users’ experience. So having a real-time telemetry tool is not optional if you want to get serious results.

What to measure?

There is no doubt you should go for the core web vitals on the front-end side. Not only because Google includes them in its search results ranking algorithm, but also because they reflect how your users perceive your e-commerce website performance. You can use New Relic to measure them.

It is also wise to closely watch how many Javascript errors your users face while navigating your website. I know this is not performance-oriented advice, but it uncovers some of your users’ pain points. You want to solve them definitively.

Eliminating your back-end bottlenecks is beneficial not only for UX but also for your infrastructure efficiency. It contributes to your application meeting the same performance metrics using fewer resources. It can even prevent your website from crashing during peak season sales (I have witnessed cases like that in my career).

The general advice is to look for heavy SQL queries taking too much time or memory, or redundant or time-consuming function calls. As a reference, aim for a response time below 200 milliseconds across your URLs.

We could discuss several pieces of advice specific to Adobe Commerce's (Magento) back-end performance, but all of them are present in the dev docs, and it’s not necessary to get too technical.

The only thing I would point out is that your development team should make good use of cache functionality. The Adobe Commerce cache prevents your store from processing the entire web pages your user visits. As a result, it speeds your website up a lot.

Unfortunately, there are many examples of invalidating entire cache pages because of naïve theme implementations. A good telemetry solution helps you spot and fix that immediately.

Reduce the friction in your users’ experience

A study conducted by Baymard reveals that checkout design improvement could lead up to a 35.26% increase in conversion rate. In addition, a study by Google suggests that  77% of mobile shoppers are more likely to purchase in your web store - instead of your competitors’ - if you offer ways to make purchases quickly.

The first step is to understand where your conversion funnel bottlenecks. As with any troubleshooting activity, data is the key to this. Are you successfully tracking how your users interact with your website? When are your customers leaving your website? Where are they struggling?

There is no one-size-fits-all method to detect the actual problems causing your customers to leave, but they may fit into one of these three categories:
  • External factors: If the customers abandoning your website come from the same source, maybe the problem is not in your website. Perhaps an outdated ad still running is driving users to your website, and later they find out the ad message is wrong. You should check for inaccurate ads, poorly segmented campaigns, or SEO issues, to name a few.
  • Technical issues: Problems your website faces, like a broken layout under specific viewports, Javascript bugs, or a slow webpage. Try to identify if your leaving customers are using a similar device or your telemetry tools report bugs or performance issues in the sections causing drop-off.
  • Design issues: Those are harder to detect. Spotting them takes research, tooling, and experimenting.

Let’s focus on this last category. How do you find the issues impacting your conversion rate? Again, there is not a unique answer for this. Trust your data, take surveys, use tools like Hotjar, or integrate Mouseflow or Clicktale with Adobe Analytics to gather your website heatmap or watch session replays. Try not to make biased assumptions from the data you collect.

It’s also worth running your website against a well-known UI best practices checklist. For example, make sure your website has guest checkout options and that its forms have less than 8 fields – including the checkout ones.

Once you identify some opportunities for improvement, you should validate them. One would be tempted to implement them and watch your performance metrics move, but that would not lead to valid conclusions in some cases. Many variables affect your e-commerce website simultaneously, like web server performance or traffic cohorts.  Therefore, you cannot guarantee that you will be comparing apples to apples while making conclusions about how your changes affect your website's conversion rate.

The best approach to validating a UI change is performing an A/B test. As you might probably know, A/B tests consist of running two versions of certain content on your website. An important point is making sure the users are distributed randomly across the two versions to eliminate bias. After you have enough data to compare, you can stop the experiment and keep the best-performing version.

A/B tests are suited to make good decisions on whether the proposed changes improve the user experience and help you understand your users better. Take each experiment result further and discover why they didn’t work – or why they did. Learning about your audiences is a substantial gain, besides your experiment result.

Delight your customers with personalized shoppable experiences

A significant component of user experience is personalization. 40% of your customers will spend more time than planned if your website offers personalized content. That unlocks myriads of opportunities for you to make your customers engage with your brand.

The good news is that Adobe Commerce comes with many personalization features out of the box. For example, you can leverage Sensei integration to give your users 1:1 AI-powered personalized suggestions or search results.

You may also start with less sophisticated – yet effective – solutions like related or cross-sell products or other segment-level personalization. Doing so enables you to test the waters without a significant upfront investment.

The best approach is to start small: run basic personalization experiments, draw your conclusions, learn about them, and iterate.

Personalization does not have to be invasive or scary. For example, you can ask your customers for information. Doing this boosts customer engagement, according to a  study. In addition, another study revealed that 90% of users would share their behavioral data if that means their shopping experience would be easier or cheaper.  

Just put yourself in your customers’ shoes. Imagine you purchased a t-shirt on a fashion website, and it fitted you perfectly. Next time you navigate the website, wouldn’t it be great if it could learn about your previous purchase and show you only the clothes that fit you?

Conclusion

Making the most out of your e-commerce website requires an analytical approach, a serious investment in tools, and adherence to best practices. But, on the other hand, each business has its particularities, and maybe what is most suited for a particular industry is not a good fit in another one.

If there is one generally applicable advice, it would be to prioritize your optimization efforts based on their potential impact, how confident you are about them - based on research, not just gut feelings - and how hard they are to execute.

What were the main challenges you faced while optimizing your e-commerce websites? We’d love to hear your comments on this article.

CAse studies

Latest Articles