I’m guessing that you are reading this because your WooCommerce store slow and want to make it faster?
Awesome, because one of the great points about WooCommerce (and WordPress in general!), is that you have the ability to make your site load faster and in the post I am going to show you exactly how you can do it.
EcommerceGold is reader supported, meaning that we may earn a commission (at no additional cost to you) from products or services purchased through links on our site. Learn More.
1. Get a Performance Benchmark
There is no point making any changes to your site unless you know how your website is performing as it is currently.
This is really easy to do as there are some great free tools online that can help you do this and what is really good is that they tell you what is causing your sites issues so that you can address them. Here are my three go to tools:
- Google PageSpeed Insights – you want to rank in google right? So you want to use their PageSpeed tool to see how they rate your sites performance.
- GTMetrix – a great free tool but if you want access to their global servers, then you will need to create a free account. Their waterfall is a fantastic analytic software that shows you exactly where your site is slow.
- Pingdom Speed Test – with Pingdom, you get access to all of their global servers without having to create an account. This tool gives you a detailed breakdown of what is causing performance issues on your site. This is also the tool I use when testing performance for my ecommerce reviews.
- Uptrends – Uptrends is similar to Pingdom but their tool also allows you to test using a variety of desktop and mobile devices from around the world, definitely worth checking it out.
It is always best to mix PageSpeed Insights with one or more of the other testing tools as both Pingdom and Uptrends will give you load times, which is something that is not completely accessible in PSI.
It is also worth noting here how well your site performs with Google’s Core Web Vitals as these are now being introduced as ranking factors for their algorithm, so make sure you pay attention to these when making changes to your site.
When you are making changes to your site, it is worth re-checking your performance after any major changes to if it has improved your performance or not. This is because every site is different and what works for one, won’t necessarily work for another, it is very much trial and error and why it is always best practice to create a staging site, so that you can test any changes before putting them on your live site.
2. Use A Good Web Host
This one is hugely important because if you aren’t using a good web host, then the other changes you can make to your site won’t have such a big impact.
Think of your hosting as the engine in your car, if you use a bad engine, it doesn’t matter how much tuning or modifications you make, it still won’t be that quick. Where as if you have a good, strong engine to start with, tuning and modifications can make a big impact!
When choosing hosting, I would recommend going for a web host that uses LiteSpeed server technology as this is not only fast but also reliable and you will see why it makes such a difference later on in this post.
You can also opt for managed WordPress hosting as this generally performs better than normal shared hosting but this isn’t guaranteed, so make sure you research the company before purchasing any hosting.
3. Use a Fast WooCommerce Theme
Not all themes are created equal and using a poorly coded theme can have a big impact on the performance of your site.
But how do you choose the right theme?
Well fortunately there are companies out there who have the time and resources to test out a large amount of themes and a highly reputable source are the team at Kinsta, who also happen to be one of the best managed WordPress hosts for larger website and they have found the 22 Fastest WooCommerce Themes.
4. Remove Unused/Not Required Themes and Plugins
It is very easy to bloat a WooCommerce site by installing themes and plugins that you aren’t using or aren’t really needed and to improve your sites performance you want to have a clear out!
For themes, you only need the parent and child of the theme you are currently using. There really is no need to have any others installed.
With plugins, firstly delete any that you aren’t currently using on your site and secondly, go through your plugins and decide which ones you really need and are essential to the day to day operation of your site.
You will probably find that there are a couple or possibly more that you don’t really need and ideally, you only want to have a less than 20 plugins installed to help prevent bloating, which will slow down your site.
5. Optimise Your Images
Images are often the largest elements of a web page and a common cause of slow websites is that they are using images that haven’t been optimized for use on the web.
There are three steps to optimizing images for your website:
#1 Use Correctly Sized Images
There is no point uploading a 2000x2000px image to your site if it is only going to display 500x500px or 600x600px.
The ideal image sizes for your site, including hero, slider, featured and product, can usually be found in your themes documentation.
While not essential, I personally have mine sized slightly larger than the recommended size, so that it displays well on all devices, for example if the product images were displayed 500x500px, I would upload a 600x600px image. The size difference won’t be huge but I have experienced images being distorted when the ‘correct’ image size is uploaded.
#2 Use the Correct File Format
The next part of image optimization is to use the right format for your images. In most cases, the best option will be will be JPG as this provides the best compromise between quality and file size.
The only time that PNG images are the best option is if you need a transparent background and in most cases, this will only be required for your sites logo.
There is a new image format called WebP but this hasn’t been widely adopted yet, so JPG is still in most cases the best choice.
#3 Save as a Web Optimized Image
Not all images are saved equal and most images are saved so that they are optimized for websites.
This is why you want to save your images as a web optimized file as this will compress the file, with the minimum loss of quality, resulting in a smaller file size.
How To Do This?
There are a couple of ways you can do this, the first way is to use photoshop as this allows you to to quickly re-size images, which can then be optimized by using the save for web function.
If you don’t want to invest in photoshop, then you can use Canva, which is a free online tool which allows you to create custom images but for the purpose of this post, Canva allows you to create a blank canvas the size you want, you can then upload your image and download it as an optimized image.
The final part is to use an image optimization plugin as even if your images have been saved as optimized, plugins such as Smush will usually find that there is a little bit more optimization that can be done so that the image that is served up on your site is the most optimized it can be and as they say, every little helps!
By doing this to all the images on your site, you can in some cases drastically reduce the size of the page that needs to be loaded and the smaller the size, the quicker it loads.
6. Install an Optimization and Caching Plugin
While everything up until this point should have a positive impact on your sites performance, they won’t have as big an impact as using an optimization and caching plugin.
Now there are plenty of options when it comes to these types of plugins including Autoptimize and WP Super Cache, which will do a good job but in my opinion, the best plugin to use, especially if you are with a host using LiteSpeed servers is the LiteSpeed Cache plugin as this does everything in a single plugin.
Also, as the plugin has been made by the same company that makes the servers, the two work extremely well together and when configured correctly, can result in a serious increase in performance.
Best of all, the LiteSpeed Cache plugin is completely free!
If you aren’t using a host with LiteSpeed servers, then the combination of Autoptimize & WP Super Cache can do a good job or you can opt for a premium all in on optimization plugin like WP Rocket.
If you aren’t sure what these plugins do, here is a short description:
Unfortunately, I can’t offer any specific advice as to what the best settings are for these plugins, this is because every website is different, with different themes and plugins, meaning that what works on one site, won’t always work on another (I have two sites, both using the LiteSpeed Cache plugin and both have different settings).
- Make a change to a setting within the optimization plugin
- Clear your sites and browser caches
- Check to make sure your site, including product and post pages are displaying correctly
- Run your site through the performance tools to see what changes (good or bad) have taken place
This can be a time consuming process and EcommerceGold took me about 3 days of tweaking and testing to get the performance to a level I was happy with.
Lazy Load Images & IFrames
Even though lazy load is now built into WordPress, I still find that the lazy load functionality in the LiteSpeed plugin works better but one thing I did find that really help with CLS issues was to exclude my logo from lazy loading and this dropped the CLS on EcommerceGold from 0.25 to around 0.05, which moved it from the red to the green.
7. Use A CDN
The last step for this guide is to use a CDN for your site and if you don’t know what a CDN is, it stands for Content Delivery Network and basically it allows users all around the world to access your site quicker by storing cached versions of your site on servers all around the world.
For example, if your web hosted was based in the UK and not using a CDN and a visitor from North America or Australia visited your site, all of the data for your sites pages would need to be sent halfway across the world, which will probably result in a slow loading page.
Where as if you are using a CDN and the provider has servers in North America or Australia, then a cached version of your site will be loaded, which will reduce load time as the data isn’t having to travel as far.
Other benefits of using a CDN can be added security, reduction of bandwidth usage with your web hosts and increased chance of your content being widely available.
When it comes to CDN’s, there are lots two choose from and also different types of CDN’s but when it comes to WordPress, there are two great low cost options:
- Cloudflare, their free option is a great choice for many smaller sites and if your site grows, then they also have a selection of paid plans to go with your growing business
- Quic.cloud, a relative newcomer to the CDN world but it is the only WordPress specific CDN and if you are using a host with LiteSpeed servers, then there may be a free monthly allocation that you can use, if not, prices are still very low.
Setting up both of these CDN’s is very easy but Quic.cloud is my recommendation as it works flawlessly with the LiteSpeed Cache plugin and changes made in the plugin are automatically applied to the CDN.
When it comes to WooCommerce optimization, it isn’t a case of install a plugin and everything is done for you, it is a case of trial and error to find what works for your site but all of the steps above will help your site improve in some way, some might be quite small changes and others very large but every little helps.
Seconds and fractions of a second can make a big impact on bounce rates and the lower the bounce rate, the higher the chances of people sticking around on your site and potentially making a purchase.
All the steps mentioned above are steps that I have taken to improve the performance of sites in the past and also EcommerceGold and to show I’m not lying below are two screenshots of my PageSpeed Insights score for one of my most popular posts on the day I made this post 9th June 2021: