10 Tips to Improve the Speed of Your WooCommerce Site

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:

1. The number of items in the catalog;
2. The number of languages;
3. 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):

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:

1. Firewall and website protection services: These services act as a proxy for your web server. It caches web pages, CSS and Javascript documents, and media files as well. Examples of such services include Sucuri and Cloudflare.
2. 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
Loading media files from another hostname increase the number of parallel downloads. Web browsers have a limit on the number of files they can download from a single host at a time. Hosting CSS, Javascript files, and images from a different hostname can improve the loading time of your WooCommerce store.
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:

1. Log in to your cPanel account.
2. Click on the MultiPHP Manager icon.
3. Select your domain name from the list.
4. Select PHP 7.2 (ea-php72) from the dropdown list.
5. 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.

1. Log in to WHM.
2. Click on EasyApache 4.
3. Click the “Customize” button next to “Currently Installed Packages:”

   

4. Select “PHP Extensions” on the right and search for “opcache”:

   

5. Enable the OPcache extension for all the available PHP versions.
6. 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:

1. Log in to your cPanel account.
2. Click the MultiPHP INI Editor icon.
3. From the “Basic Mode” tab, select your domain from the dropdown list.
4. Scroll down to the bottom and disable zlib.output_compression.
5. 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:

<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE

    <IfModule mod_headers.c>
    # Make sure proxies don't deliver the wrong content
    Header append Vary User-Agent env=!dont-vary
    </IfModule>

    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE image/png
    AddOutputFilterByType DEFLATE image/jpeg
    AddOutputFilterByType DEFLATE image/gif
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/eot
    AddOutputFilterByType DEFLATE font/woff
    AddOutputFilterByType DEFLATE font/truetype
    AddOutputFilterByType DEFLATE font/opentype
    </IfModule>

WooCommerce uses a lot of CSS and Javascript files. Besides, each product can have multiple images. All these files can cause much traffic on your server. Especially if a visitor’s browser has to download each of these files every time.
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:

<IfModule mod_headers.c>
# 1 YEAR
<FilesMatch "\.(ico|gif|jpg|jpeg|png|flv|pdf|woff|woff2)$">
Header set Cache-Control "max-age=29030400"
</FilesMatch>

# 1 WEEK
<FilesMatch "\.(js|css|swf)$">
Header set Cache-Control "max-age=29030400"
</FilesMatch>

# 24 HOURS
<FilesMatch "\.(html|htm|txt|php)$">
# Header set Cache-Control "max-age=86400"
</FilesMatch>

# NO CACHE CONTROL
<FilesMatch "mediamap.txt$">
Header set Cache-Control "no-cache, must-revalidate"
</FilesMatch>
</IfModule>

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 10800 seconds"
ExpiresByType font/opentype A29030400
ExpiresByType font/truetype A29030400
ExpiresByType font/eot A29030400
ExpiresByType image/gif A29030400
ExpiresByType image/png A29030400
ExpiresByType image/jpeg A29030400
ExpiresByType image/x-icon A29030400
ExpiresByType application/pdf A29030400
ExpiresByType application/x-javascript A29030400
ExpiresByType text/plain A86400
ExpiresByType text/css A29030400
ExpiresByType application/xml A604800
ExpiresByType text/html A86400
</IfModule>

#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
• Photon
• Protect
• 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
• Miscellaneous:
  • 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.
• Advanced:
  • 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:

• /cart/
• /my-account/
• /checkout/
• /addons/

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

WooCommerce is known to use many CSS and JS files. These files generate many requests when a web browser loads a page. To decrease the number of queries, you need to combine CSS files. While it’s possible to do the same with Javascript files, WooCommerce advises against this practice.
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:

• Functionality
  • 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
• JavaScript Options
  • Disable JavaScript processing
  • 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!