Woocommerce is a very popular WordPress plugin, nearly 50% of all E-Commerce websites use it. Problem is, its slow, can it be made faster?
In order to measure the loading speed of my woo powered site, I firstly needed to measure how fast the pages load. I am choosing to monitor three pages, the home page, a product page and a cart page. I have chosen these on purpose, as the way Woocommerce and WordPress works, means that these three pages could load at very different rates depending on caching software, hosting performance and network latency. All measurements are using the “Fully loaded” time, not the onload time.
Baseline measurements
I did not simply click retry for each page load, I did them in order so I went homepage test, then product page, then cart, then home page etc.
Gtmetrix
Im using on-load time.
Page | 1st Result | 2nd Result | 3rd Result |
homepage | 9.9 seconds | 7.2 seconds | 7 seconds |
product page |
9.7 seconds | 11.6 seconds | 12.8 seconds |
cart |
11.3 seconds | 13.5 seconds | 16.4 seconds ! |
Pingdom
Page | 1st Result | 2nd Result | 3rd Result |
homepage | 7.9 seconds | 5.14 seconds | 9.91 seconds |
product page |
5.99 seconds | 9.75 seconds | 6.98 seconds |
cart |
4.50 seconds | 7.25 seconds | 5.5 seconds |
Why are Pingdoms pages loading quicker? My guess is that I specified using the Stockholm test server, my server is located in Germany, which is closer than the Gtmetrix server which is in Vancouver Canada. To test this theory I changed the test server on Pingdom to San Jose California and was seeing 10+ second load times.
Observations:
The times are quite varied, I knew they would be, that is why I decided on doing three results per page, however I didn’t expect this much variability.
Stage 1 : Woocommerce + W3 Total Cache
Gtmetrix
Page | 1st Result | 2nd Result | 3rd Result |
homepage | 4.4 seconds | 5 seconds | 4.2 seconds |
product page |
8.1 seconds | 5.91 seconds | 7.91 seconds |
cart |
20 seconds ! | 13.5 seconds |
14.3 seconds |
Pingdom
Page | 1st Result | 2nd Result | 3rd Result |
homepage | 7.67 seconds | 1 second | 1.01 seconds |
product page |
8.2 seconds | 3.91 seconds | 1 seconds |
cart |
6.3 seconds | 5.12 seconds | 4.99 seconds |
Generally the times are lower, the Pingdom homepage were loading form the browser cache when times were around 1 second. If I change location or wait, the pages generally get scores of around 4.5 seconds.
Stage 2 : Woocommerce and CloudFlare (W3 deactivated)
This is where I have simply turned Cloudflare on, I have not loaded any page rules, or speed settings, so Im simply using Cloudflare DNS.
Gtmetrix
Page | 1st Result | 2nd Result | 3rd Result |
homepage | 7.9 seconds | 9.1 seconds | 8.2 seconds |
product page |
13.2 seconds | 12.8 seconds | 12.5 seconds |
cart |
8.7 seconds | 10.9 seconds |
10.7 seconds |
Pingdom
Page | 1st Result | 2nd Result | 3rd Result |
homepage | 5.96 seconds | 7.21 seconds | 6.62 seconds |
product page |
5.50 seconds | 3.61 seconds | 8 seconds |
cart |
5.09 seconds | 5.05 seconds | 7.76 seconds |
As we can see the times are similar, maybe even slightly faster than my own server. This is likely due to Cloudflare caching just my static assets and loading them from a Geographically closer server than my own server (located in Germany), thus reducing network latency.
Stage 3 : Woocommerce + Cloudflare Full speed settings
Now I have enabled all the speed settings, including minification, rocket script loading and page rules. In order for Woocommerce cart and checkout to function properly, these pages need to uncached from Cloudflare and generated dynamically, hence they will always load slower.
GTmetrix
Page | 1st Result | 2nd Result | 3rd Result |
homepage | 1.7 seconds | 1.3 seconds | 2.1 seconds |
product page |
8.6 seconds | 5.7 seconds | 6.1 seconds |
cart |
8.4 seconds | 9.5 seconds | 9.5 seconds |
Pingdom
Page | 1st Result | 2nd Result | 3rd Result |
homepage | 7.51 seconds | 4.78 seconds | 3.2 seconds |
product page |
3.34 seconds | 5.62 seconds | 8.62 seconds |
cart |
3.6 seconds | 4.12 seconds | 4.15 seconds |
Stage 4 : Woocommerce + Cloudflare + W3 Total Cache
Gtmetrix
Page | 1st Result | 2nd Result | 3rd Result |
homepage | 3.2 seconds | 1.4 seconds | 2.2 seconds |
product page |
7.2 seconds | 4.5 seconds | 6.4 seconds |
cart |
7.8 seconds | 7.7 seconds | 7 seconds |
Pingdom
Page | 1st Result | 2nd Result | 3rd Result |
homepage | 943ms | 812ms | 854ms |
product page |
861ms | 3.59 seconds | 3.72 seconds |
cart |
3.67 seconds | 3.06 seconds |
4.3 seconds |
Understanding the results
The homepage loads a lot quicker because I removed the ajax call to check the basket content. This is basically where woocommerce checks to see if the basket is full or not, this requires communication to the database. On the homepage, this is not normally required. This simply tweak knocked a few seconds off the home page time.
cart/?wc-ajax=get_refreshed_fragments was taking 4 seconds to load. This shows my hosting is under-powered.
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’); }
By adding that to my functions.php I was able to remove that delay.
W3 Total minification basically seems to break most sites. Try it, but it seems more hassle than its worth. I have disabled it.
I went one step further then and tried to remove all woocommerce related content from non-woo pages. This should make a massive difference to posts and pages.
Devin walker at WordImpress takes the credit for this, more detail can be found here.
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' ); } } }
The result is this:
Home page loads in around 1 second.
Posts/Pages load in around 1 second.
Product page is around 3 seconds
Cart page is around 5 seconds.
Cloudflare can make your site quicker if it is set up properly. Just like W3total cache. Both have the ability to completely break your site if setup incorrectly.
The only way forward from here is improvement in hosting, namely a faster cpu and more ram. I am considering a VPS and Im really interested to see if the page generation times and database calls will be any quicker.
If anyone has any further tips or comments I would love to hear them.
Hi Ahmed you bring a good point since so many queries are dynamic / AJAX in WooCommerce.
One more thing that helps our clients is disable cart fragments:
https://wordpress.org/plugins/disable-cart-fragments-littlebizzy/
So, no slow AJAX calls in the shopping cart. If you are interested, please check it out.
Looks good Chris.
So basically the Cart doesnt update per click, but on a page change?
By doing so you load the page faster by not querying the cart state on page load?
Hi Ahmed, I want to open Cloudflare full speed for my woocommerce site.
Could you tell me how to set page rules for woocommerce? thanks