Best 8 ways to speed up Woocommerce

Updated on January 2, 2023 | By

Woocommerce can be viewed by many as a slow alternative to other ecommerce platforms, but it can be as faster as them if you take a few actions and optimize its speed.

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

Delay marketing and non-essential plugins’ Javascript till user-interaction

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 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:
image 7

Click here for 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.

Improve Woocommerce backend

When running a Woocommerce store, the backend is as important as the frontend. The many queries your userbase will make when navigating the site to shop something needs to be fast and depends if you have a healthy database.

Cleaning up the database of junky queries will make the database healthier. Use Advanced Database Cleaner or Scalability Pro to improve your Woocomemece backend.

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.

query monitor
Remove Query Monitor plugin after finishing the check.

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. 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.
image 9
  • 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.
image 10
  • 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.
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 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 here.

*Cloudflare APO cache needs to 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.

image 6
Elementor Optimize DOM feature

Consider 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. Check Litespeed hosting and Cloud partners here.

Get your WordPress Core Web Vitals Optimized!

Leave a Comment