Is your WooCommerce website slow? Poor loading speed is an issue I’ve been working on a lot in recent weeks. Performance is crucial when it comes to e-commerce. Load time is a significant factor to page abandonment. According to twelve case studies, each 1-second improvement in page speed increases sales by an average of 7%.
Here’s how you can improve the loading speed of your WooCommerce site:
- Use the right type of hosting;
- Use a content delivery network (CDN);
- Enable PHP 7.2 and PHP-FPM in cPanel;
- Enable the OPCache module for PHP;
- Disable PHP output compression;
- Enable Apache GZip compression;
- Set the Cache-Control and Expires headers;
- Install and configure Jetpack;
- Install and configure WP Super Cache;
- Combine and minify CSS files.
Without further ado, let’s start.
First, you need to determine which type of web hosting service is right for your website. There are three (3) metrics that I use to evaluate the resources required by a WooCommerce site:
- The number of items in the catalog;
- The number of languages;
- The average number of concurrent visitors at peak time.
When you have a multilingual store, you need to multiply the number of items by the number of languages. Multilingual plugins, such as WPML, make a copy of each item to a new WordPress post for each translation. Increasing the number of posts can cause degradation in performance.
Let’s start by evaluating what it takes to host your WooCommerce site. I am basing this evaluation on the number of items alone (including translations):
|Items||Hosting Types||Price Range / mo.|
|1 to 100||
||$8.95 – $39.95|
|100 to 500||
||$39.95 – $59.95|
|500 to 5000||
||$59.95 – $95|
|5000 to 20,000||
||$95 – $200|
Of course, this can vary based on how well you optimize your WooCommerce website and how much traffic it gets.
A Word About Shared Hosting Services
Don’t get caught by the lame marketing strategies from hosting companies pretending to offer “WooCommerce Hosting.” The truth is, most of these web hosts provide regular web hosting. That doesn’t mean it’s terrible hosting, but it means that they might not have WooCommerce experts to help you out.
If you decide to go the shared hosting way, make sure your web host provides expert WooCommerce support 24×7. Premium WordPress hosting services such as WP Engine or iThemes have real WooCommerce experts on-site at all times. Don’t neglect this.
A Content Delivery Network, also known as a CDN, distributes your website content from multiple servers around the globe. This distribution allows your visitors to access your website (or parts of your site) from a server located near them.
The Two Types of CDN Services
It’s essential to make the distinction between the two major types of CDN services:
- Media content delivery services: This service caches every type of files but doesn’t cache web pages. Examples of such services include Amazon CloudFront, StackPath, and Jetpack Site Accelerator.
The question is not about which one of these services is the best. They’re complimentary. You can – and should – use both, and it’s affordable.
Why Use Both Types of CDN Services?
WooCommerce is heavy on resources. By using a protection service, it takes the load off from your web server by caching a static version of your web pages. It also adds a level of security by protecting your website from intrusions and DDoS attacks.
When you combine this to a second CDN to distribute your media content, your website loads even faster. The reason is that the media files are loading from another hostname.
For instance, using Amazon CloudFront would load your stylesheets from https://d1ebgxny9qpk5o.cloudfront.net/wp-content/themes/your_theme/style.css
Sucuri and CloudFront are both powering WebHostingHero.com. It costs about $20 per month in total.
Cloudfront integration merits a tutorial on its own. However, you’ll see how to enable the Jetpack Site Accelerator later on in this article.
PHP 7.2 is faster than all of its predecessors, including PHP 7.0 and 7.1. However, it does not handle deprecated PHP 5.x functions like PHP 7.0, and 7.1 does. So if you’re using an old WordPress theme or old WordPress plugins, you could encounter compatibility issues with PHP 7.2.
Here’s how to enable PHP 7.2 and PHP-FPM from your cPanel account:
- Log in to your cPanel account.
- Click on the MultiPHP Manager icon.
- Select your domain name from the list.
- Select PHP 7.2 (ea-php72) from the dropdown list.
- Click on “Apply.”
This is what the cPanel MultiPHP Manager looks like:
When you set the PHP version for your website, it goes down for a few seconds, so don’t worry. If you encounter any compatibility issue with PHP 7.2, revert to previous PHP version.
The OPcache module compiles and caches PHP scripts to improve their execution time. Considering the heavy PHP code used to power WooCommerce, it’s a good practice to enable it. To do so, you need root access.
- Log in to WHM.
- Click on EasyApache 4.
- Click the “Customize” button next to “Currently Installed Packages:”
- Select “PHP Extensions” on the right and search for “opcache”:
- Enable the OPcache extension for all the available PHP versions.
- Click “Review” from the right-hand-side menu and then on “Provision.”
EasyApache takes care of enabling and configuring OPcache. No further configuration is required.
Yes, you read that right: you should disable the output compression done at the PHP level.
The web server software, most likely Apache, does a better job at compressing content than PHP. To avoid compressing the output twice, disable the PHP output compression. After doing this, the execution time to generate WooCommerce improved by about 40% on sites that I manage.
Here’s how to disable PHP output compression:
- Log in to your cPanel account.
- Click the MultiPHP INI Editor icon.
- From the “Basic Mode” tab, select your domain from the dropdown list.
- Scroll down to the bottom and disable zlib.output_compression.
- Click “Apply.”
I’ll explain how to turn on compression at the server level in the next tip.
Gzip compression improves the loading time of your website by shrinking the size of the files sent to the visitor. To do so, insert the following content at the top of the “.htaccess” file located in the root folder of your website:
The “cache-control” and “expires” headers are instructions sent to web browsers. It tells them which types of files to cache and how long to cache them. Web browser caching decreases unnecessary traffic and improves load time.
Edit the “.htaccess” file located in the root folder of your WordPress site. Add the following content at the top:
#8 Install and Configure Jetpack
The Jetpack plugin provides tools to enhance your WordPress website and improve its performance.
To install Jetpack, go to “Plugins > Add New” from your WordPress dashboard. Search for “jetpack,” install the plugin, and activate it.
Once the Jetpack plugin is active, click on “Setup Jetpack Now.” That leads you to the WordPress.com website:
If you don’t have a WordPress account, you need to create one. Otherwise, sign in using your WordPress.com credentials. Once you are logged in, click on “Approve:”
On the Jetpack Plans page, select a paid plan or scroll down and click on “Start Free:”
This brings you back to your WordPress dashboard. Don’t activate any functionalities yet.
Enable the JetPack Site Accelerator
The Jetpack Site Accelerator is a Content Delivery Network service. When you enable it, the images on your website are loading from a different hostname. That increases the number of parallel downloads and improves the loading time in the process.
Go to “Jetpack > Settings > Performance”. Enable all the options in the “Performance & Speed” panel:
Lazy Loading for Images
The “lazy-loading” technique consists of loading images located below the fold only when the visitor scrolls down the page. This technique involves jQuery. The Jetpack plugin provides the easiest way to enable lazy-loading of images on your WooCommerce site.
Warning: “Lazy-loading” plugins are known to break sliders which are often used to feature WooCommerce items. If this is your case, here’s a commercial plugin that can enable lazy-loading on product tables only.
Disable Unused Jetpack Modules
While Jetpack can improve the performance of your website, it can also add lots of CSS and JS files to your site.
Go to “Jetpack > Dashboard” and scroll to the bottom of the page. Click on the “Debug” link in the footer:
On the next page, click on “Access the full list of Jetpack modules available on your site.” That brings you to this list:
Enable these Jetpack modules only and disable all the others:
- Asset CDN
- Lazy Images
- Site verification
If you feel like some of the disabled modules could be useful to you, leave them enabled.
To make your WooCommerce site load faster, you need a caching plugin. WooCommerce recommends WP-Rocket, for which licenses start at $49 per year. I prefer using WP Super Cache. It’s 100% free, it’s powerful, and it works well with WooCommerce. It’s by far my favorite caching plugin, and I’ve managed to achieve great results with some tuning.
Start by logging in your WordPress dashboard and click on “Plugins > Add New”. Type “wp super cache” in the search box to find the plugin. Install and activate the plugin.
Next, go to “Settings > WP Super Cache” and turn the caching on from the “Easy” tab.
Select the “Advanced” tab and check only these options:
- Caching: Enable Caching
- Cache Delivery Method: Simple
- Don’t cache pages for known users.
- Cache rebuild. Serve a supercache file to anonymous users while a new file is being generated.
- 304 Not Modified browser caching.
- Mobile device support.
- Clear all cache files when a post or page is published or updated.
- Extra homepage checks.
Click on “Update Status” to save the configuration. Stay on the “Advanced” page and scroll down to “Expiry Time & Garbage Collection.” Start with the following settings:
If the content often changes on the product category pages, you might need to set the cache timeout lower. Click on “Change Expiration” to save the configuration.
Scroll down to “Accepted Filenames & Rejected URIs.” Here are the strings you must add to prevent specific WooCommerce pages from being cached:
Add these strings to the list and click on “Save Strings:”
Warning: If you change the path to any of these pages, you must reflect these changes above.
Finally, head over the “Preload” tab and set cache preload frequency. Be careful with this setting. I manage a WooCommerce store with about 10,500 items, and it takes about 1.5 hours to preload the cache. You don’t want your server to be continually preloading web pages. You also want the preload to complete before the cached pages are expired (see Expiry Time & Garbage Collection above).
#10 Combine and Minify CSS Files
To combine the CSS files, we’ll use a plugin named Fast Velocity Minify. Head over to your WordPress dashboard and go to “Plugins > Add New.”
Click on Install Now and then on Active. Once the plugin is active, go to Settings > Fast Velocity Minify. Select the Settings tab and check only the following options. Uncheck every other option:
- Admin Bar Purge
- Fix Page Editors
- URL Options
- Force HTTPS URLs (recommended if you have SSL)
- HTML Options
- Cleanup Header
- Font Options
- Disable Google Fonts merging
- Font Awesome
- Merge or Inline Font Awesome CSS
- CSS Options
- Preserve the order of CSS files
- Inline CSS in the footer
- Disable minification on JS files
Save the changes. Click on “FVM Purge” link at the top of the WordPress dashboard:
This will clear the cache for both Fast Velocity Minify and WP Super Cache.
After each optimization you make, take the time to test the loading speed of your WooCommerce store. See what works best for your site. For those who wish to push things further, I suggest that you read our tutorial on mod_pagespeed.
Mod_pagespeed is a module for Apache that can optimize various aspects of your web pages. It’s a powerful module that can even optimize images.
Let us know how you optimize your WooCommerce site in the comments!