WooCommerce is one of the popular plugins to make your WordPress site into an online store. Most of the popular themes offer integrated store feature with the help of WooCommerce plugin. We also use WooCommerce on some of our sites. Recently when we did a page speed check on GTmetrix and pingdom, we found the the component “wc-ajax=get_refreshed_fragments” was taking about a second to load. After analysis we found that on most other cases it even takes 5 to 10 seconds for the page to load. If you are having page speed issue with WooCommerce Ajax calls then here are the solutions to fix the issue for different scenarios.
Fix WooCommerce AJAX Issue
We have explained fixing the issue using custom code snippets as well as with plugins. You can first understand the issue and choose the solution that works for your site.
1. What is wc-ajax=get_refreshed_fragments?
It took sometime for us to understand actually the refreshed fragments in the page speed chart is called from WooCommerce plugin. As our site was hosted on SiteGround Cloud VPS, the impact was less and the WooCommerce Ajax call was taking around a second. If you are hosting on a shared hosting like Bluehost, then you may notice longer delay in page loading somewhere from 3 to 10 seconds.
Below is the screenshot from pingdom showing the long waiting time for loading “wc-ajax=get_refreshed_fragments” on the page. You can also see this script will be listed under a render blocking issue in Google PageSpeed Insights tool and find it under waterfall chart in GTmetrix.
Basically WooCommerce attempts to collect the shopping cart details by calling the script and takes long time to complete the task. The plugin get the uncached cart details on every page to show the latest cart items by calling the admin Ajax. You can see the script something like below on each page of your site:
<script type='text/javascript'>
/* <![CDATA[ */
var wc_add_to_cart_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%","i18n_view_cart":"View Cart","cart_url":"http:\/\/localhost\/shop\/cart\/","is_cart":"","cart_redirect_after_add":"yes"};
/* ]]> */
</script>
This is on the localhost environment and you should see the code with your own URL.
2. Admin Ajax Calls and Page Loading
WooCommerce uses this cart fragmentation admin Ajax call to update the items and total in the cart without refreshing the page. Calling admin Ajax on every page will delay your page loading time considerably and also consume high server resources. The other issue is that the plugin does this action even on a page where there are no shopping cart or product related details.
The above screenshot shows the problem exists on “About Us” page where there are no WooCommerce components available. So, removing the shopping cart on the page will not help in improving the page load speed. What we need is to disable the cart update where there are no shopping carts or products displayed.
Related WooCommerce Article:
- Beginners guide to WooCommerce setup in WordPress.
- Definitive guide to improve WooCommerce SEO.
- Migrate WooCommerce store from one site to another.
- How to make WooCommerce work with W3 Total Cache plugin?
- Fix slow WooCommerce store and improve page loading speed.
- Fix mobile responsive issue with WooCommerce and WP Rocket.
- How to completely delete WooCommerce from WordPress installation?
3. How to Fix the Issue with wc-ajax=get_refreshed_fragments?
The issue needs to be fixed by dequeuing the script by modifying your theme’s functions.php file. You can modify the functions.php through WordPress admin panel or using FTP. Instead of modifying functions.php file, create a child theme and add additional functions in the child theme. This will help you to retain the changes when you update the theme. There are three options for dequeuing the WooCommerce Ajax cart fragmentation script.
- Disable only cart fragmentation on front page of your site
- Deactivate only cart fragmentation on front page and posts
- Disable all WooCommerce styles and scripts on all pages except shop pages.
Let us discuss all three options in detail, do only one thing required for you.
3.1. Disable Cart Fragmentation on Front Page
In WordPress admin panel, navigate to “Appearance > Editor” and locate the functions.php file. Add the following code at the end of the file.
/** Disable Ajax Call from WooCommerce */
add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_cart_fragments', 11);
function dequeue_woocommerce_cart_fragments() { if (is_front_page()) wp_dequeue_script('wc-cart-fragments'); }
It should look like below on the editor, once pasted the code click on “Update File” to save your changes.
If you want to use FTP, then login to your server using FTP account. Go to “/wp-content/your-theme/” and find the “functions.php” file. Edit and add the above code at the end of the file and upload the modified file back to server.
Once the file is updated, navigate to “WooCommerce > Settings” menu and go to the “Display” section under “Products” tab. Enable the checkbox against the option “Redirect to the cart page after successful addition“.
This will help the customer goes to the main cart page instead of waiting for long time after the item is added into the cart. Otherwise though the item is added, your shopping cart may not show the updated details when you are on the same page as the cart fragmentation script is disabled.
3.2. Disable Cart Fragmentation on Front Page and Posts
The above code will disable the cart fragment script only on the static front page. If you want to disable the script on all posts then try adding the below code in your theme’s function.php file.
/** Disable Ajax Call from WooCommerce on front page and posts*/
add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_cart_fragments', 11);
function dequeue_woocommerce_cart_fragments() {
if (is_front_page() || is_single() ) wp_dequeue_script('wc-cart-fragments');
}
3.3. Disabling All WooCommerce Styles and Scripts Site Wide
WooCommerce is a resource intensive plugin which may take your server resources for loading all relevant stylesheets and scripts. If you have few products with hundreds of thousands of blog posts then it make sense to dequeue or disable all WooCommerce relevant stuffs on the blog posts. In other words you can only allow WooCommerce scripts on shop relevant pages so that all other pages will load faster.
Add the below code in your functions.php file based on the Github gist. The code will first check whether WooCommerce plugin exist on your site and then disable the styles and scripts on all pages except product, cart and checkout pages. This will help to remove “wc-ajax=get_refreshed_fragments” calls from all posts/pages except WooCommerce related pages.
/** Disable All WooCommerce Styles and Scripts Except Shop Pages*/
add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_styles_scripts', 99 );
function dequeue_woocommerce_styles_scripts() {
if ( function_exists( 'is_woocommerce' ) ) {
if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
# Styles
wp_dequeue_style( 'woocommerce-general' );
wp_dequeue_style( 'woocommerce-layout' );
wp_dequeue_style( 'woocommerce-smallscreen' );
wp_dequeue_style( 'woocommerce_frontend_styles' );
wp_dequeue_style( 'woocommerce_fancybox_styles' );
wp_dequeue_style( 'woocommerce_chosen_styles' );
wp_dequeue_style( 'woocommerce_prettyPhoto_css' );
# Scripts
wp_dequeue_script( 'wc_price_slider' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-add-to-cart' );
wp_dequeue_script( 'wc-cart-fragments' );
wp_dequeue_script( 'wc-checkout' );
wp_dequeue_script( 'wc-add-to-cart-variation' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-cart' );
wp_dequeue_script( 'wc-chosen' );
wp_dequeue_script( 'woocommerce' );
wp_dequeue_script( 'prettyPhoto' );
wp_dequeue_script( 'prettyPhoto-init' );
wp_dequeue_script( 'jquery-blockui' );
wp_dequeue_script( 'jquery-placeholder' );
wp_dequeue_script( 'fancybox' );
wp_dequeue_script( 'jqueryui' );
}
}
}
Warning: Remember to add only one of the code block from the above three options. Don’t add multiple or all codes in your functions.php file. When you disable the scripts side wide, also disable “Enable Ajax add to cart buttons on archives” option available under the “Display” section of “WooCommerce > Settings” menu.
4. Using Plugins to Stop WooCommerce Admin Ajax Calls
If you are not familiar with modifying theme’s file or creating child theme then there are plugins to do the work for you. The first option is to use the premium WP Rocket plugin. You can purchase WP Rocket, install and activate the plugin from your WordPress admin panel. This plugin does not have any special settings for WooCommerce. Simply activating the plugin will disable WooCommerce cart fragmentation on all pages of your site. It works with the logic of checking whether your page contains Ajax fragment call in the source code.
If yes, then it will check the cart is empty when loading the page. When both these conditions are fulfilled, WP Rocket will cache the page in transient and serve when the page is loaded next time. If you find any problem, you can use the helper plugin to deactivate caching of Ajax fragments.
Plugins like W3 Total Cache also offers fragment cache as a premium extension. However, you need to pay $99 yearly subscription for getting premium features. Instead, WP Rocket costs $49 per year with easy setup and you can also get 10% discount by subscribing to their newsletter.
5. Testing Page Speed
If you have manually added the code, make sure to purge the cache of your caching plugin and purge varnish caching on server if available. Similarly, clear all levels of caching if you have installed WP Rocket plugin. After that, check on Google PageSpeed Insights and you should not see the “wc-ajax=get_refreshed_fragments” script under render blocking JavaScript section. You can also easily get 100 score in mobile and desktop when the blocking time is 0 ms.
Also on pingdom, WooCommerce script calling “wc-ajax=get_refreshed_fragments” should not be visible under “File Requests” section. Your page speed score should be increased notably after disabling the WooCommerce Ajax script.
6. Stopping WordPress Heartbeat API
WooCommerce plugin adds many attractive dashboard widgets showing live sales and statistics. However, that will cost you high by dragging your site’s loading speed. The dashboard widgets update the content dynamically using admin Ajax calls similar to cart fragmentation in WooCommerce. This is done with the help of standard WordPress API called heartbeat API.
Generally we don’t recommend to have those dynamic widgets on the dashboard. You can simply disable the admin-ajax calls or WordPress heartbeat API to reduce the server load and improve the page loading speed of your WordPress site. Plugins like WP Rocket can help to disable heartbeat API from your admin panel.
Final Words
WooCommerce is one of the easy ways to build your online store in WordPress. But online stores need certain basic functions like dynamic cart update. In our experience, what we have seen is that 90% of the WooCommerce users sell simple digital goods. Their store is merely an add-on to the large blog or content site. In this case, we strongly recommend to disable the admin Ajax calls so that all other pages on the site will load faster without affecting user experience.
If you have full fledged store then you will need the cart fragmentation feature to dynamically update the cart items without refreshing the page. In such case, ensure to have quality hosting server along with caching plugins like WP Rocket or W3 Total Cache which has premium option for caching page fragments for improving page speed.
81 Comments
Leave your reply.