🔥 🥳 Get your Wordpress Pagespeed optimized today for $99 🔥 🥳 Conditions apply.

Top 6 ways to speed up a slow Woocommerce site

Last updated on October 15, 2021 | By

You found your product-market fit and starting to seeing 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.

How to identify the causes of a slow Woocommerce

Lost factors might influence and slow down the website speed. The main and most common factor of speed instability may include:

  • Slow server; in that case you may consider a server or hosting updgrade.
  • High server usage – your website assets are hitting the server quote limit, and thus you’re experience slowness; you may consider a complete optimization using the tips in this post.

How to know what is slowing down my Woocommerce backend

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.

screenshot 1
Remove Query Monitor plugin after finishing the check.

Best 5 ways to improve my Woocommerce speed

After checking what plugins are consuming resources, and what is needed for your Woocommerce, you may advance to fine-tune your overall website front and back-end using our 7 best optimization tips.

Delay marketing plugins

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

To delay an unused javascript for 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 Javasccript 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 works with any cache plugin (e.g. WP Rocket, WP Fastest Cache, W3 Total Cache).

To remove unused css from Woocommerce using Asset Cleanup, follow the steps below:
  • 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 them

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 wordpress.com 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 being used to store the image URL or an id, class from the image.

Setup WP Cloudflare Super Page Cache plugin to use Cloudflare with Woocommerce

WP Cloudflare Super Page takes the hard part of setting up Cloudflare rules for Woocommerce and lets you benefit from Cloudflare 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, enable Woocommerce Integration.

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

Get a Core Web Vitals Boost

Send us your request!

Leave a Comment