X
    Categories: WooCommerce Tutorials, Tips and GuidesWordPress Tutorials, Tips and Guides

A Comprehensive Guide to Speed up WooCommerce Store

Optimizing the load speed of online WooCommerce stores is very important, not only for the visitors but also for securing a visible position in SERP.  Speeding up WooCommerce is the single most important reason that makes or break stores.

WooCommerce store optimization:

  • Reduces the bounce rate.
  • Increases the time spent on the store.
  • Increases the number of page views.
  • Increases the sales.

Tools for Testing Load Speed

WebPageTest is probably a complete service available in the market. Often shunned by beginners because it is difficult to approach. However, it is the preferred tool for testing the actual performance of a WooCommerce store. You should test your store on different servers and with different connection speeds.

In addition to the conventional data, WebPageTest also tests the Speed Index of WooCommerce store. The Speed Index measures the time (in milliseconds) by which most of the pages of the store become visible for the users.

PageSpeed Insights comes directly from the deceased Google labs. It provides technical advice (ranked by priority of importance) about performance optimization of your WooCommerce store. I strongly recommend you to resolve issues of high and medium importance first to ensure that all major critical problems have been weeded out.

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 the store.

Pingdom Tools helps you test the speed of 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.

The Spring Cleaning

Overtime WooCommerce stores become slow because of the clutter that accumulates as the extensions and databases are used at a frequent rate. Here are several important areas of the “spring cleaning” of WooCommerce stores.

Limit the Number of Extensions

In fact, 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.

In order to evaluate the quality of the extensions, install Query Monitor, a great tool that helps you discover extensions that slow down your WooCommerce store.

Limit/Disable WordPress Revisions

WooCommerce offers a default revision check on product pages, allowing you to go back and view changes to the product pages. While it may seem like a good thing, over time, this can lead to performance problems.

For example, let’s say you created a product page and worked on it seven times, changing a word or two each time. Although the change in the database is minor, you now have eight copies of your original product page. This can quickly degenerate and slow down WooCommerce store in the long run.

To correct this problem, 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

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. This plugin allows you to not only remove problematic revisions but also clean up the entire WooCommerce store database. It is also possible to automate the cleaning process so that it is executed automatically without disturbing your activities.

Limit External Resources

An external resource is simply a script, a style sheet, a font that is not hosted on your WooCommerce store server. Even Google Analytics is an external resource!

It is important to limit the number of the external resources to the minimum because of the simple fact that you could not optimize these resources. In almost all cases, these external resources slow down your store. A good way of minimizing the dependency on these resources is to use credible sources such as Google Fonts that take care of all font related issues.

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 stores should remove these widgets and use simple share buttons.

Affiliated Ads and Products

As I said earlier, it is not possible to optimize external resources. Affiliate advertisements and products are no exceptions. If you run ads on your WooCommerce stores, use a single network and do not run wild with ad placement. So if you use Google Adsense and Viglink, 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.

Image Optimization

Image optimization is essential for the overall speed optimization of WooCommerce 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 and improve the performance of your WooCommerce store. 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.

Eliminate and Replace Images

The very first question you need to ask yourself is: Is this image really necessary? Good design should be simple without image overload. That being said, a well-placed image transmits more information than a thousand words. It’s up to you to find the right balance.

The following three tactics are often deployed at WooCommerce stores for optimizing images.

  • Base64 – This technique is 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 products pages.
  • Inline SVG – The inline SVG offers all the advantages of Base64 encoding, but none of the disadvantages. Beware, however, because 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 of images. 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.

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 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.

Image Dimensions

Be careful not to upload unnecessarily large images than necessary at your WooCommerce store. Resize images manually or use a plugin such as Imsanity to automatically resize images to acceptable dimensions.

Image Compression

You could 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 extension offered the best performance, in addition to being very easy to configure. You only need to get an API key and the extension is available in your store. The extension is free up to 100 images per month. This should prove to be sufficient for many WooCommerce stores.

Responsive Images

Your pictures are now compressed, it’s excellent! When if visitors visit your store on a smartphone? A 1200px image is not really appropriate for them. That’s why some developers such as Cris Croyer from CSS-Tricks have created the RICG responsive images that will display the right image size based on the screen width.

File Optimization

The number of files on a WooCommerce store could be staggering for many users. And, the number continues to grow overtime. The result is slow WooCommerce stores as the browser of the visitors have to load up large files for every page.

File Compression

The best-known compression is undoubtedly Gzip compression that reduces the size of static resources. For example, JS files could be compressed to half the original size without affecting the performance. To find out if compression is enabled on your WooCommerce store, use Gzip compression test.

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 user. By reducing the number of style sheets, you considerably speed up WooCommerce store experience for the users.

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, however, with a plugin like Breeze to concatenate these files easily. Beware that concatenation is a delicate operation and it is not uncommon for this operation to break your live WooCommerce store. It is, therefore, should be tested on a staging site.

JavaScript files

Like CSS resources, large JavaScript files negatively affect the page load speed. Developers could 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 store. Sometimes concatenation and change of loading type can also break your WooCommerce store. The more scripts you have, the more difficult it will be to optimize them.

Quality Hosting

In many ways, hosting is the MOST IMPORTANT factor that affects WooCommerce store performance. Indeed, it is the underlying hardware architecture that is responsible for handling the traffic and serving the relevant data to the users. Thus, a fast and optimized hosting solution should be your first priority.

Performance Considerations

It is best to choose a hosting provider that:

  1. Provides data centers across the world.
  2. Offers SSD based solution.
  3. Ensures 24x7x365 support for your queries.
  4. Provides top-notch cloud infrastructures.

Note: It is important to choose the server closest to your audience. This will positively change the response time of your server.

Without talking much about the traditional (Shared, Dedicated, and VPS) hosting solutions, I will only discuss Cloud Hosting.

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.

A very important benefit of cloud hosting is scalability of the hosting solution. This is particularly important for WooCommerce stores during the crunch time of Holiday Season. 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, the WooCommerce stores could continue to make money despite the load on the store.

Specialized WordPress Hosting

If you do not want to spend too much time on configuring your servers for top performance, managed cloud hosting for WordPress is the best solution for your WooCommerce store.

All market-leading managed hosting solutions include 1-click free backups, firewalls and other security measures, server upgrades and patches and support by experts.

The Server and Browser Cache

The free WordPress cache plugin, Breeze is the easiest and the fastest way of speeding up WooCommerce website.

Breeze WordPress cache plugin is honestly not easy to surpass in terms of performance and ease of configuration. Developers tested the different cache plugins and discovered that Breeze performs significantly better and offer the easiest configuration. This is particularly important because the more complicated a plugin is to configure, the more likely it is that users will make configuration errors.

Server Cache

WooCommerce is dynamic and you need to make it static to speed it up. Otherwise, each time a product page is served, 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. This process is very efficiently handled by Breeze.

Browser Cache

The browser cache can greatly speed up WooCommerce store for visitors who visit multiple pages of your store. Indeed, all static files such as style sheets and JavaScript files can be cached by the browser. This allows repeat viewing of the pages much faster.

The Visual Design

Good performance always starts with good design. This is what Brad Frost preaches in an article that has become an apology to performance.

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 loads a video or an HD image in the background? Your store displays all social widgets? If so, do not forget that all these design elements have a direct impact on the speed of your WooCommerce store.

Please note that nothing prevents you from integrating these elements. I just want to mention that if performance is a priority, you will have to make a choice!

Content Delivery Network (CDN)

I could not finish a guide on optimizing WooCommerce store performance without telling you about the Content Delivery Network (CDN) that further speeds up WooCommerce stores.

A CDN servers static elements of your store from the location closest to the visitors. This significantly speeds up the experience for the users because the page loads up quickly.

It’s your turn now! Have I missed anything? If YES, please feel free to add a comment below.

Mansoor Ahmed Khan: Mansoor Ahmed Khan is a WordPress Community Manager at Cloudways.