Complete WooCommerce Speed Optimization Guide

Complete WooCommerce Speed Optimization Guide featured image

As accredited WooCommerce Expert developers, Silicon Dales offers a full WooCommerce optimization service to medium and larger Woo stores, but what do we actually do? Well, not everything in our toolbox is filed under “easy fix” but there’s a whole host of great ways you can get started on the road to a faster online store, by following the steps in this guide.

We’ve tried to put this in order of “most important” based on experience – so the things we see most often being a problem are at the top – but it should be noted that every site is different. Sometimes you have huge images, but everything else is fine (for example!), or maybe you optimized your site really nicely, but your host is… just terrible! So remember: the priority order is the order we would usually expect to find issues, and could be something doesn’t apply to your site – in which case just skip it, my friend.

Consider it a checklist.

So if you’re currently saying “help I’ve got a slow WooCommerce site” or “my admin is uncontrollably and awfully slow on WooCommerce” or “what the heck’s going on, why is my WP so gosh darned slow!!!” this guide may help you to find the common causes of slowness, and start to think about ways in which they might be resolved.

Remember, though, Silicon Dales are accredited WooCommerce experts, so we’ve got a lot of miles on the clock. Fast miles, too 🙂

Your WooCommerce Hosting

You should make sure you are on a really good hosting service, ideally one which you know from other people’s experience is a host which supports WooCommerce well.

Perhaps avoid shared hosting – if you can

We would generally recommend to avoid “shared” hosting, if you can afford this. That means the standard product on some larger hosts may not be ideal. Shared hosting is generally hosts where lots of sites are put into one hosting machine. How many “lots” means is dependent upon the host, but the basic principle is this: resources are shared by all the sites on the hosting setup. This can lead to poor performance outside of your direct control. Its beyond frustrating to have periodic slowness caused by “someone else”.

Use managed WordPress hosts for WooCommerce

You should instead try to look for managed WordPress hosts. Again, ideally use a managed WP host with a track record of hosting WooCommerce. Cloudways, Kinsta, Pantheon and WP Engine (though careful with WooCommerce Subscriptions on WP Engine), are all hosts we recommend at Silicon Dales. If you are on a lower budget, of the shared and smaller hosting plan providers, we generally think that Siteground is a reasonably good Woo host.

If you are looking at another host – or it is your current host – ask around what other people have found the hosting experience to be like for WooCommerce.

Get the best hosting plan you can afford

Just as not all hosts are created equal, you can be sure that the hosting plans are not all the same, either. If you have a larger store (for large see: lots of products (thousands); lots of orders (thousands); lots of daily visitors; or a huge number of WordPress posts or pages, for example) you may need to bump up to a “Business” or “Professional” plan, for which you may need to expect to pay $100 per month or more. This cost, along with maintenance for your store, is not really optional – its the machinery on which your store runs.

You cannot operate an online store without a server of some kind on which your site lives! Consider your hosting fees like a bricks-and-mortar store would consider their rent or building expenses: as a necessary investment to actually being able to trade at all.

Use PHP 7+ and all recommended hosting settings

One thing which almost always leads to big speed gains is simply updating from an older version of PHP to PHP7. But, it should be noted that PHP7 may not actually work with your site and plugins. It definitely does work for WordPress, most popular themes, and WooCommerce (and all official extensions). We’re running PHP 7.2 right here at the time of writing, and PHP 7.0 on our WooCommerce based booking site.

WP Engine has a nice free plugin to test your PHP version compatibility here in the WordPress plugins repository. Note, you do not need to use their service to use their free plugin… though we don’t have a problem recommending both.

Optimize Your Images

Next up its images. In stores, images are very important, because they show a picture of… well, what you are selling. And we’ve long been sold cameras with more and more and more MegaPixels, right, so pictures with more pixels in them are better, right?! Well, for the web, actually… wrong! While the picture may be sharper with more pixels, that image file could well be bigger than the entire rest of the web page put together. Put another way, images can often be the biggest single cause of slowness in a site we evaluate for a speed optimization.

It is not uncommon, for example, to see a page which is 20MB in size, of which 19.5MB is all images.

There are a few things to consider when it comes to optimizing your images, listed below.

Try to upload images already optimized for web

Get familiar with your image editing software, and learn how to use its settings to generate JPG or PNG files which are compressed for web use. This means that the quality is as low as you wish to go without looking “bad”. Where this line is for you is dependent to some degree on your style and sector (luxury watch retailers might require larger and higher resolution images than, say, someone selling plumbing equipment – and that isn’t to say pipes cannot be beautiful, either, just maybe you don’t need to see the teeny tiny cogs 🙂 ).

Use a good quality plugin to optimize the images already in your store

Generally speaking, to get the max lossy (which will get you the best possible speed) or lossless compression, you may need to use an image optimization plugin on your site to scan through and optimize all the pics already in your store – rather than painstakingly taking every picture out and putting it back optimized!

Try EWWW Image optimizer. Their cloud service is relatively cheap, and “max lossy” will give good looking results which cannot often be beaten. The hosted service on your site will work for lossless compression, but this will not work in all hosts. It should also be noted you’ll maybe still get warnings in speed test sites like Google PageSpeed Insights and Pingdom‘s Site speed checking tool unless you select “Max Lossy”.

Consider Lazy Loading

Lazy loading means that images are not actually rendered unless they are in the viewport. If you think about this for a moment, it makes a great deal of sense. Your page first loads, you don’t actually “see” all of the pictures on the page (the ones down the bottom, or “below the fold”) so why use up time loading those images? You don’t need to. Save all that bandwidth and serve only images which are visible by lazy loading them.

The downside to this? You will likely experience a small delay in the images actually becoming visible as you scroll through, but this is surely mitigated by the site loading nice and quickly.

Several of the good caching plugins contain lazy loading options, and these are covered in more detail below.

Scale your images to the correct size

This one can usually be covered off with code, because WordPress generates various sizes of image when the picture is first uploaded. In short, image scaling means serving an image at the exact proportions in which you display it, rather than scaling down a (unnecessarily) large image to fit a smaller position.

So if the image slot in your store home is 200px x 200px square, but you’re actually loading the full size image in here… well you shouldn’t be doing that.

You need to change your template to call the appropriate image size.

There are, though a couple of factors to be aware of (aren’t there always! Hey, isn’t this supposed to be easy :)… well, nothing worth doing ever is 100% easy  )

  • Responsive image sizes
  • Retina images

Responsive image scaling

This comes down, a little, to the “break points” in your site and “what happens” for different screen resolutions. Ideally, if you’re thinking optimization by design, you’d have thought about break points and scaling images for different resolutions when the theme was developed (or whoever built your WordPress theme would have!), but chances are, you’re looking to retro-fit some image scaling onto your existing site.

If you’re in the latter column, its worth looking at automated solutions such as Jetpack‘s Photon image scaling tool. Now, for absolute speed, I don’t generally recommend Jetpack, but if your site is image heavy, and responsive, and doesn’t do image scaling at all… well you need to do something about this. Photon is probably the best thing in Jetpack.

The best alternative, is to re-code your theme to call the relevant image from WordPress, in whatever responsive size you’re looking at. This you can have a crack at if you are a developer, and comfortable toggling your theme templates. Use a child theme!

Retina Images

Lots of Apple gear uses Retina images, which is images which are 2x bigger than the slot they are in to create a “high resolution” experience. This makes for a delightful looking website, but its pretty much “opposite” to all of the above in terms of “optimal”. So you need to do something about retina images. We recommend to use a plugin which handles retina pics – serving them only when the device specifically requires and requests them. Do it different for Apple, and everyone else will thank you for the speed.

Your MySQL Database

Clean up your database
Clean up your database

Next up is some pretty advanced technical soup. Before getting into this I will say a couple of things you must do. Backup everything. Use a test and a staging site. Do not just run database optimizations on your live store and expect everything to be fine. This is the scenario which leads to the posting of “URGENT” and “EVERYTHING HAS BROKEN!!!” emails to people like us, late at night, or on a Sunday afternoon.

Test, test, test and test some more – for everything you are going to do to your database. Consider leaving it. If you’re not a mechanic, would you take your actual engine apart?

If you are even a little bit uncomfortable with MySQL, do not touch anything in this section. Just read this for background, but do not actually action any of this. Fair warning.

But all that aside, some really big gains can be made by making optimizations with the way your database works.

Convert your MyISAM tables to use innodb as a storage engine

Complicated, right?! In the words of Chris Martin, nobody said it was easy. There’s en explanation on how to do this MyISAM to innodb conversion for WordPress here.

If you must have MyISAM tables, optimize them

If you do have MyISAM tables in your database, then run the “optimize” on them somewhat regularly.

Clean out orphaned options from wp_options

There will often be junk left in the wp_options table by old plugins you have deleted. Cleaning these out will result in speed boosts in the admin and uncached pages, because some of these are loaded often.

Clean out expired transients from wp_options

Sometimes plugins add a lot of transients which are not made right. Sometimes expired transients did not get cleaned out. When this has happened, we’ve seen misfiring plugins adding tens of thousands of transients to wp_options which are never cleaned. Urgh. What a mess. Get a plugin like transient manager and clean them outta there!

Clean out orphaned wp_postmeta

The postmeta table is (currently) a place where WooCommerce stores add a lot of action to a WordPress site, as lots of data is stored here. When you remove and re-jig your products, sometimes things get orphaned here. Cleaning this out is a task in itself, but its something to check. To start with, see the tools available in WooCommerce > Status > Tools – you’ll find lots of cool stuff there for cleaning things up, too!

Add some strategic indexes

There are a couple of indexes to MySQL tables which can see speed improvements. I’m a little hesitant about recommending them broad brush, but you can see them in this post, here.

Make wp_postmeta varchar 191

This is really super meaningless unless you know MySQL, but as your postmeta table grows, you can find that operations on this table become slower and slower. One quick fix in some environments is to alter the table as follows… be super careful about this:

ALTER TABLE wp_postmeta MODIFY meta_key varchar(191);

Configure a good Caching plugin

Prepare for the search spider paying a visit
Prepare for the search spider paying a visit

I’ve put this number 4. Most people lead with this one. I would say that the above probably has more of a beneficial impact on a slow-ish WooCommerce store than caching. All caching can really do is make front-end page loading times bearable. Its like a band-aid rather than a cure. The above actually makes everything faster and is therefore more important.

But purchase, install or otherwise acquire a good caching plugin, and configure it (so that it works with WooCommerce) and you’ll find you are well covered for front end speed, too.

I recommend WP Rocket. If you have the resources, I also recommend pre-loading caches, as this means visit number one will be fast. This is important, for example, when the search spider comes to town. Instead of 1.5 seconds, your pages can be zippy and loading in one third of that time, and Google will like, like, like this.

In future I may return here and talk about best settings for this, but I mentioned lazy loading above. Basically, try to turn everything on, and see if your site still works. Watch out for JS and CSS.

Remove slow plugins & functions

Try a plugin like John Blackbourn’s Query Monitor, and see if you have any slow queries, and where these are coming from. We like to use WP CLI for this, too, but we’ll save the exact commands for another time (leave a comment if you want to see them!) but the basic idea is this: identify any slow queries and either fix the code, or nuke the plugin / function which is causing this.

You need to think a little strategically for this. So if you have a plugin which is piling a bunch of slow queries in, and its only actually used for some edge case scenario, then best: completely remove the plugin, and replace the functionality some other (less resource intensive) way; good: only call the functionality where it is actually used (there are a couple of plugins for this, but we have our own custom approach to it).

Plugin Organizer allows you to selectively disable plugins on certain pages / places in your site, preventing these slow queries at source – if they ain’t used, don’t call them! Also try to raise a (polite) ticket with the plugin developer asking them about not calling the slow query in un-used locations.

This is not exhaustive

The above list is not exhaustive, and we will be adding items over time. But if you get all of the above straightened out, select a good host, a good caching plugin, make your images nice and small, and clear out the clutter from your MySQL database, as well as making sure you use PHP version 7.0, 7.1 or 7.2, I think you’ll be well on your way to a super speedy WordPress and WooCommerce website.

Get someone else to do it for you

If you’re a business, and you don’t have the skills to get all of the above (and more) done for your site, then we’ll do it for you. For a fee. Have a look at our:

Questions or Comments?

Did we get something wrong? Under or over explain something? Miss something obvious? Complain! Praise! Be furiously ambivalent! Leave a comment.

Leave a comment if you have questions or would like clarification on anything. This post will be updated semi-regularly to help all the great sites out there running WooCommerce to do so a little bit faster. Fast + WooCommerce == awesome shopping!

2 thoughts on “Complete WooCommerce Speed Optimization Guide

Leave a Reply

Your email address will not be published. Required fields are marked *

Silicon Dales