Cloudflare Page Rules for WordPress

As I mentioned in my earlier post, no one likes to wait for websites to load these days, therefor we must do everything possible to ensure our website loads as fast as possible. I have enabled redis on my website, added expiration headers and now recently I started using Cloudflare so I could have some of the static assets served by my website cached on Cloudflare edge servers.

How does Cloudflare work?

Cloudflare is one of the worlds largest Cloud network platforms. Their edge servers sit between your origin web server and rest of the internet. This allows Cloudflare edge servers to cache data and thus reduce calls to your server.

Cloudflare also protects your website by blocking threats and it limits abusive bots and crawlers from wasting your bandwidth and server resources. Read how Cloudflare works.

Lets get started

In this post I am going to show how easy it is for you to be able to configure ‘Cloudflare Page Rules’ to enable edge cache. There are plugins available for you do to this, but since I am more hands on I prefer not to add a plugin unless I really have too.

At the time of publishing this post, under the free plan, Cloudflare allows us to add three page rules for free. I am going to setup three rules that will work with WordPress and help take some load off our server for static assets. You can buy additional page rules from Cloudflare or change your plan if your needs re not met with the rules I am going to show here.

Steps

Login to your Cloudflare account and navigate to the Caching page. Make sure on this page the ‘Caching Level’ is to set to standard and that the ‘Browser Cache Expiration’ is set to a high time period or to ‘Respect Existing Headers’. I prefer to use this option because I have set custom Expiration Headers on my Apache Web Server. See this post for setting this on your Apache web server.

Cloudflare cache
Cloudflare cache

Next navigate to the Page Rules link. As you can see here, I have already setup my rules. Don’t worry, I will guide you to setup each of these three rules that you see in the image below.

Cloudflare Page Rules
Cloudflare Page Rules

The Cloudflare page rules are applied in order that they are listed on the page. The moment a rule is matched to a URL, that rule gets applied. All subsequent rules are ignored.

Page rule for wp-admin
Page Rule for wp-admin

The first rule we will set up is for the admin URL wp-admin*.

  • Set the ‘Browser Integrity Check’ to On.
  • ‘Browser Cache TTL’ to 30 min – This controls how long resources cached by client browsers remain valid.
  • ‘Always Online’ to Off – This rule should be set for pages that you never want to cache data for.
  • ‘Security Level’ to high – This determines how high is a threat from the visitor and if the visitor should see a challenge page.
  • ‘Cache Level’ to Bypass
  • ‘Disable Apps’ – This turns off all Cloudflare apps.
  • ‘Disable Performance’ –
  • This turns off other performance related features from Cloudflare like Auto Minify Rocket, Mirage and Polish.

The second rule is for pages when you run a preview of your page before publishing. You want to make sure that the preview pages are not cached and have higher security. The set up is same as the one done before.

Cloudflare rule for content
Cloudflare rule for content

The last rule will allow assets server from the wp-content folder to get cached on Cloudflare Edge servers.

  • Set the ‘Cache Level’ to Cache Everything
  • ‘Edge Cache TTL’ to a day – This will cache all files matching that URL to a day in Cloudflare edge server.

If you wish to save even more on bandwidth, you can extend the ‘Edge Cache TTL’ to a longer period. The downside to this is that those files will not get refreshed for your users until either the cached item becomes stale or you do a purge on Cloudflare for those files.

Keep in mind though, unless you are changing themes or fixing images or making extensive changes to Javascript you should be good with a longer cache period. The choice is yours.

Further reading

Photo Credit

unsplash-logoChris Liverani

Leave a Reply