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:

57 Responses to “How to Load WooCommerce Scripts and Styles Conditionally to Improve Page Load Speed”

  1. Kaspars

    It is much better to combine and minify all scripts and styles into single file (one for each) and load them on every page because (a) multiple requests of any file size are much slower than one request of a larger file size, and (b) all subsequent requests will be returned from the browser cache thus being almost instantaneous.

    Reply
    • Devin Walker

      I totally agree with that. Perhaps a follow up on how we can do combine WooCommerce scripts with our site’s into one package?

      Reply
      • Kaspars

        I have a plugin called Minit which does the concatenation and enables third party plugins to do the minification via a simple filter. It also async loads third party scripts (analytics, fonts, etc). However, it isn’t available on WordPress.org because it requires all styles and scripts to be properly enqueued via WordPress API.

        Reply
  2. Richard Osborne

    If you still want the drop-down cart contents to work on other pages, remove the following files from the exclude list: woocommerce, wc-cart, wc-cart-fragments. Worked for me!

    Reply
  3. The Church State Guy

    Does this need updating for WC2.1? Seems like a few things changed but I haven’t had a chance to take a detailed look yet.

    Reply
    • Devin Walker

      I haven’t had a chance to check this compatibility with WC 2.1+ yet… They did change a lot of items with the enqueue process so I’m guessing it will need updating.

      Reply
  4. timeaftertimeafter

    Update. This is all I needed to dequeue:

    wp_dequeue_style( ‘woocommerce-layout’ );

    wp_dequeue_style( ‘woocommerce-smallscreen’ );

    wp_dequeue_style( ‘woocommerce-general’ );

    wp_dequeue_script( ‘wc-add-to-cart’ );

    wp_dequeue_script( ‘wc-cart-fragments’ );

    wp_dequeue_script( ‘woocommerce’ );

    wp_dequeue_script( ‘jquery-blockui’ );

    wp_dequeue_script( ‘jquery-placeholder’ );

    Reply
  5. Skoad

    So should this go into wp-content/themes/THEME/functions.php? or THEME/code/functions.php? Seems to give me a 500 error whichever way I do it. =/

    Reply
  6. ahmed elhafez

    Greatttttttt Thank you very much it works finally and my page speed drop down 2 sec ๐Ÿ™‚

    But please remove “<?php " from the code because it braked my site until i realized that i copied with the code ๐Ÿ™‚

    Best greeting!

    Reply
    • Devin Walker

      Remove what? Your text got cut off…

      Reply
      • ahmed elhafez

        lol i don’t know why? i mean the open php “tag” it broke my site when i removed, the code works great and the issue finally fixed. Many people don’t know that ๐Ÿ™‚

        Thank you again.

        Reply
  7. Matthew Ogborne

    Holy moo!

    That’s just made a massive difference 12-13 seconds to 6 to 7 sec consistently!

    Thank you,

    Matt

    Reply
  8. uiueux

    It seems that the code can not work in the page that inserted Woocommerce shortcode.

    Reply
  9. Dogsized

    Thank you so much! I went from 5.90s to 4.18s

    Reply
  10. Efrain Rivera

    Thank You for this fixed. My site went from 7 to 8s load time to less than 2.

    Reply
  11. Michael Wilhelmsen

    This code is brilliant. Page load speed dropped down 2-3 sec ๐Ÿ™‚

    Reply
  12. Mindaugas Vaiciunas

    Could someone tell where I have to paste the code? Because if I paste at the top of function.php my site goes down.

    Reply
    • yratof

      Put it at the end of your functions.php, make sure you remove the <?php at the beginning of this snippet though!

      Reply
      • Mindaugas Vaiciunas

        Thanks for your answer. But remove what?

        Reply
        • yratof

          Sorry, it seems that disqus removes the code. Remove the opening php tag at the start of the code.

          < ? php

          Reply
          • Mindaugas Vaiciunas

            I have tried what you have suggested but the site went down anyway. Any suggestions

          • yratof

            put it at the bottom before ?> in functions

          • Mindaugas Vaiciunas

            Did that since beginning. Not sure where is the problem.

  13. Damian Gonzalez

    Thanks Devin, this worked great after removing the “< ? php "

    Reply
  14. Jun

    A million thanks Devin! This problem has bug me working for 2 long nights to find a solution. I’m so glad that one minute before i give up, i found your brilliant post. Finally can go to sleep, thanks man! (Pingdom speed drop from 19sec to 4sec)

    Reply
  15. AlanMcCabe

    nice one, been having issues with ‘woocommerce_get_refreshed_fragments’ on non woocommerce pages eating up cpu during peak traffic, removing the scripts should resolve the issue.

    Reply
  16. Sam

    Perfect! Those scripts are super not necessary on all pages! Thanks!

    Reply
  17. rgb4u

    Hi, i try add php script to specific category, by using require_once , without effects, any help? Thank you ๐Ÿ™‚

    Reply
  18. Cyrus

    Thanks Devin! I will have to try this out… I had been struggeling with the bulk of files which are so unneccessary on many pages, reducing load time of the pages.

    Reply
  19. Clara Troubs

    Hi. It looked great, but I’ve put it in the functions.php, without the leading “?php” but it’s giving me loads of errors and crashed the site.

    The most recent error is: Parse error: syntax error, unexpected ‘<' in /homepages/17/d528107104/htdocs/clickandbuilds/LoveFresh/wp-content/themes/CherryFramework/functions.php on line 538

    This is line 538: $theme_name = get_current_theme();

    Please has anyone got any suggestions? Thanks

    Reply
  20. Laurean Vincent

    Oh, this is amazing! This one simple fix took my client’s page load site from 5.42 to 4.01 (Pingdom). THANKS!!!!! Would love to buy you a beer, or coffee!

    Reply
  21. Afaq Shahid

    I guess this code needs to be updated for the latest WooCommerce as its leaving behind the meta name generator as well as some stylesheets as well.

    Reply
  22. Adriano Monecchi

    Great article! It helped me out a lot with my custom woocommerce site. Unfortunately, the theme I use as a base for my site/store has a lot of woo customization files being enqueued on its own, as also I’ve got a few other third party woo plugins I really need to use that simply clutters everything by enqueuing their own files too. I think I’ll have to manage my own way to put all the scripts and styles related to woocommerce out of sight from non woo pages…Thanks for the tutorial anyway!

    Reply
  23. greenwatersports

    Nice work here. Now, we use this, but what do you suggest if we want to then enqueue the scripts for woocommerce pages like normal, but call them from a CDN http://myaccount.cloudfront.net/wp-content/plugins/woocommerce/… instead of http://mydomain.com/wp-content/plugins/woocommerce/

    Reply
  24. The Vendetta

    Hi, I am using woo-commerce for only external/affiliates products. I don’t need cart functionality of anything else on my plugin. Also my site’s response time is very high. So my question is that how do i disable all unnecesarry woocommerce functions which cause high load on my server. Just want to use it as external links

    Reply
  25. Earnie Rhyker

    question: instead of adding this into my functions.php of my theme, can I also your https://gist.github.com/DevinWalker/7621777 into my /wp-content/mu-plugins/ instead ?

    Reply
  26. Stephanie Bertha

    I was growing concerned over seeing ALL these scripts load on pages that don’t even have a product on it (ie. About Us, Contact Us, etc.). This works like a charm!

    Reply
  27. Tony Franco

    Thanks! it worked for the majority! Some still loading:

    – /wp-content/plugins/woocommerce/assets/css/woocommerce-layout.css
    – /wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css
    – /wp-content/plugins/woocommerce/assets/css/woocommerce.css

    Is it possible to join this to the other group?

    Thanks and Regards!

    Reply
  28. TaufanPR

    Hi,
    You said.. “…styles and meta tag disappear.”
    I’m not WP Expert but, my question is:
    Does this affect SEO?
    Thanks.

    Reply
  29. Ali Raza

    Hello,
    Can you please update this code for woocommerce 3.0.0 because stylesheets still loading.
    Regards

    Reply
  30. Greer Pena

    Hello Admin,
    I have also created some similar kind of tools and scripts. he
    You can find them on my website https://goo.gl/9HpQFJ
    Please consider adding some of them in this post. towards

    Reply
  31. Kumar

    Hi Folks,

    How do i create my own function and add this. Pl advice. Or shall i add in theme’s function php file.

    Pl advice.

    Thanks

     

    Reply

Leave a Reply