How to speed up WooCommerce?
Ask any brand or business, small or large and you will discover that this question is a shared concern.
It is no longer a secret that slow WooCommerce stores can cost you in many ways: downward-pointing business metrics (rebound, conversions), increase in cart abandonment, and a very noticeable dip in customer loyalty, brand image, visitors, and even SERP visibility.
Nobody likes to wait in real life or online. This very important fact is the reason why almost all ecommerce stores now prefer Web Performance Optimization (WPO).
Check Your WooCommerce Store’s Core Web Vitals
See if your WooCommerce store is performing well across all core web vitals!
In today’s article, I will tell you everything you need to know about speeding up your WooCommerce stores to the maximum and makes sure the store remains an important component in your online business setup.
What Is the Optimal Load Time?
There is no stipulated optimal load time. However, the popular expert advice is to keep it below 2 seconds. As you can guess, page load time is an important performance metric in WPO. If your WooCommerce store loads up in more than two seconds, you have your work cut out for you.
According to Google’s benchmark for the mobile speed, the probability of a visitor leaving a website is as follows:
– Source: Google
Surely at this point, you will ask yourself, “how to improve the page load time and not lose customers?”
How to Measure Web Performance?
There are different tools available online to measure the loading time of a website. I recommend three tools with which you can get multiple performance metrics of your website.
1. WebPageTest
WebPageTest is probably a complete service available in the market. Beginners often shun this tool because it is difficult to approach. However, it is the preferred tool for testing the actual performance of a website. You can test your store on different servers with different connection speeds.
In addition to the conventional data, WebPageTest also tests the Speed Index of a website. The Speed Index measures the time (in milliseconds) by which most of the pages of a store become visible to the users.
2. PageSpeed Insights
PageSpeed Insights provides technical advice on Web Performance Optimization (WPO) by priority. I strongly recommend you to resolve issues of high and medium importance first to ensure that there are no critical performance issues.
Note that a bad rating does not necessarily signify a slow store. However, solving these issues could have a serious impact on the performance of a WooCommerce store.
3. Pingdom Tools
Pingdom Tools helps you test the speed of a WooCommerce store within seconds. The standard version of Pingdom Tools has the advantage of being free but a paid version is also available that offers additional features targeted toward professionals.
10 Tips to Speed up WooCommerce
Now that we know how we can test our site performance, let’s take a look at the 10 tips that will help you improve the performance of your WooCommerce store.
1. Start with Spring Cleaning
Eventually, WooCommerce stores become slowly because of the clutter that mounts up the databases at a frequent rate. Here are several important areas of the “spring cleaning” that help you speed up WooCommerce stores.
1.1. Limit the Number of Extensions
It is not the number, but the quality of the extensions used that matters. On the other hand, the more active extensions you have, the more difficult it becomes to control the quality. It is, therefore, a good practice to inventory your extensions regularly and ensure that the active extensions are relevant. If you have the opportunity, replace some extensions with an equivalent code, this is a good practice for WooCommerce optimization.
1.2. Limit/Disable Revisions
WooCommerce offers a default revision check on product pages, allowing you to go back and view changes to the product pages. While this may seem like a good thing, but revisions can also lead to WooCommerce performance problems.
For example, let’s say you create a product page and work on it five times, change a word or two each time. Although the change is minor, you have six copies of your original product page. This can quickly degenerate and slow down WooCommerce performance in the end.
To limit/disable the revisions, insert one of the following lines in the wp-config.php file located at the root of your website.
Disable Revisions
define ('WP_POST_REVISIONS', false);
Limit the Number of Revisions
define ('WP_POST_REVISIONS', 3); // limit to 3 revisions
Note: 3 indicates the number of revisions. You can change it as per your requirement.
1.3. Clean up the Database
You already know how to limit WooCommerce product page revisions. However, you also need to remove the revisions already present in the database. For this, there is nothing better than the WP-Optimize plugin.
WP-Optimize not only removes problematic revisions but also clean up the entire WooCommerce store database. It is also possible to automate the cleaning process so you can work on without any pauses.
1.4. Limit External Resources
An external resource is simply a script, a style sheet, a font that is not on your WooCommerce server. Even Google Analytics is an external resource!
It is important to limit the number of external resources to the minimum because you cannot optimize every resource. In almost all cases, these external resources slow down your store. A good way of minimizing the dependency is to use credible sources, such as Google Fonts that take care of all font-related issues.
1.5. Widget and Sharing Tools
Social sharing widgets such as Facebook and Twitter can slow down your WooCommerce store significantly. On your store, these widgets slow down by:
- Downloading external resources
- Internal dependency on DNS queries
- Adding additional HTTP requests
- Increasing the size of the page
WooCommerce store owners should remove these widgets and use simple share buttons as it is a good WooCommerce speed optimization technique.
1.6. Affiliated Ads and Products
Affiliate ads and products are no exceptions.
If you run ads on your WooCommerce store, use a single network and do not run wild with ad placement. If you use Google AdSense or any other ads service, why not cut the pear in half and leave out only one of the two?
Affiliate ads are often in the form of images hosted on external servers. A better alternative is to host the images yourself, thereby optimizing the images and reducing DNS queries.
1.7. Limit Installed Plugins
As a rule of thumb, you should only install the most essential plugins on your site. In all cases, you should select the plugins with the reputation of speed and performance. To assess plugin speed, I recommend Query Monitor, a great tool that gives a good idea of how long it takes to load each plugin and if it is worth keeping it on your website.
2. Optimize WooCommerce Images for Web
Image optimization is essential for the overall WooCommerce speed optimization for online stores.
Indeed, images often represent the majority of the bytes downloaded for a page. As a result, image optimization often results in a reduction of page size; hence, it helps you speed up WooCommerce stores. This also has the benefit of reducing the consumption of client bandwidth.
Understand that optimizing store performance is not “one-size-fits-all”. This means that I will not give you specific plugins but describe general strategies for image optimization.
2.1. Eliminate and Replace Images
The very first question you need to ask yourself, “is this image necessary?” Good design should be simple without image overload. As we know, a well-placed image transmits more information than a thousand words. It is up to you to find the right balance.
The following three tactics are often deployed for image optimization on WooCommerce stores.
- Base64: This technique is as old as the Web. It allows you to reduce the number of requests to the server and display images instantly. Be careful not to abuse Base64 and use it on small images, because this can affect the size of your product pages.
- Inline SVG: The inline SVG offers all the advantages of Base64 encoding, but none of the disadvantages. Beware, inline SVGs are not supported on older versions of popular browsers.
- Sprites: The Sprite CSS is also a very old technique of optimizing the display. When you develop your WooCommerce theme, it may be beneficial to group most of your small images into one.
Note that if your store is on HTTP/2, the above three tactics will be counterproductive.
2.2. Image Formats
The right image format can make a significant difference in the page load speed of your store.
- JPG: Use JPG for photos, high-resolution images where you need to show a lot of details.
- PNG: Use PNGs for icons, logos, illustrations, transparent images, etc.
- GIF: GIFs are not so bad for small images, but they are very rarely superior to PNG. So, use GIF only when you want an animation.
2.3. Image Dimensions
Be careful not to upload unnecessarily large images than necessary on your store. Resize images manually or use a plugin such as Imsanity to automatically resize images to acceptable dimensions.
2.4. Image Compression
You can compress images manually (through Photoshop) but it is tedious, to say the least. I tried many extensions to optimize the images and I came to the same conclusion as Matt Cromwell.
Compress JPEG & PNG images plugin offers the best WooCommerce performance, besides being easy to configure. You only need to get an API key and the plugin is available to your store. The extension is free up to 100 images per month. This should prove to be sufficient for many WooCommerce stores.
2.5. Responsive Images
What if a mobile visitor visits your store? A 1200px image is inappropriate for him. That’s why some developers such as Cris Croyer from CSS-Tricks have created the RICG responsive images plugin that will display the right image size based on the screen width.
3. Go for Reliable Hosting
In many ways, hosting is the MOST IMPORTANT factor that affects WooCommerce store performance. Indeed, the underlying hardware architecture is responsible for handling the traffic and serving the relevant data to the users. Thus, the best WordPress hosting should be your first priority.
It is best to choose a hosting provider that:
- Provides data centers across the world
- Offers CDN and SSD-based storage
- Integrates performance-boosting technologies
Note: It is important to choose the server closest to your audience, as it will reduce server response time.
Without talking much about the traditional (Shared, Dedicated, and VPS) hosting solutions, I will only discuss Cloud Hosting.
The Right Hosting Can Make All the Difference
Join Cloudways to experience blazing fast speeds on your WooCommerce store
3.1. Cloud Hosting
Cloud hosting offers the best mix of performance and costs for WooCommerce stores. The good thing is that most of the cloud hosting providers follow a pay-as-you-go model that ensures that you pay only for the resources that the store actually consumes.
During the holiday season, the traffic and user requests increase exponentially and traditional hosting solutions could fail in such scenarios. Thanks to the scalability of cloud hosting solutions, businesses can continue to grow despite the load on their WooCommerce store.
3.2. Managed WooCommerce Hosting
If you do not want to spend too much time configuring your servers for optimal WooCommerce performance, managed hosting for WooCommerce is the best solution for your store.
All market-leading managed hosting solutions include 1-click free backups, firewalls and other security measures, server upgrades and patches and support by WordPress experts.
4. Optimize Website Code
The number of files on a WooCommerce store can be staggering for many users and the number continues to grow over time. The result is slow WooCommerce stores, as the visitors’ browsers have to load up large files for every page.
4.1. File Compression
The best-known compression is undoubtedly Gzip compression that reduces the size of static resources. For example, you can compress JavaScript files to half of the original size without affecting the performance. To find out the compression status of your store, try the Gzip compression test.
4.2. CSS Resources
There are several techniques for optimizing CSS resources. One of them is simply keeping the number of style sheets to a bare minimum.
The browser must wait for a full load of all stylesheets before displaying anything to the visitor. By reducing the number of style sheets, you considerably speed up WooCommerce store for the visitors.
It’s good to reduce the number of style sheets, but with WooCommerce it’s almost impossible. Themes are very often focused on “features” and there is, of course, a style sheet for every feature.
It is possible with a plugin like Breeze to concatenate these files easily. Beware that concatenation is a delicate operation and it is common for this operation to break your live WooCommerce store. I recommend it to test on a staging site first.
4.3. JavaScript files
Like CSS resources, large JavaScript files negatively affect the page load speed. Developers can use the same minimization and compression tactics that they use for CSS files.
Unlike style sheets, it is possible to render “ASYNC” scripts to no longer block the display and thus speed up WooCommerce stores. Sometimes concatenation and change of loading type can also break WooCommerce stores. The more scripts you have, the more difficult it will be to optimize them.
5. Optimize HTML Code
Your HTML code is the roadmap for servers to read.
Through this map, the server can compile and deliver the pages requested by the visitors. However, note that it is your responsibility to keep your code as clean as possible.
Things like additional spaces and hidden texts (for black hat SEO) in your code can have a big impact on the load time of the page. Experts suggest going through your code with a fine comb, to speed up your WooCommerce store dramatically.
6. Minimize Redirects
Think of your WooCommerce store as a map.
Every time someone clicks on a link to a page on your store, the server counts it as a redirect. Essentially, the server has to divert visitors to the correct location. Although this only takes a few seconds, it may seem like an eternity to the users and is a direct contributor to the bounce rate of your store.
If you have tons of redirects throughout your website, you are eating into server resources and increasing the final page load time for the visitors. Thus, if you can reduce the number of redirects, you will see a significant jump in the page load speed as it is a proven WooCommerce optimization technique.
7. Use Server and Browser Cache
Breeze WordPress cache plugin is honestly not easy to surpass in terms of WooCommerce performance and ease of configuration.
Developers tested the different cache plugins and discovered that Breeze performs significantly better. This is particularly important because the more complicated a plugin is to configure, the more likely it is that users will make configuration errors.
7.1. Server Cache
A WooCommerce store is dynamic and you need to make it static to speed it up. Otherwise, each your server must fetch all the assets from the database and waste valuable time. If your server supports a caching solution, it would simply return the HTML.
7.2. Browser Cache
A browser cache can greatly speed up WooCommerce stores for visitors who visit multiple pages of your store. Indeed, the browser can cache all static files such as style sheets and JavaScript files. This allows repeat viewing of the pages much faster.
8. Improve Web Design
Good performance always starts with good design. This is what Brad Frost preaches in an article that has become an apology to performance. He says:
Ultimately, performance is about respect. Respect your users’ time and they will be more likely to walk away with a positive experience. Good performance is [a] good design. It’s time we treat it as such.
Does your WooCommerce storefront start with a huge carousel? Are you aware that carousels are virtually useless? Does your WooCommerce store load a video or an HD image in the background? Does your store display all social widgets?
If so, do not forget that all these design elements have a direct impact on the speed of your WooCommerce store. No one prevents you from integrating these elements. I just want to mention that if performance is a priority, you will have to make a choice!
WooCommerce Stores Need a Reliable Hosting Stack
See how Cloudways helped Silicon Dales to manage their hosting stack
9. Choose Lightweight Theme
In many cases, the aesthetic decision of a website is on the designers’ end who does not take into account the page load speed. As a result, often the aesthetics of the frontend takes precedence over the page load speed.
When finalizing the theme of your website, I strongly suggest picking a theme that is lightweight and optimized for performance. In addition to being responsive, the theme should have a clean codebase that prioritizes speed over aesthetics.
10. Add WordPress CDN
If your WooCommerce store serves customers globally and a lot of multimedia content or styles to make it much more impressive, I advise you to add Content Delivery Network (CDN). It serves static elements of your store from the location closest to the visitors. This significantly improves the page load time and user experience eventually.
Final Thoughts!
With all the tips and techniques mentioned, it is time to improve WooCommerce performance. If your WooCommerce store takes more than 2 seconds to load, you should start worrying as it will negatively affect everything: from user experience to SEO ranking.
It’s your turn now! Have I missed anything? If YES, please feel free to share that in the comment below.
Mansoor Ahmed Khan
Passionate about technology, entrepreneurship, and marketing, Mansoor Ahmed Khan is in computing since he knows how to type on a keyboard. His daily life is rocked by his family, projects, and his screen. Probably in this order, he likes to be convinced at least. You can reach out to him at [email protected].
