If you are using WooCommerce to sell on WordPress you may notice a number of additional scripts loading on all pages of your site. Let’s tell WooCommerce to only load these on the shop pages and improve our page load speed.

woocommerce-thumb

A few items to consider before proceeding:

  • Do you have any elements on your site that depend on WooCommerce scripts outside of the main WooCommerce pages (shop, cart, checkout, etc)? This can be a cart element in your header or maybe some sidebar widgets found across your site.
  • Do you have a testing environment – please don’t cowboy code on your e-commerce site!
  • You should be comfortable editing your theme and code files

If you have all the necessary tools and knowledge in place let’s begin by examining which scripts we are removing from the non-WooCommerce areas of our site.

Which WooCommerce Scripts Are We Removing?

woocommerce-param-junkOpen up your WordPress website that has WooCommerce installed and active. Take a look at the source code and you’ll see numerous JavaScript and CSS files specific to WooCommerce as well as a generator meta tag and a whole block of woocommerce params (see screenshot).

Scripts

  • woocommerce.min.js
  • checkout.js
  • add-to-cart.min.js
  • jquery.cookie.min,js
  • cart-fragments.min.js
  • jquery.blockUI.min.js
  • jquery.placeholder.min.js
  • … MOAR?!

woo-scripts

Styles

  • woocommerce.css
  • Any lightbox styles (prettyphoto)
  • Custom CSS for WooCommerce
  • … possibly additional CSS depending on your setup.

As you can see this is quite the list here. All these scripts can really add some noticeable load time to your site. A slower site leads to less visitors and ultimately less revenue. As well, some site owners may not like a meta generator tag telling more tech savvy users and robots which cart system they are using.

Let’s examine how much additional load WooCommerce is actually adding to my specific test site.

Before WooCommerce script optimization: 

Pre WooCommerce Optimization

I ran my site through webpagetest.org to see the results without any script optmization. You can see from this test that the site is roughly 1.6 MB with 75 requests full loaded. This site is not on a powerful host so it’s load time right now is sub-par.

After WooCommerce script optimization:

Post WooCommerce Optimization

We went from 7.2 seconds to 5.8 seconds load time… not bad.

You can see that after optimization the requests have fallen by 9 from 75 to a total of 66 fully loaded. As well, the total bytes has also fallen and the site in now just about 1.5 mb is size. The number that strikes me though is the total load time dropped nearly 1.4 seconds.

The load time, while still not optimal for this specific site, is better than it was without any script optimization and modifications. The best part of it, WooCommerce functions normally, my users will enjoy a faster site, and I hopefully will have some increased revenue.

The Code to Optimize Your WooCommerce Scripts

The following code is what I have in place to dequeue WooCommece styles and scripts. Since this is a theme specific functionality I recommend adding this to your theme’s functions.php file over a separate plugin.

Add the Following Code to Theme functions.php

… here’s the Gist that the code above is pulling from.

Once you have added the code refresh the source code for your non-WooCommerce pages. You should see all the scripts, styles and meta tag disappear. It should also load noticeably faster. If you need specific scripts like jQuery UI or FancyBox then you can comment out the specific lines dequeuing those scripts.

Take notice of the conditional statements we are using: ! is_woocommerce() && ! is_cart() && ! is_checkout(). If you need to load WooCommerce scripts on your site outside the shop and checkout pages then you can easily modify this script to work for your specific situation. For instance, if you wanted to also load WooCommerce scripts on your homepage you would add !is_home to the conditions.

Wrapping it Up

Depending on how you are using WooCommerce it can be wise to take a hard look at optimizing it’s output. I’m a stickler for site loading and when plugins lump all their styles and scripts out globally it gets to me. I want my scripts and styles as clean as possible. I would love if Woo could further optimize their output. I understand that there are so many use cases out there that this may not make sense.

I’m hoping this code has proved helpful for your site and brings down your page load speed. A special shout out goes to Greg Rickaby for his original code found in his article title Remove WooCommerce Styles and Scripts that I’ve slightly modified and improved.

Devin Walker is a San Diego-based WordPress Developer and enthusiast. He is the author of several popular and highly-rated WordPress themes and plugins. In his free time he enjoys playing Golf and traveling.

Follow Devin:

There are 55 comments

Join the Discussion

Your email address will not be published. Required fields are marked *