WordPress Slow? The Best Cloudflare Page Rules For WordPress

4.91/5 (11)

Making Cloudflare and WordPress Work Together

Almost all bloggers who use WordPress know that a fast and secure website is critical.

The first step is to use a reliable and fast web hosting provider or managed WordPress hosting.

I know that many authors are now using WordPress to help in book promotion.

But the file sizes of large book covers and images can be resource hungry along with some social media and auto-posting plugins, so speed should be a priority.

Advertisements

 

The best four ways to reduce loading times for a WordPress site

  • Use a caching plugin
  • Minify CSS and Javascript
  • Use lazy loading for images
  • Use CDN services

There are thousands of articles, reviews and opinions online regarding the choices of these four key speed elements.

So I won’t go into any depth here in this article about these ideas.

I will focus mainly on how to get WordPress to run smoothly and fast with your Cloudflare account.

However, before I go on to setting up Cloudflare for WordPress, I should preface my advice by indicating what speed tools I am currently using on my site.

  • For caching, I use W3 Total Cache for browser and page caching.
  • For CSS and Javascript minification, Autoptimize has proven to be very reliable for me for years now.
  • For lazy loading, I am using A3 Lazy Load.

All three are the free versions available form the WordPress plugin repository and work superbly well together.

It is possible to minify with W3 Total Cache and it works perfectly.

But I find that Autoptimize is a little better because I don’t have to make any setting adjustments when I add or delete plugins.

While these three plugins alone reduce page loading times extremely well and often result in near 100% results on some speed test sites, there remains a problem of distance.

My site server is in Geneva in Switzerland and it is very fast and reliable, especially for site visitors from Europe.

But for say, my US visitors, there is a long distance for the site data to travel.

This results in slightly slower page loading times, which affects user experience, in the US, Canada, South Africa and Australia.

 

Using a CDN service solves the distance problem.

Cloudflare network map

Cloudflare is well known as a reliable CDN (Content Delivery Network) provider that is used by bloggers and enterprise clients.

Advertisements

Cloudflare support is good, and 95% of the questions you might have can be answered from the official Cloudflare knowledge base.

In brief, once you change your IP addresses, Cloudflare works by storing your static files on local servers.

Your data can then delivered much faster from the Cloudflare cache to site visitors in any location because more than 80% of any one of your web pages consists of static data.

However, it does not store static HTML by default, but this is no big deal.

There are many choices for CDN providers, but Cloudflare offers three huge advantages.

  • One: The network is worldwide.
  • Two: It can protect against hackers.
  • Three: It is free.

This makes Cloudflare the logical first choice for bloggers wanting to use a free CDN with no rate limit to improve their site performance.

Setting up a WordPress site on Cloudflare is a straightforward process and there are a lot of in-depth articles explaining the process.

Here is one article example explaining the basic Cloudflare setup steps.

Basically, you will be transferring your DNS servers from your web host to Cloudflare servers.

The only tip I would add is that the WordPress Cloudflare plugin is not really necessary. But if you want to use it you will need to use your Cloudflare API key to connect.

It is just as easy to start your installation from the Cloudflare website and then complete the setup steps and add web applications from the Cloudflare desktop page and admin area. But the choice is up to you.

 

Now you have a very fast site for all your worldwide visitors.

After setting up Cloudflare, your site is now much more secure and faster loading.

When you check your site and run a few speed tests with Google PageSpeed, GTmetrix or Pingdom, you will see how fast your site is after deploying Cloudflare.

Everything is working, your site is lightning fast, you are pleased, so all is great with the world.

Site Speed

Except! What’s going on with my WordPress admin page?

When you deploy Cloudflare, wp-admin or your desktop admin page, little problems might start to appear.

The most common issue is slow loading. Or on rare occasions, perhaps you might even get a white screen.

You could also suffer from incomplete loading of your WordPress editor and sometimes you could have javascript errors.

After a few days, the problems usually tend to get worse.

I nearly tore my hair out trying to resolve these annoying issues. Normally it is only a matter of searching on Google to find a WordPress fix, but this one eluded me for a while.

In the end, the solution came from two pieces of information that I glued together after my frustrating hunt through probably hundreds of advice articles.

The problem is that Cloudflare, WordPress and your admin pages are all using different and competing cache settings.

But don’t worry because the solution is quite easy. Once you set your Cloudflare pages rules and cache, WordPress will be like new again.

Cloudflare just needs a couple of special setup tweaks to work with WordPress.

Advertisements

How to get WordPress admin pages to work with Cloudflare.

There are two simple steps involved in solving your WordPress slow admin page problems on Cloudflare.

First, and most importantly, you have to change one automatic cache expiration setting in Cloudflare.

This is where all the admin page problems start from because you need to use your WordPress cache settings and not the default Cloudflare settings.

The default settings are for a couple of hours of caching. This is why the admin pages lag so badly. You definitely want to cache your site, but you don’t want to cache any of your back end admin pages.

You can fix this very easily by changing one cache setting in Cloudflare.

How to change the cache setting

Login to your Cloudflare account. Then on the Cloudflare dashboard, click on the menu item, Caching.

Cloudflare Settings

Now, change the Browser Cache Expiration setting to Respect Existing Headers from the drop-down selection box.

cloudflare cache settings

Your cache is now working correctly. The cache for you admin pages is now controlled by WordPress and not by Cloudflare.

 

Add your Cloudflare page rules

Next is to fine-tune your admin page performance.

Here are the best Cloudflare page rules for WordPress.

Go to Page Rules to set up your page rules.

Cloudflare Settings copy

You will need to add three rules. As you only get three rules with a free Cloudflare account, it is important to use them wisely.

 

Add your first rule for your wp-admin page. You can copy the rule below but edit it to your own site URL.

*example.com/wp-admin*

Cloudflare Rule One

Then add two settings. Cache Level and Disable Performance.

You can set the cache to Bypass on all of the three rules. There are other settings for Edge cache ttl and Browser cache ttl, but you don’t need to use these settings.

 

The second rule you need to add is to stop any interference with your editor and draft preview function.

*example.com/*preview=true*

Cloudflare Rule Two

 

Lastly, you want to make sure Cloudflare doesn’t affect your login page.

*example.com/wp-login.php*

Cloudflare Rule Three

 

Now you need to set the order of your rules as in the image below to make sure they load in the correct order.

Cloudflare Rule Order

To set the order, pull up or down using the arrows on the left of the rule box.

That’s all you need to do.

You can add two more settings to all three of your page rules if you find your performance is still a little slow.

If you are using Cloudflare’s Rocket Loader, it is a good idea to stop it working on your WordPress backend. You can do this by adding Disable Apps and Disable performance.

cloudflare page rule extra

Now you will have all your backend WordPress admin pages behaving perfectly again.

Conclusion

Using a CDN is well worth considering for any WordPress site.

Not only for extra site security and to reduce page loading times, but also to ensure that your site visitors have a positive experience when they visit your site.

Google has made it clear that it prefers fast loading websites and has made page speed a strong ranking factor. So this is another very important reason to think about upgrading your site with a CDN.

Maintaining your blog and ensuring it is working for you is always work in progress. Keep looking for small improvements you can make to your blog to increase your visitor satisfaction and return rate.

 

Connect

Derek Haines

Webmaster and Writer at Just Publishing Advice
A Cambridge qualified CELTA English teacher and author of 18 books with a life long passion for publishing in all its forms.
I started my working life as a lithographer and then spent over 30 years in the printing and publishing business.
Originally from Australia, I moved to Switzerland 20 years ago. My days are spent teaching English, writing and wrestling with technology while enjoying my glorious view of the Alps.
Derek Haines
Connect

How helpful was this article?

1 2 3 4 5

Derek Haines

A Cambridge qualified CELTA English teacher and author of 18 books with a life long passion for publishing in all its forms. I started my working life as a lithographer and then spent over 30 years in the printing and publishing business. Originally from Australia, I moved to Switzerland 20 years ago. My days are spent teaching English, writing and wrestling with technology while enjoying my glorious view of the Alps.

5 thoughts on “WordPress Slow? The Best Cloudflare Page Rules For WordPress

  • May 28, 2018 at 10:12 am
    Permalink

    Thanks a lot
    i used your method to fix new post editor buttons disappeared problem

    Reply
  • January 27, 2018 at 11:29 am
    Permalink

    Thanks for the great post !
    In the cachin tab, what should we put in the caching level mode ? Standard, Ignore Query String, No Query String ?
    In page rules, when we choose Cache level : Everything, We face problems with refreshing and displaying last post added. Which kind of page rules can prevent this problem ?
    Thanks you for your precious Post !
    Regards

    Reply
    • January 27, 2018 at 11:36 am
      Permalink

      I use the cache setting “Standard” and all works fine. Don’t use “Everything” in page rules for admin pages.

      Reply

Add Your Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.