Woocommerce – Does Cloudflare make it faster?

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 !

 

 

Homepage : Embarrassingly slow
Cart Page : 11 seconds? Disaster.
Product page, 11+ 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.

Ahmed Hilmi

Ahmed Hilmi

Ahmed is a contributor for Medina minds. He has also written the book Shield of the Believer

3 thoughts on “Woocommerce – Does Cloudflare make it faster?

  1. 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?

  2. 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

Leave a Reply

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