Best Ways To Speed Up Woocommerce (2024)

Boost your website speed & performance.

Woocommerce can be viewed by many as a slow alternative to other ecommerce platforms. But if you take a few actions and optimize its speed, you can make it as fast as the top platforms.

Delay non-essential Javascript

Use Flying Scripts or Wp Rocket to delay marketing plugins or non-essential JavaScript until user interaction. It will improve a lot of metrics.

Running non-essential and marketing plugins with Javascript render-blocking isn’t a good practice, therefore running them async, defer, or delaying will have a positive impact.

To delay a Javascript plugin in Woocommerce:

Install Flying Scripts or Wp Rocket. Flying Scripts can be installed together with any plugin cache. You need to know what plugin you need to delay.
To find the keyword to delay, 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:

Check the full guide to removing unused Javascript with Wp Rocket.

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 the homepage, posts, and pages.

Wp Rocket also offers a Critical CSS feature alongside many other Core Web Vitals optimizations.

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

Perfmatters 20% OFF Coupon: WPALPHA

Dequeue 100% unused CSS from Woocommerce that you’re not using after checking all elements. Use Asset Cleanup or Perfmatters. Both 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.

To better assist you with removing your unwanted css or js, change the Assets List Layout to “grouped by size”, which will list assets by size.

Dequeue the unused CSS, enabling ‘unload on this page’.
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 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.

Set up Jetpack and enable their free CDN feature to speed up Woocommerce images. Follow the steps below to achieve that:

Install Jetpack, you need a wordpress.com credential.
On the Performance tab, enable Site Accelerator, but only images. Enable Lazy loading.

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 Cloudflare APO

Cloudflare currently offers Automatic Platform Optimizations (APO) for $5/month, and it caches the HTML of your WordPress website. This is possible due to Cloudflare Workers that cache dynamic content.

Cloudflare APO is compatible with WP Rocket* and many other plugins, check the compatibility.

*Cloudflare APO cache must be manually purged on every Wp Rocket change.

Optimize DOM by avoiding page builders

Consider a theme that has a mobile-first CSS approach and 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 website features, use it wisely.