Speed up WooCommerce: lessons learned from 100+ migrations

Last updated on 2020/12/21

|

by Dejan Murko

Featured post image

We’ve migrated over a hundred WooCommerce stores in the past few months from different hosts to WooCart. Most of our new users come to us because they want their WooCommerce store to load faster. And we’ve seen everything: from extremely well-optimized stores loading in around a second to stores loading in more than 15 seconds. The difference between those two has never been because of the traffic that the server has to handle.

Many WooCommerce users significantly underestimate the effect that the WordPress configuration has on the speed. If you install a slow theme, add 70 plugins, 10 external scripts, and load 200 products on the homepage, there is no server in the world that will be able to load your store below 10 seconds.

Keep in mind a large part of your visitors sees your store on a small phone screen. The unique design done for desktop is lost on the mobile but still affects load time everywhere.

All of these recommendations are based on our experience, transferring and optimizing our new users’ stores. If you follow them, we guarantee you’ll speed up your WooCommerce store.

Correctly using and configuring WordPress

Let’s start with the basics.

Install only necessary plugins

This one is straightforward – install as few plugins as possible. If it’s not critical, don’t install it. Not only does this help with page speed, but it also simplifies maintenance and troubleshooting.

And we’re mentioning this only because we’ve seen it many times: do not use multiple plugins for the same function, especially not caching plugins. More caching plugins do not equal more speed.

What’s a reasonable limit? If you’re building a new store, limit yourself to 20 plugins. From our experience, a store with 50 plugins is going to require extensive resources, and with 70+, you’re looking at a top tier plan just to load it in a decent amount of time, not even counting for traffic.

We urge you to stop at 40. Besides performance, the number of conflicts and maintenance issues that are going to start popping up after that is just not worth it.

Careful using filter and search plugins

WooCommerce comes with product categories and tags for help with filters and search. It’s strongly recommended you use these because they are written for performance and will perform the best. Additional plugins can be used but should not take over the primary search function.

We’ve seen the worst results when a filter plugin was used as the default for all filtering and the main menu directly linked to the filters. This caused database querying for every link click in the menu, significantly increasing the load time. Furthermore, in some cases, those filters were written to do filtering in PHP skipping any database optimizations.

Try to work with default WooCommerce categories and tags.

Set pagination to 20 items max

We’ve seen stores that list hundreds of products on the shop and category pages. This might even work when your store is without traffic, but it will grind your server CPU to a halt with an increase in visitors.

Limit your lists to 15-20 products per page, and be especially mindful of the homepage. Do the same in your admin area (top right > Screen Options).

Avoid external JavaScripts

If you run three web analytics plugins, two for chat, and one for email opt-in, and they all load external scripts, then your load time will suffer because the site needs to wait for external servers to respond.

Remove everything that is not critically necessary. You only need one web analytics and one chat.

The second step is to delay script loading. You can do this with the plugin Async Javascript or Flying Scripts (“load on visitor interaction”). Both are straightforward to configure, and you’ll see the improved result immediately.

Disable wc-ajax=get_refreshed_fragments

This is a script that checks the WooCommerce cart content. By default, it checks them for all visitors, no matter if they have something in the cart or not. This can slow down your store.

You can disable this script with the plugin Disable Cart Fragments. It won’t impact visitors that have a product in the cart.

Use a page preload plugin

This doesn’t effectively lower page load, but it makes it look fast for the visitor because it downloads the probable next page in advance. Works great for stores with lots of pages where there the visitor browses a lot before purchasing.

One of the plugins that do this is Flying Pages. Limit the requests to 1 per second and do it only on hover. If you set it to load everything in the viewport, then it’ll be one of those plugins that will grind your server to a halt the moment you get more than five visitors to the homepage.

Choosing a fast theme & page builder

The only thing worse than 50 plugins is a slow theme running a slow page builder.

Choosing a fast theme

While all-in-one themes are trendy, unfortunately, they’re also very bloated. Authors usually show-off their demo themes with A/A 100 tests, but the one you install out-of-box is going to be a mess. If you start with a slow theme, it’ll be tough to improve the load time without significant work.

We recommend you stick with simple themes, focused on those that support WooCommerce out-of-box. Read our theme benchmark tests to find the fastest WooCommerce theme.

Choosing a fast page builder

It’s a controversial opinion, but we think you should skip page builders and go with Gutenberg for your store. We’ve seen significant improvements in load time when page builders are removed. Gutenberg has come a long way since launch, and you can build some pretty amazing pages with it.

Since mobile sales are expected to rise to 54%, a unique and complex design is getting less important because it needs to translate to a very simple page on mobile.

That said, if you are convinced on using a page builder, we’ve done benchmark tests for them as well. Read our page builder benchmark tests to learn about the fastest WooCommerce page builder.

Uploading, compressing, and embedding the right size images

Image optimization is easy and fast to do on-the-fly but extremely annoying if you need to do it for the already uploaded images. It also gives great immediate results if it hasn’t been done from the start.

We’ve seen users upload raw product images from a camera that were more than 10 MB large and then embedded them on the homepage with a page builder. This is the absolute easiest way to kill the page load time. Always keep your image size below 500 KB. Even large 2500px can be below that mark if you use image compression and remove EXIF data.

When building a page with a page builder, make sure you’re embedding the smallest image possible. Embedding a few full-size 2000px images when they load as thumbnails on the homepage can easily add multiple seconds to the page load.

Run your images through EXIF data remover and image compression before uploading them to your site. If you already have uncompressed images uploaded, use reSmush.it plugin. Make sure to do it overnight since it will impact your server resources.

Using CDN for a faster image, CSS, and JavaScript load time

In most cases, your store will be served from one server in one location. Let’s say that server is in San Francisco. All files need to be downloaded from that server to visitors from everywhere in the world. This negatively affects the load time in Europe or Asia, and even on the East Coast.

To combat this, you can use a Content Delivery Network (CDN) for so-called static files: images, CSS, and JavaScript. These files are uploaded to CDN and then served close to the visitors from the local CDN servers.

This significantly speeds up load time because the files need to make a shorter distance to the visitor.

Quality hosting providers offer CDN out-of-box (the easiest way to take advantage), or you can add your own. There are many good CDN providers, from Cloudflare to KeyCDN and BunnyCDN.

Using the right cache plugin for your host

You’ll want to check with your host to see if they have their own caching and if they recommend a specific plugin. Because it needs to work well with their server setup, we suggest you go with their recommendations. You’ll also want to make sure they understand the specifics of WooCommerce caching for cart and checkout pages.

If your host cannot give recommendations and does not understand the WooCommerce use case, it is time to move to a better host.

Choosing the right quality hosting for your store

If you’re yet to make your first $1000 in sales, find a cheap local provider, keep your store simple to have it load under 3 seconds, and focus on getting to that first milestone.

If your store is a business, then stop being cheap on hosting because it costs you way more money than you’re saving. You’re losing money because of poor performance, resulting in worse conversion rates, general support that can’t help you with your WooCommerce store, and maintenance issues that are a pain to handle if the host does not offer a staging environment.

Once you’re making money, find a host that offers dedicated resources – a dedicated server, VPS, or dedicated cloud hosting. This gives you more control over your server, better performance, and, most importantly, better performance reliability.

As you probably know, cheap providers are shared hosting. That means your store resources are shared with hundreds or thousands of other websites. If there is an increase in resource usage with your neighbors, your store load time will suffer.

With dedicated resources, you’re the only one with access to them. Whatever happens to other users’ sites is not your problem.

Many hosts offer these types of servers, but if you’re looking for one that is focused on WooCommerce and store owners, have a look at our homepage.

Find specific recommendations for your WooCommerce store with page speed tests

Once you’re done with our recommendations, you can start going into the specifics of your own WooCommerce setup with speed tests. There are many tools out there that can help with that and we’ll show you a few that we use.

Google’s PageSpeed Insights

Google’s PageSpeed Insights is pretty much the standard and comes with great instructions to improve the page load. A lot of recommendations will affect your theme, so be prepared to do some customizations there. You can also use Web Vitals for a simpler overview and additional recommendations for SEO and accessibility.

GT Metrix

GT Metrix is a very popular tool that comes with a great interface that will take you through the recommendations for speed improvements. It incorporates Google’s Web Vitals in the test results.

WebPageTest

We like WebPageTest because it gives consistent and reliable results as it always does at least three runs per test. It also has more locations than GT Metrix.

Summary

Website performance optimization is not a one-time thing. Any changes you make after the optimization can affect the load time. You need to stay on top of it by routinely testing your WooCommerce store. Either subscribe to a testing service that can do that for you regularly or put it on your monthly to-do list.

If you’re looking for a partner to help you with that, take a look at our homepage. We’re the only host specializing in WooCommerce and are focused on making your store fast and easy to maintain.

Learn How to Speed up Your WooCommerce Store

The best tips for the 80/20 results/effort ratio.