Best 8 ways to speed up Woocommerce

Last updated on September 11, 2022 | By

You found your product-market fit and starting to see the first big numbers. But what is the next step to scale your Woocommerce website to the next level?

We selected the best optimizations to improve your Woocommerce site and make it able to handle thousands of concurrent customers.

Delay marketing plugins

Use Flying Scripts(free) or Wp Rocket($49) to delay marketing plugins or non-essential javascript until user interaction.

To delay a plugin’s javascript of Woocommerce, follow the steps below:

1– Install Flying Scripts. It can be installed together with any plugin cache. You need to know what plugin you need to delay.

2– To find the keyword to delay, you can either use the asset name or use Chrome Dev Tools: click F12 on Chrome, click the “Network” tab, and hover over “Initiator” to see which file triggered the asset loading:

image 7

You can achieve the same using Wp Rocket($49). Click HERE for our guide to remove unused js with Wp Rocket.

Remove unused CSS and Javascript Woocommerce code

Find if you’re using the “Add to cart” button and Disable the cart fragmentation code on the page you’re not using with Disable Cart Fragments(free) or Perfmatters($25). 

Dequeue 100% unused CSS from Woocommerce that you’re not using after checking all elements. You can use Asset Cleanup(Free) or Perfmatters($49). Perfmatters and Asset Cleanup work with any cache plugin (e.g. WP Rocket, WP Fastest Cache, W3 Total Cache).

How to remove unused CSS from Woocommerce using Asset Cleanup

  • Install Asset Cleanup
  • Go to the WordPress pages or posts tabs and you notice a new button “Manage CSS & JS”, click on it and a new page opens with the enqueued files from that specific page.
image 9
  • To better assist you with removing your unwanted css or js, you can change the Assets List Layout to “grouped by size”, which will list assets by size.
image 10
  • Dequeue the unused CSS, enabling ‘unload on this page’.
  • You can use Asset Cleanup “Test Mode“ feature to preview changes before they go to your live website. Enable the feature on Settings, after that, all changes will be only visible to admins that are logged in on WordPress.

Use a CDN for images and lazyload

We have a list of 100% free image CDNs available for your Woocommerce. For unlimited traffic and free pricing use Jetpack. If you’re using a cache plugin, you may need to properly configure the CDN settings for serving images.

You can set up Jetpack free CDN to speed up my Woocommerce images, follow the steps below to achieve that:

  • Install Jetpack, you need a credential.
  • On the Performance tab, enable Site Accelerator, but only images. Enable Lazy loading.
image 8
  • To later add a missing background image to the Jetpack CDN, place the following code on functions.php:
if (function_exists('jetpack_photon_url')) {
$image = jetpack_photon_url($image);

Replace $image with whatever variable or function is used to store the image URL or an id, class from the image.

Improve Speed with WP Cloudflare Super Page Cache plugin

WP Cloudflare Super Page takes the hard part of setting up Cloudflare rules for Woocommerce and lets you benefit from Cloudflare’s free features.

Note that you cannot use another plugin cache functionality with WP Cloudflare Super Cache, but it offers options to disable cache on popular plugins such as WP Rocket(Disable WP Rocket Page Cache option).

How to set up WP Cloudflare Super Page for Woocommerce:

  • Install WP Cloudflare Super Page.
  • Go to plugin settings – Third Party tab, and enable Woocommerce Integration.

You can also get the same result with cached HTML pages and avoid dynamic pages with Cloudflare Automatic Platform Optimization for $5/mo.

Setup Critical CSS

Consider a critical css plugin to load the essential css before any assets. Jetpack recently launched Jetpack Boost plugin for free and it generates Critical CSS for your homepage, posts, and pages. You can also use WP Rocket and its Optimize CSS delivery feature.

If you haven’t bought Wp Rocket yet, consider using my reflink.

Optimize DOM by avoiding page builders

Consider a theme that has a mobile-first CSS approach, a stylesheet for mobile and desktop. Update your theme builder to the latest release, it may have improvements on its CSS, and thus the DOM.

Elementor has a feature to optimize the DOM, go to Elementor > Settings > Advanced. Using this feature can potentially break your website features, use it wisely.

image 6
Elementor Optimize DOM feature

Change to Litespeed server cache

LiteSpeed Cache is a WordPress plugin meant to be used on Litespeed servers. With the combination of the Litespeed cache and its plugin, the server requests(HTTP) that your website can get will increase compared to using Nginx + FastCGI Cache or Apache Server + W3 Total Cache, according to Litespeed.

Having availability is essential to an eCommerce website.

wordpress performance server

To use the Litespeed plugin, you need to use a server with Litespeed. You can check the Litespeed hosting and Cloud partners here.

How to know what is slowing down Woocommerce backend (admin)

To identify potentially high-resource usage assets in the backend of Woocommerce, install the Query Monitor plugin, and check for anomalies and plugins using many resources, or doing many tasks/actions. High resource usage will appear with red warnings.

screenshot 1
Remove Query Monitor plugin after finishing the check.

Get your Core Web Vitals optimized

Leave a Comment