Web Tech Gadgetry has always been a long time advocate of MaxCDN. That all changed after conducting some clever experiments with CloudFlare’s page rules and their aggressive caching parameters. In this tutorial we will guide you through some CloudFlare page rules for fast loading times on your WordPress blog or website.

Using the combination of a WordPress plugin (yes, this tip only works with WordPress) and some cleverly tailored page rules via CloudFlare’s control panel, we found that we could achieve page loading times equal to or greater than that of having a proprietary CDN. This isn’t to say that there aren’t other CDN options out there that can offer better performance – rather CloudFlare is completely free.

Configuring Page Rules

If you haven’t already disabled caching for the WordPress admin you will probably want to do so now or else you may run into some erratic behaviour. I have posted an example below:

Disable CloudFlare Caching for WordPress Admin

Once you have implemented the above we will now go ahead and configure CloudFlare’s most aggressive cache setting such that all aspects of your site is cached including HTML. As with before I have provided an example below:

CloudFlare Page Rules for Fast Loading Times

Unfortunately doing the above on its own will result in quite a few problems when used in conjunction with a dynamic site. From this point onwards if you were to add a new post, edit an existing post or either if a user were to comment the changes wouldn’t show up until the cache had been purged. This is were a plugin comes in handy.

Installing Sunny

Luckily for us someone has taken the liberty to develop a plugin which will automatically purge the cache when a change is made to your site, whether it be due to a user commenting or a new post being published. The plugin in question is known as Sunny and I highly recommend users of WordPress and CloudFlare install it.

During the setup process you will need to provide a CloudFlare API key – which can be found on your dashboard. Once installed we suggest you configure Sunny as shown below:

Configuring Sunny

That’s it, we’re done. After a short period of time, CloudFlare will take a snapshot of all of your blog’s pages. From now on anyone who visits your blog will receive a static version of your site – vastly decreasing page loading times. In other words CloudFlare is more or less hosting your entire site for free! The only drawback of this technique is that from time to time you may need purge the cache manually when making changes to static assets such as JavaScript and CSS files.

Wrapping Up

This page speed tip was based off of my CloudFlare page speed experiment, referencing the performance gains of using CloudFlare and its page rules effectively.

We used the above configuration up until we enabled flexible SSL. As a result we had to use one of our page rules to redirect all requests through HTTPS. Bear in mind that free accounts are limited to just three page rules only – use them wisely.

  • This Page Rules seems new to me & looks interesting. I’m using Cloudflare for sometime & loving it. Have achieved about 1 second load time for a busy WordPress site. The Rocketloader feature is pretty cool.

    • It does seem to work quite well, it’s not perfect but it does lead to some fairly rapid loading times. I’ve fiddled around with Rocketloader in the past, but it always seems to interfere with my plugins, maybe I’ll take another look.

  • Thanks for the post,
    Going to use it on my site

  • Hi Taylor.. I had started using Cloudflare recently.Let me change little bit of setting as you had shown you. website loading time from 13 sec to 4.2 sec already done. If it came under 2 then it will be pretty much good for me.

    • Hi Mansoor, thanks for the comment. We also use the WP Super Cache and Autoptimize plugins to speed up our site even further. I’d recommend taking a look at https://developers.google.com/speed/pagespeed/insights/ to get an idea of what’s slowing your site down.

      • Mansoor Bhanpurawala

        Hi Taylor, thanks for reply and yeah I had check it. I guess I have to use autoptimize plugin. May be it help me..

  • Great write-up! Something else to add is that you can find tutorials for many of the most popular/recommended page rules here:
    https://www.cloudflare.com/features-page-rules/

    And very soon you will be able to purchase additional page rules without needing to change plan type.

    • Hi Ryan,

      Thanks for the comment. I really like the idea of being able to pay for additional page rules without having to upgrade your plan.

  • Thanks for the post Taylor. I wasn’t sure if it would have issues with full SSL with server side HTTP -> HTTPS redirection but it worked a charm. Thanks mate! :D

  • Pingback: Upgrade to PHP 7 on CentOS 6 - Web Tech Gadgetry()