We, as people, optimize almost everything to save time and money. We do that by setting up automatic processes or developing new devices and technologies. But sometimes, it’s not about creating something new – it’s about improving things that already exist.
Today, we would like to talk to you about optimizing customer experience for online shoppers. In particular, we will give you practical tips to help you optimize your WooCommerce website.
If the online shop customers visit loads up very slowly, it means that’s not optimized properly. And it leads to making people do their shopping somewhere else.
And this is where we come in with this article.
What Is WooCommerce Optimization?
The end-goal of optimizing your WooCommerce is higher revenue. And there is more than just one aspect of optimizing WooCommerce stores to make it happen.
To name a few:
- Performance (e.g. load time, response time, server/store availability)
- User Experience (UX), which is about making store users’ experience of using it as good as possible (e.g. well-designed path-to-purchase). And yes, performance affects users’ experience but the UX is a broader concept
- Search Engine Optimization (SEO), which is about generating and optimizing website’s content to make website rank higher in the search results
Today, let’s focus only on your website’s performance.
Why Does It Matter? Benefits of Online Store Optimization
It matters because you can only make a first impression once. And if that impression isn’t good, our chances for the second date will drop dramatically.
The same thing happens when it comes to a fresh, not-yet-stable relationship between visitors and your online store. If they don’t like what you’re offering from the moment they click, the chances for turning them into customers will decrease significantly.
Let’s take a quick look at optimization benefits. We already mentioned some of them, but it’s worth saying twice:
- Higher revenue
- Better website traffic
- Improved conversion rate
- Better Google ranking
- Faster website load time
- Lower overall cost (e.g. lower server costs)
Hello! My name is Sujay and I’m CEO of Astra.
We’re on a mission to help small businesses grow online with affordable software products and the education you need to succeed.
How Lack of Optimization Can Harm Your Business?
Imagine that the newly-built commercial center is being opened. To promote it, it’s owners have already:
- Spent big bucks on TV and radio campaigns
- Invited superstar singer
- Placed billboards all over the city
- Signed contracts with the most popular brands in the world
Sounds like a success recipe, right? But what if…
- The moving stairs don’t work?
- The lighting system constantly turns off?
- The card devices haven’t arrived on time?
- The crowd is so big it’s even hard to move?
Does it encourage people to spend money there? Well, some of them may be attracted by discounts and stay there anyway, but what about the rest?
A similar thing may happen with your online store.
Sure, you can spend big bucks on Facebook and Instagram ads, send free stuff to influencers, produce tons of valuable content for your blog and do a plethora of other things to attract potential customers to your store. But it won’t matter if your store isn’t optimized to accommodate all these people in a proper way.
The Conversion Rate Optimization and Its Importance
First of all, you could ask: what is the conversion rate?
Let’s say that 500 users visited your online store last week and five of them actually bought something. It would mean that the conversion rate is 1%. The goal of the Conversion Rate Optimization (CRO) is to make that number as big as possible.
The CRO is directly linked with the overall WooCommerce store optimization. For example, we can expect a growth of the conversion rate after the load time optimization. If you love numbers, you’ll definitely love these provided by Cloudflare in their blog post about how website performance affects conversion rates.
To sum it up in one sentence: after optimizing your WooCommerce website, you will start earning more money even if the number of website visitors or advertising budget won’t change a bit (they even don’t have to).
Reasons Your WooCommerce Store Isn’t Optimized
Nothing happens without a reason and while it sounds trivial, it’s just plain true. If you’re reading this blog post, the chances are that your online store isn’t performing as you would like it to. You may ask yourself: “What happened with my store? Why is it so slow?”
The answer may be simple. Below you may find it but it’s up for you to decide.
Installed Plugins, Themes and Other Things
Both WordPress and WooCommerce offer a myriad of possibilities but what is a blessing may as well turn into a curse. The amount of plugins, themes, page builders and frameworks is constantly growing, and because of that it’s hard to decide which ones to choose. Unfortunately, that overwhelm often leads us to bad choices.
Using new, unverified plugins, themes, page builders or frameworks is not necessarily the best possible solution. It entails a risk of making our website or online store slower and more vulnerable.
Also, the amount of installed additions matters when it comes to WooCommerce optimization. Sure, we may need other functionalities that aren’t provided with our theme. But every additional plugin may extend the time our browser needs to load the entire website.
So before installing another plugin, ask yourself these questions:
- Is it really necessary to install this plugin?
- Is it the best plugin out there to help me with this?
- Is there any other option to make it work without installing another plugin?
Yet remember more plugins doesn’t necessarily mean a slower website or WooCommerce store. A plugin developed to the WordPress coding standards and well-optimized should have a minimal impact on your site.
We’ve seen websites with in excess of 50 plugins that run faster than those that have four plugins.
What’s the most common reason why some websites are loading so slowly? Images and their weight. It’s never a good idea to upload high-resolution photos without any optimization. Especially in the eCommerce stores where there may be many, many of them.
And let’s not forget about videos, given that they weigh much more than images and their popularity is steadily increasing basically day after day.
Bad Choice of Hosting Provider
Choosing the hosting provider for an online store is like choosing the car engine — it’s about using its full potential instead of accepting the mediocrity. Because neither interior design nor fancy color will make up for poor components under the mask. Just like neither eye-catching layout nor brand-new logo will make up for poor hosting choice.
WooCommerce Website Optimization in Practice
All right, let’s be more practical. Luckily, you mustn’t be a tech-savvy WordPress and WooCommerce user to implement at least some changes. Sometimes all you have to do is to either install and configure some plugins (which we will recommend in a while) or hire someone who will do these optimization things for you.
But before we will deliver what we have just promised, let’s briefly describe elements of WooCommerce optimization.
It’s needless to say that the eCommerce market is highly competitive and every possibility to win over customers should be taken.
One of them is images because most of us buy things with the eyes. And in a contrary to traditional shops, we can’t touch, smell or feel what we see on the shelves. Because of that, the better the images you have in your store, the bigger the chance that customers will buy from you.
But there’s a catch. High-resolution images weigh and they weigh a lot. So what you are looking for here is a balance between image quality and image size. And you can find that balance by using a plugin or by optimizing images yourself.
Let us go one step further: images — even these of the high resolution — aren’t enough nowadays. As we agreed before, the level of competitiveness is getting higher and higher. It’s necessary to do something more than top quality images which can be taken using almost every cell phone.
And that’s when videos enter the stage.
They are not only outstanding additions to any online store but can also be very helpful for its customers. They can do what images can’t, e.g. if we want to show step-by-step how to use a product.
But the problem is — you guessed it! — its negative influence on website’s performance. Especially, if you embed the video above the fold (it’s so-called hero section, visible right after entering a website). Sure, you can host it on YouTube or Vimeo or somewhere else, but it still must be optimized.
In particular, you have three solutions, because you can:
- Remove the videos
- Implement lazy loading and insert a preview image
- Start self-hosting videos
Using Content Delivery Network (CDN)
If you want to sell globally (or even if you don’t), you must be aware that the distance between hosting server and users determines what the load time will be. So if your server is based in Brazil and you have visitors from Europe, they will have to wait longer than visitors from South America.
To solve that issue, you should use the Content Delivery Network (aka CDN). It’s main task is to store copies of your WooCommerce store all around the world, and then redirect visitors to the nearest copy. Thanks to that, the website load time will get shorter.
You should expect to pay for such a service a monthly price. If you are interested in implementing CDN (and you should be!), you can check, e.g. Cloudflare that we already mentioned before or Cloud CDN.
Remember those whiteboards used, for example, for making some calculations? Yes, people still use them! But that’s not the point.
Clearing that whiteboard is like clearing a website’s cache. If you clear the whiteboard, you have to make calculations again. If you clear cache, your browser has to load the entire website again.
And that’s because caching means storing the website so it’s quicker to retrieve it in the future.
But caching is tricky. It’s because caching plugins improve your online store’s performance only if configured properly. For example, caching cart pages or checkout pages would mean that users won’t be able to add products to the cart of pay for their order.
If you want to find out more about caching, take a look at our Ultimate Guide to WordPress Caching.
Resolving Database Issues
Your database will grow together with your store over time, and it will store more and more data: history of purchases, user accounts, product descriptions, etc. If you are just starting out, it won’t be a problem. At least for now.
But after a few months, a year or maybe two, it may start negatively affecting your website’s load time. The solution? Good old cleanup from time to time.
There are two ways to do that: manually (which may take forever and break the entire website in the process) or by installing a plugin (which will make everything so much easier).
Yet remember to backup all your files and database, before using such a plugin (or making any serious changes to your WooCommerce store).
When you are prepared to clean up your database and you don’t want to do that manually, consider using a plugin which will do that dirty work for you. For example, you can choose WP Optimize or WP Sweep, our favourite caching plugin WP Rocket also includes a database optimization option.
We have come a long way already but it’s not enough — let’s focus on your website’s code this time. You can optimize it using different techniques, but for now we want to show you three most popular among them: minification, concatenation and GZIP compression.
But before talking about each one of them, let’s answer one question: what code optimization is? Well, it’s goal is to:
- Make sure that no unnecessary resources are being downloaded
- Minimize download sizes
It can be done through files compression or by deleting data that is no longer necessary.
Sure, it will make the source code much uglier, but it also makes files lighter and won’t affect how your WooCommerce store works or functions.
However, be aware that the code minification does not necessarily mean a much faster site but it depends on the theme you chose and the plugins you are using.
If the code needed to load the entire website is mainly in CSS and JS files then, after the minification, a difference in page load time will be distinctive.
The next thing you can do is concatenation. It basically means combining files of one type (CSS or JS files) into one, large file.
The ultimate way of optimizing code is compressing it, which is possible because nowadays browsers are able to read compressed files. We can take advantage of that by using GZIP compression.
How does it work? It’s about compressing files into zip files and sending them in smaller packages.
Installing and testing plugins is probably the fastest and the easiest way to slow down any WordPress website, but especially those using WooCommerce. Of course, our goal is to make our websites and stores more functional and faster, but it can turn the other way. Fortunately, you can avoid that by applying below rules:
- Keep all plugins you are using updated to the newest version.
- Uninstall all plugins that you are not using anymore.
- Try to keep the number of installed and active plugins as low as possible.
- Always check who developed the plugin and if it’s being regularly updated.
Choosing the Right Theme
If you have thought that choosing the right plugin is difficult, what would you say about choosing the right theme? Well, ThemeForest has over 48,000 WordPress themes and website templates. That’s quite a number, huh?
Unfortunately, many of them are bloated with never-ending lines of code to achieve certain effects. So how can you choose the one that is not only good-looking but also well-coded?
If you already have an online store, you can perform a quick check yourself. After making a backup of your current site, switch your theme to the default theme or, for example, Storefront (which is recommended by WooCommerce itself).
Does your site load faster now? If yes, you have a problem with your theme and you should consider changing it.
If you don’t have an online store yet, scroll down a bit to see recommended themes.
And of course we’d recommend our own theme, Astra which is blazingly fast and is built to make your WooCommerce run like a dream.
Choosing Reliable and Fast Hosting
Everyone wants to spend as little as possible for as much value as possible, especially if you’re just starting out. However, we strongly advise against looking for savings when it comes to choosing the hosting provider.
Sure, at the beginning it won’t make much difference for your website’s performance. But growing web traffic, more and more images, bigger databases and many other things will start slowing your store.
One more tip: if a majority of your visitors and customers live in one country, choose a server located there. And where possible use a CDN to help.
PHP Version of Your Hosting
WordPress is a content management system (CMS) that was built using PHP language. Do you know what your PHP version is? If not, ask your hosting provider or if you haven’t chosen one yet, make sure it allows for PHP 7. It’s the latest version of PHP, which performs 2-3 times much faster than PHP 5.6, it’s predecessor.
For safety purposes, test in on a local environment before upgrading it for good.
Now is the time to keep our promise! Below you will find a list of recommended themes, page builders, plugins, hosting providers and other resources to make your WooCommerce store as optimized and fast as possible.
Free and Premium WordPress Themes and Page Builders
You have a crucial decision to make because no caching plugin (or any other) will make up for choosing a badly coded theme. To save you some time, we made a list of reliable themes you can use.
- WP Astra — it’s a fast, lightweight, easily customizable theme, integrated with popular tools and which contains many pre-built websites to help you accelerate website design and development. And hey, it’s ours!
- Storefront — as we can read on its official website, “WooCommerce Storefront is an intuitive and flexible, free WordPress theme offering deep integration with WooCommerce”. It’s easy to modify, perfectly optimized and can be a perfect base theme for further development
If you need more detailed information, you can always check our blog post about free and premium WooCommerce themes.
And for more advanced WordPress users, we can recommend trying our two favourite page builders that are fully compatible with WP Astra:
- Elementor — its main advantage is that you don’t have to write a single line of code to create a fully functioning website or online store from scratch. You can also make the entire process shorter by using our theme, pre-built Elementor demo sites or any other compatible theme
- Beaver Builder — it’s a more advanced and more demanding page builder than the first one, and while we personally prefer Elementor, BB is worth recommending, too! You can even switch the theme and you won’t lose your content
Now, after choosing the right (or at least it seems so) theme and before choosing the right plugins, it’s a good practice to run some speed tests. It’s helpful for two main reasons:
- You will check the actual state of your website’s performance
- You will learn where there is a room for improvement and if it’s better to change the theme or if it’s enough to use some plugins
There are many websites where you can run such tests, but we would like to recommend three of them:
- PageSpeed Insights by Google — it analyzes a website (both desktop and mobile versions), gives a PageSpeed score and recommends what should be improved. That score is of much importance because, well, it’s Google, and that score affects website’s Google rankings
- GTmetrix — thanks to that tool, you can “see how your site performs, reveal why it’s slow and discover optimization techniques”
- Pingdom Website Speed Test — operating principle is almost the same as above; it’s another tool that identifies areas for improvement but also shows what’s good
It’s up to you which one of them you will choose. What’s important is if you will implement suggestions on your website.
Free and Premium WordPress Plugins
Now, after you found out what you have to improve on your WooCommerce website, you can start choosing the plugins which will help you do that. But be reasonable — it’s not an attempt to beat Guinness’ world record for the biggest number of installed WordPress plugins. And sometimes it’s possible to use just one plugin instead of two.
- Smush Pro (premium) — it’s a plugin created by WPMU DEV that compresses images automatically after they are uploaded to a WordPress media library. Also, you can use it for the images already uploaded and not one by one, but all of them. It also backups original images and optimizes heavy photos (up to 32 MB)
- TINY PNG (free) — it doesn’t offer as many options as other plugins out there, but it works well when it comes to reducing the image size and preserving the image quality at the same time
- WP Super Cache (free) — it’s a plugin created by Automattic (a company behind WordPress and WooCommerce), which is free yet powerful solution that’s constantly being mentioned as one of the best caching plugins out there
- WP Rocket (premium) — it’s a plugin that only offers a premium version and there is no free trial. Nevertheless, it’s our favorite caching plugin, and if your budget allows for purchasing it, don’t think twice.
If you need more detailed information about caching plugins or caching in general, check our ultimate guide to WordPress caching.
- WP Rocket (premium) — if you are looking for all-in-one solution and paying for plugin is not a problem for you, we strongly recommend choosing the WP Rocket plugin. It not only will help with website’s code optimization, but it also works like a caching plugin
- WP Optimize — a free plugins that will help you with cleaning up and optimizing database
- UpdraftPlus — free backup, restore and clone plugin. It’s always a good idea to use it before making any serious changes to WordPress or WooCommerce website
- Lazy Load by WP Rocket — another free plugin. It displays images and embedded iframes only when they are visible to the visitor. Thanks to that the number of HTTP requests is reduced and the website will load faster
There are many hosting providers out there — some of them cheaper, some of them more expensive. But in that case, price shouldn’t be the most important criterion of choice. Always choose quality over few more bucks in your pocket.
All right, but what server should you choose? As always, the WooCommerce team wants to help online store owners. They have selected a few hosts and put them on their website. You can check these recommendations here.
Don’t overthink it and just trust the WooCommerce team. They know what they are doing.
That was one hell of a ride, wasn’t it? It’s a lot of information to process and a lot of optimization tips to implement, but we hope that you found them useful.
You don’t have to (and even you shouldn’t have to) implement all these tips at once. Before taking any action, diagnose your online store by switching theme or using one of the speed tests. It’s a small step but it’s also a good start of a process of optimizing any WooCommerce website.
Let us know in the comments what optimization techniques have you already tried, and if it helped and how much. If you haven’t tried, why is that?