Last updated - July 8, 2021
More and more online store users are migrating from specific solutions, such as PrestaShop or Magento to WooCommerce, the fantastic plugin to create online stores from WordPress.
The reasons for the decision vary, but for the most part they are due to one of these reasons:
- Need for a more complete solution than just an online store
- Improve store SEO natively thanks to innate WordPress benefits
- The ease of WooCommerce setup and expansion
- The smallest learning curve if WordPress is already used as another plugin
The lowest cost of improvements, as there are more than 1,000 free plugins to improve WooCommerce features, while for other systems any add-on (module) can cost between 20 or 250 euros on average
And I think there is no question about the advantages of WordPress SEO and any associated products, but there is another element that also greatly influences the positioning: the loading speed.
This is especially important in an online store, where a store that loads products quickly makes the difference over another that is slow.
SEO is important to attract users to our online store, but if they do not buy later because our store crawls and takes time to show the products, the image will be poor and will affect sales, negatively.
Consequently, it is important, almost vital, to guarantee the fast loading of our online store. And beyond the general advice to speed up WordPress, we should also apply specific measures for our store, in this case WooCommerce.
And some features that abound in WooCommerce are the scripts and styles of the store. So it is important to offer an easy and professional experience of our eCommerce. But that if it is not controlled, it can slow down the web enormously due to the amount of them used.
So an action to improve the loading of our store with WooCommerce is to optimize the loading of scripts and styles.
Issues to consider before starting:
- Do you have any element on your website that depends on WooCommerce scripts other than WooCommerce pages (cart, store, payments, etc.)? I mean a link to the cart in the header, or sidebar widgets scattered across the web.
- Do you have a testing environment? Since it is not convenient to do experiments in your store live.
- You should not be afraid to edit your theme files and code.
If you are clear about these statements, we will start by taking a look at what scripts we can remove from areas of your website that are not exclusively WooCommerce.
What WooCommerce Scripts Can We Remove?
Open your WordPress site with WooCommerce installed and active. Take a look at the code and you’ll see a bunch of WooCommerce-specific JavaScript and CSS files as well as meta tags and a bunch of WooCommerce related parameters.
Take a look at this screenshot of a WooCommerce store to know what we are talking about:
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
Styles
- woocommerce.css
- Lightbox styles (such as pretty photo, fancybox and others)
- WooCommerce custom CSS
… Plus additional CSS, depending on your installation.
As you have seen the list is not to be taken as a joke. All these scripts and styles increase the loading time of your website and it goes without saying that a slow website achieves less sales as well as less income.
The Code that Will Optimize the Scripts of Your WooCommerce
To remove the load of all WooCommerce scripts on non-WooCommerce pages you should use the wp_dequeue_style function.
The following code should be added to the end of the functions.php file of the active theme in your WooCommerce store, not in a plugin:
Once you have added the code, check the code of your non-WooCommerce pages. You should see that all WooCommerce styles, scripts and meta tags have disappeared, and everything should go much faster. In several tests it has been proven that it reduces loading times by 2 or 3 seconds (at least).
It is important to look at the conditionals that the code uses:! is_woocommerce () &&! is_cart () &&! is_checkout (). If you need to load WooCommerce scripts on your website outside of the payment and store pages, you can easily modify this script to adapt it to that specific situation. For example, if you also want to load the WooCommerce scripts on the cover of your website, you should add the condition! Is_home.
Conclusion
If you use WooCommerce, it is vital to take optimizing, its performance and loading times. It is important to apply rules to improve the speed of WordPress installation as a whole. But if you really want to sell products and offer a good online experience, you should take optimization of the store seriously.
There are many scripts and styles that overload a website. In this case, a smart strategy will improve the browsing experience of your visitors and your sales.
