Cloudflare Setup: Secure CDN < 1 Second Load Time!

Pros (+)

  • Highly secure.
  • Blazing fast.
  • It’s FREE!

Cons (-)

  • Quite complex.
  • That’s all!

Everyone wants a fast website, but they forget about security. This Cloudflare Setup guide gives you the keys to a blazing fast and highly secure website – did I also mention it’s for free?

My own personal setup, which consists of Hostinger, Cloudflare and Stackpath is the website equivalent of Tesla’s Ludicrous mode.

Considering it costs me less than $80 a year for shared hosting. $10 a month for Stackpath (my biggest luxury) and Cloudflare is $0 per month, you wouldn’t expect it to be much good, would you?

Well forget the negativity and start believing. 

This technical trio, plus a few old favorites that go into my speed soup, make for a site Superman would be proud of. My homepage scores 0.3 on the WebPage Test Speed Index. Lower is better.

I’ll quickly list my full-blown recipe then get on with the tutorial…

  1. Autoptimize (Fast Velocity Minify is equally impressive).
  2. GeneratePress Premium (free version available).
  3. CloudFlare (free tier).
  4. Stackpath CDN ($10 month). Two CDNs are slower than one, but good for perfect audits.
  5. W3 Total Cache (free version).
  6. Warm Cache (run from a cron job). Resource hungry; only populates local server not CDN.
  7. Asset CleanUp (to delete any redundancies.)
  8. Smush forget compression plugins – use Compressor.io lossy mode for better GT Metrix scores.
  9. CAOS Google Analtics (serves your analytics locally and updates using cron).
  10. Child Theme Configurator – creates a child theme in seconds (can be deleted once setup).
  11. Two Factor Authentication (combined with Cloudflare no need for Wordfence).
  12. Rank Math (lighter than Yoast with more SEO tools).
  13. WPForms Lite (doesn’t load on every page like Contact Form 7).
  14. CM Table of Contents (TOCs are great for SEO.)
  15. Better Search Replace – great for correcting database errors.
  16. WP-Optimize for database cleaning.
  17. UpdraftPlus for backups only if your hosting provider doesn’t do automatic backups.

As you can see, I’ve started off with the essential plugins and services, but from midway onwards the choice is yours. Though my guess is that the majority of WordPress users will benefit from them.

While I don’t want to distract you with unnecessary information, I think it’s a valid point that for the ultimate in website speed, there are many factors at play.

Just like a fast car doesn’t rely solely on its engine; it needs highly-tuned suspension and a reliable braking system. The same goes for building the ultimate WordPress website.

My strategy isn’t the only way, of course. There are plenty of fast websites. What sets my method apart is that it’s lightning fast without breaking the bank.

Cloudflare is the foundation that all my websites are built on.

1. Why Cloudflare?

For the full beans head on over to Cloudflare’s About Us page, but for my diluted offering, here goes…

Cloudflare started out with a mission to prevent email spam.

When they realized that building a content delivery network of their own would help combat spam, that’s what they did. It’s called Cloudflare CDN and it’s one of the fastest of its kind in the world.

WordPress posts and pages are made up of templates – page sections. When you request a page, it has to be put together on the fly – or dynamically as it’s called.

A static page, on the other hand, is already made up. Caching speeds up load time because the browser can grab a static page instead of waiting for it to be put together.

Content delivery networks like Cloudflare and Stackpath help speed things up even more, because they have data centres all over the world. Requests to your site are handled by the nearest data centre.

You can get a detailed explanation over at Cloudflare’s what is a CDN?

2. Cloudflare Security

With WordPress you can check for the bad guys using a resource-hungry plugin like Wordfence or filter them out before they arrive using Cloudflare. 

Both options take time, but I’m sure that Cloudflare’s expensive infrastructure is quicker than my corner of a shared server. Wordfence is great at what it’s supposed to do, weeding out the dodgy traffic, but it does have a reputation as a resource hog.

Wordfence doubles the amount of tables in your database. Each file has its own inode – effectively a space on the hard disk – so you can still reach your hosting account inode limit well before your gigabyte limit.

Cloudflare helps us by offloading CPU intensive tasks from our origin server and avoids breaching the limits mentioned above.

I’ve just removed UpdraftPlus from 8 sites, because Hostinger does daily backups. This helped reduce my inode limit from 22% to 15%. Unfortunately I’d already deleted Wordfence, but it’s safe to say that the saving would have been much greater.

Personally I’ve been running Wordfence on all of my sites, but since I learned how to configure Cloudflare’s Firewall rules Wordfence became all but unnecessary.

Wordfence Report One
Wordfence Report One
Wordfence Report Two
Wordfence Report Two
Wordfence Report Three
Wordfence Report Three
Wordfence Report Four
Wordfence Report Four
Wordfence Report Five
Wordfence Report Five

You can see that the five sites above all had regular attacks until I configured the Cloudflare Firewall Rules. This gave me the confidence to uninstall Wordfence on every site.

Don’t remove your own security plugin until you’ve tested your Firewall Rules!

Throw two-factor authentication in the mix and even if the baddies have your password, they are all but ruined if you have an insurmountable problem like two factor authentication.

To set up 2FA you need to install two apps – one on WordPress and another on your smartphone or Chrome browser extension, if you don’t have a phone.

Google Authenticator is recommended for the Two Factor Authentication app. That’s what I went with and it works a treat. Sign in to WordPress normally then add a six-digit password from your the Authenticator app on your phone. 

Now you’ve had a taste of the benefits, let’s install Cloudflare on your website.

We can configure 2FA once the basics are out of the way. It’s optional, but definitely advisable to do so.

3. Getting Started with Cloudflare

Cloudflare Get Started in Just Five Minutes
Cloudflare Get Started in Just Five Minutes

Cloudflare Get Stared in Just Five Minutes

First of all you need to assess your hosting situation. Hostinger, like many other premium web hosts, are part of the Cloudflare Partner Program. You need to configure your primary site through your host rather than your Cloudflare dashboard.

Then for secondary sites you can add them from your Cloudflare dashboard. However, they won’t become active until you point the domain name servers from your host to Cloudflare’s DNS.

For hosting providers that aren’t affiliated with Cloudflare the process is the same. Just create a Cloudflare account, add a new site on the free tier and adjust your domain name servers.

Once you’ve found Cloudflare’s homepage click on the Sign Up button and then start the process below…

Get Started with Cloudflare
Get Started with Cloudflare

4. Cloudflare Setup: Adding a New Site

Once you’ve completed the Cloudflare signing up process, it’s time to add your website using the + Add Site button. There’s nothing to lose sleep over, it’s all simple stuff for now.

In fact, Cloudflare as a whole isn’t that difficult. It’s just a case of finding your way around the interface and knowing what is available for free and what needs paying for.

The more sites you add to Cloudflare the quicker you’ll get used to their way of doing things, plus you can compare one site setup to another. 

Cloudflare lets you know when a setting has been changed, but this is more likely for security reasons than anything else. If somebody else tampers with a setting, you should notice immediately, as long as you’ve been paying attention to the time stamps underneath.

Cloudflare Add Site Procedure
Cloudflare Add Site Procedure
  1. Click + Add Site top right hand side.
  2. Fill in the form with your website name: example.com.
  3. Click the blue Add Site button to accept.

Once you’ve created your Cloudflare account, you need to put it into action by adding your website. First, though, you need to decide which tier you want. Free sounds good to me!

Cloudflare Select a Plan
Cloudflare Select a Plan

Not only is the $0 dollar option good enough. It’s a great place to start then you can always upgrade at a later date, when your website matures and traffic and threats rise inline with one another.

If you’ve got a million dollar website, then for peace of mind it would be good to add as much security and speed as possible. For use regular dudes, with a few thousand views, FREE is where it’s at.

Cloudflare Select Free Plan
Cloudflare Select Free Plan

Once you’ve settled on your dream tier, you know what to do – press the big blue button that says Confirm Plan. Easy as one, two, free!

All of my own sites are already configured on Cloudflare so I made up a name, mytestsite.com, and added a it as a new site. This is what you’ll see after adding yours…

Cloudflare Review Your DNS Records
Cloudflare Review Your DNS Records

Obviously, I didn’t think of the most original name in the world, so Cloudflare pulled pu the DNS records from the actual site. I’ve not blanked out the details because I doubt they’re hidding the crown jewels! Apologies if they really are and I’ve spoilt their New Year’s Eve.

Changing your nameservers is easy. Just log into your hosting account and follow the instructions below.

*Please bear in mind that your Cloudflare nameservers might be different from mine. They have several options depending on your location.

Cloudflare Change Your Nameservers
Cloudflare Change Your Nameservers

You then hit an even bigger blue button called: Done, check nameservers.

Due to this being a dummy run, I was confronted with a similar screen, but with slightly more information. This is what you will also see, even if you have correctly changed your nameservers and pointed them towards Cloudflare.

Here’s an example from Hostinger showing you how to point your nameservers towards another domain, which would be Cloudflare in our case. 

And here’s how the Hostinger cPanel looks on one of my own sites.

Hostinger Cloudflare Nameservers
Hostinger Cloudflare Nameservers

It might take anywhere from a few minutes to a few hours for the new nameserver details to propogate, so don’t panic if it takes a while.

Cloudflare Complete Your Nameserver Setup
Cloudflare Complete Your Nameserver Setup

If things take ages, clear all your caches and click the Re-Check Now button. Eventually you will get the all clear that Cloudflare is now taking care of your nameserver records.

Once the domain nameservers are pointing correctly, Cloudflare will ping you an email to confirm everything is okay.

As well as the covering the basics, you’ll also need to setup everything from email to content delivery network. Here’s what my own test site looks like in Cloudflare.

Cloudflare Parallax Site DNS Records
Cloudflare Parallax Site DNS Records

5. SSL/TLS Encryption

It’s important that you understand this section, because misconfiguring your SSL certificate could cause significant problems for you and your users. For example:

  • You could lock yourself out of your own website.
  • Prevent users from viewing your content.
  • Loss of trust in your site if HTTPS breaks (no padlock for online shopping).

The reason I’m saying this isn’t to scare you off, but it’s really frustrating, especially if you don’t know how to resolve such issues.

Luckily for you, though, that’s why I’m writing this so you don’t have to suffer the same headaches that I went through on my Cloudflare journey.

Cloudflare SSL/TLS Encryption Settings
Cloudflare SSL/TLS Encryption Settings

The above image is how all my sites are setup now. It won’t be long before yours are too!

Let’s discuss the four main SSL settings available.

  1. Off – not secure – all Cloudflare icons are gray instead of orange.
  2. Flexible – encryptes data between the browser and Cloudflare only.
  3. Full – encrypts end-to-end using a self-signed SSL certificate on the server.
  4. Full (strict) – encrypts end-to-end, but also requires an origin SSL certificate.

Which options is best for you?

First of all we need to check your WordPress General Settings and see if you’re running HTTPS or HTTP. You can check this here…

WordPress General Settings
WordPress General Settings

If you have HTTP, then you need to use Flexible SSL. This enables you to have HTTP on WordPress and HTTPS on Cloudflare. If you try to use Full on HTTP you’ll have problems.

On a more positive note, if you’re running HTTPS, you’ve really got nothing to worry about. It’s hard to mess up unless you did something drastic like changed WordPress back to HTTP.

The suitable configurations options are as follows.

WordPressCloudflare Setting
HTTP or HTTPSOff
HTTPFlexible
HTTPSFull
HTTPS + Origin CertificateFull (strict)

Most new WordPress websites today will have HTTPS, simply because free SSL certificates are available from the likes of Let’s Encrypt. Reputable hosting companies like Bluehost provide these for free.

When I first moved to Hostinger, I was expecting the same, but although you can install your own for free, it can be a bit of a hassle renewing them especially on ten websistes. Free ones run out every year, whereas paid ones tend to be fifteen years or so.

Renewing them with a cron job is a good way to automate the process.

Eventually I decided that due to saving so much on my hosting package, I coughed up for some shiny new certificates. Life is give and take, after all.

Hostinger offered me two-for-one deals on the SSL certs and I accepted this without fuss. $5 certificates won’t break the bank.

Now I’ve been with Hostinger a few months and know my way around the cPanel, it’s actually really easy to install security certificates.

We’ll go through the process shortly to enable Cloudflare’s green ribbon icon that let’s us know we’re rocking Full (strict) SSL.

Here’s a quick example of the traffic that passes through my test site. Most of it is on the more common TLS2, which is why Stackpath and Cloudflare allow you to restrict your minimum level to this setting.

Cloudflare Traffic TLS Version
Cloudflare Traffic TLS Version

You’re always going to have hangers on in the technology world, but sometimes it’s best to cut them off. Why should you lower your security standards to suit people who don’t care?

Sometimes increased security adds latency, but overall top-level security increases speed. That’s why I hit as many green switches as possible. Like so…

Cloudflare Encryption Settings Part 1
Cloudflare Encryption Settings Part 1

This setup hasn’t caused me any issues so far. If you’re on a regular WordPress install then you should be okay to follow suit.

Although I’m with Hostinger now, I had the same settings on Bluehost shared hosting and Bluehost cloud.

Cloudflare Encryption Settings Part 2
Cloudflare Encryption Settings Part 2

5.1 HTTPS Strict Transport Security (HSTS)

HSTS settings are configured by clicking the blue button that says Change HSTS Settings

This section is relatively serious, simply because you can lock your viewers out for a very long time if you get it wrong. Again, it’s not difficult if you are on HTTPS. You will only run into issues if you switch back to HTTP while this is all setup.

Warning: HSTS in itself is effective, but temperamental, as explained. However, if you install it with a Cloudflare origin certificate – which is lighter and faster than Let’s Encrypt or other free/cheap certs. YOUR SITE WILL GO DOWN if you pause Cloudflare on your site for a significant amount of time. This caught me off guard when I updated my IP addresses.

When your site is preloaded in the browser, it is impossible to turn HTTPS off, as your site’s name is baked into the browser. So due to Cloudflare’s origin certs not being acknowledged by the browser, pausing CF breaks the security chain and no major browser will accept your site. At least with a Let’s Encrypt cert, you can pause Cloudflare without issue.

In normal operation the browser speaks to your Cloudflare SSL cert on the front end, with the origin cert in the background on the back end.

I’d previously paused CF for maybe upto fifteen minutes or so, but obviously got lucky. Once I paused it for longer it caused issues. Not Cloudflare’s fault at all, but just letting you know the pitfalls when something seemingly insignificant can cause you pain.

I’ve gone with the recommended 6 months setting. That way if the worst comes to the worst, you don’t have to wait a year or more. Imagine that?

Cloudflare HSTS Part 1
Cloudflare HSTS Part 1

Once you’ve wiped the sweat off your brow, it’s time to tick I understand and hit the blue button. You’re then taken to a settings page, but go green like me. It’s the best way.

If you are in a rush just swipe right on the green buttons, but here’s a quick explainer on each feature.

  1. HSTS (Strict-Transport-Security) forces the latest and greatest encryption on your visitors. However, this can cause issues if you go back to HTTP, as I’ve pointed out numerous times.
  2. Max  Age Header (max-age) this is just the time before the headers expire. Cloudflare recommend 6 months, but 12 months is necessary to be included on the Chrome HSTS preload list so I’ve just updated all my sites to comply. Check your eligibility for preload here – HSTS Preload.org
  3. Apply HSTS to Subdomains is safe to turn on as long as you’re rocking HTTPS.
  4. Preload – this is slightly misleading, because it seems as though it’s turned on, which it is. However, it doesn’t work unless your max-age is set to 12 months. Cloudflare mention this in their documentation, but it would be better if it was grayed out or redirected you to the max-age settings.
  5. No-Sniff Header – this is a security feature so best keep it turned on.
  6. Save to exit once you’re happy with all your HSTS settings.
Cloudflare HSTS Part 2
Cloudflare HSTS Part 2

5.2 HSTS Pre-Load List

The Chrome HSTS Pre-Load List isn’t anything to do with Cloudflare, but to comply with it you have to be fully HTTPS and have a max-age of 12 months.

  1. Enter your website name in the form.
  2. Click ‘Check HSTS preload status and eligibility.’
  3. Tick the checkbox in the corner to declare you are the site owner.
  4. Tick the next checkbox to confirm understanding of the necessary requirements and potential pitfalls.
  5. Click ‘Submit yoursite.com to the HSTS preload list.’
  6. You should see a success message like this one, if all goes well.
HSTS Preload List Eligibility Status
HSTS Preload List Eligibility Status

Then don’t forget to check back in a few days and you should see a nice little mesage like this one.

HSTS Preload Success Message
HSTS Preload Success Message

For some reason, though, when you run your website through the page speed tools it won’t show the faster time benefit that preloading achieves.

Although you only save the SSL negotiation time, the other benefit is of course increased security, due to the browser starting off from HTTPS rather than having to negotiate with the origin server. 

HSTS preloading removes the need to ask for any certificates.

I’m pretty certain that the browsers that the page speed tools use will be standard configurations, not ones that have the HSTS preload list included.

5.3 Cloudflare Origin Certificates

The first thing you need to do is create your Cloudflare origin certificate, then you can install it on your origin server via your hosting account.

*Don’t turn on the Authenticated Origin Pulls switch until it’s all fully installed.

Cloudflare Origin Certificates
Cloudflare Origin Certificates

The origin certificate itself comes in two parts. The first is the actual certificate and the second part is the private key, which together form the encryption chain.

Create Origin Certificate
Create Origin Certificate

For simplicity I opted to roll with Cloudflare’s Private Key and CSR – certificate signing request. 

Should you be super paranoid or own a bank, maybe you’ll need something more secure.

Cloudflare Origin Certificate
Cloudflare Origin Certificate

This was a sample key that I setup and have since revoked, so it won’t open any doors for you. 🙂

Cloudflare Origin Certificate Private Key
Cloudflare Origin Certificate Private Key

Now that the certificate is created, it’s ready to be copied over to your hosting account. Most cPanels look slightly different, but the features are often the same.

Hostinger cPanel SSL Section
Hostinger cPanel SSL Section

Once you’ve found the SSL section, click on the icon and you should be find something like this. If you keep your Cloudflare window open, copying and pasting the certificate and private key over is straightforward.

Don’t forget to click the install button. That’s it, you’re ready to finally move the Cloudflare settings over to Authenticated Origin Pulls and Full (strict) in the overview section.

Hostinger cPanel SSL Certificate & Private Key Installation
Hostinger cPanel SSL Certificate & Private Key Installation

Finally, once you’ve installed the origin certificate, you can reload the page and see if everything has installed as planned. Hopefully you’ll get a results like this.

Hostinger List of Installed SSLs
Hostinger List of Installed SSLs

There is one last job to do. Ironically I wouldn’t have been any wiser if it wasn’t for this blog post. You have to click the green button to Force HTTPS.

And here’s stupid me thinking it’s been sorted for the last month. It was still configured from Cloudflare’s end, as the green ribbon icon was showing Full strict.

Hostinger Force SSL to Activate HTTPS
Hostinger Force SSL to Activate HTTPS

Depending on how your hosting provider displays certificates, it might not show your original SSL so as long as everything is still working okay don’t fuss over it.

Hostinger, for example, keep SSLs they’ve issued seperate from any add on SSLs. Perhaps it’s a good idea?Keeping important things out of harms way prevents them getting deleted and the site left unsafe.

Hostinger Active SSLs
Hostinger Active SSLs

6. Cloudflare Firewall

The overview tab on my test site shows something quite remarkable. It’s a sad reflection of today’s world that a site with zero traffic still gets targeted by hackers.

Take a look for yourself. You can see that over the last 24 hours, there have been 29 attacks.

Imagine how many attacks a busy site gets?

Cloudflare Firewall Events Overview
Cloudflare Firewall Events Overview

It’s goes to show how important it is to stay one step ahead of the crooks.

Thankfully, Cloudflare do plenty to help us out. This is a list of all the automatic protection they implement on our behalf, so even if you don’t do anything else, this lot is keeping your site safe.

Cloudflare DDos Protection
Cloudflare DDoS Protection

The good news is that we can do even better. Cloudlare are kind enought to give us five page rules for free. Have a look below to see which ones I’ve got installed.

Cloudflare Firewall Rules
Cloudflare Firewall Rules

This is a breakdown of the 29 attacks we mentioned previously.

As you can imagine, it doesn’t take long before you’ve used your free rules up. How I got around this is to combine them. First of all, I tested them individually. Once I was confident that they were triggering correctly, then I made two rules into one.

Although you lose out on the finer details, such as which part of the rule triggered. In reality it doesn’t matter. The rule works and hackers get blocked, which is the most important part.

Cloudflare IP Access Rules are another valuable tool in our armament.

Cloudflare IP Access Rules
Cloudflare IP Access Rules

You can see from above that Cloudflare automatically whitelists all the IP addresses for my account.

The second whitelist is because I’ve been given free access to a VPN to test; due to it hidding the IP, Cloudflare classed it as a threat and Iocked me out of my sites.

Initially I thought I’d configured the rules wrongly, but then it dawned on me. I quickly added the VPN’s IP address to the whitelist and everything was back to normal.

Lastly, I set a firewall rule for a JSON attack. To make certain that I’d got it covered, I also added it to be blocked by the access rules.

You can run Wordfence to see where your attacks are coming from, then set up your Cloudflare rules to combat them. Once you’re happy, delete Wordfence.

6.1 How to Add Access Rules

Cloudflare Adding Access Rules
Cloudflare Adding Access Rules
  1. Type the IP address in the form.
  2. Toggle the arrows up or down to Block, Whitelist, Challenge or JavaScript Challenge.
  3. Toggle the arrows up or down to set the rule for This Website or All Websites in Account.
  4. Type your reference note or name in the form.
  5. Add the rule by clicking the blue button.

Simple stuff, isn’t it?

6.2 How to Add Firewall Rules

Once you get the hang of it, adding firewall rules isn’t that difficult. The thing is you can quickly test your rules to see if they are functioning correctly.

The last thing you’d want is your traffic getting blocked. Your fanbase won’t tolerate that for very long.

Handily, though, we’ve got some ready-made rules that you can use with minimum alteration.

6.2.1 Protect WP-Login/WP-Admin

Protect WP Login WP Admin

Professional hackers don’t just type one or two URLs at a time, they’re far more cunning than that. They usually run scripts that go out and find vulnerable websites. One of the most popular spots for them to check first is the WordPress login page and admin page.

To save one precious free rule, I spliced these two together. You could look at it like we’ve now got six free rules rather than five.

You can copy the rule here.

(http.request.uri.path contains “/wp-login” and ip.geoip.country ne “GB”) or (http.request.uri.path contains “/wp-admin” and ip.geoip.country ne “GB”)

Then paste it directly in the box below.

Cloudflare Copying Firewall Rules
Cloudflare Copying Firewall Rules
  • If you’re from the United States then you’ll need to change your location from GB to US.
  • Alternatively, you can just follow my example, but use the drop down sections to add the rule.
  • Finally click on the blue Save button to accept the rule.

It’s worth pointing out that the rules I’m showing you aren’t perfectly watertight. Some of them only block bad actors from a country other than your own.

That said, they are a good starting point until you learn how to improve upon them.

6.2.2 Protect XMLRPC

The number of attacks vary from site to site, but a general rule of thumb is that XMLRPC is in the top three WordPress hacker favorites.

So definitely have this one in your five free rules.

Protect XMLRPC
Protect XMLRPC

Same again, guys, you can either add the rule from new or save a few seconds by pasting this code into the Edit expression box.

(http.request.uri.path contains “/xmlrpc”)

6.2.3 Protect WP Config

This is another popular file that hackers are fond of, but with this rule you will make life a little harder for them.

Protect WP Config
Protect WP Config

Here’s the code to paste directly into the Edit expression box… or add the rule using the dropdowns.

(http.request.full_uri contains “wp-config”)

6.2.4 Protect Insecure Plugins

This rule has also had plenty of hits since I’ve implemented it across my sites. The only thing that I’ve just added today is the Known Bots equals off.

So if a friendly bot from Google or Bing tries to index something, perhaps an image, the rule will scan the Cloudflare Known Bots list and if there’s a match the rule won’t fire.

For anything else, other than a friendly bot, the rule will trigger exactly as planned… fingers crossed.

Protect Insecure Plugins
Protect Insecure Plugins

Here’s the code to copy and paste into Cloudflare.

(http.request.uri.path contains “/wp-content/” and http.request.uri.path contains “.php” and not cf.client.bot)

6.2.5 Protect WP JSON

This is the least active rule out of the different concoctions that I’m using. You might be better served leaving this one out and adding a spam-prevention rule.

You can block spam directly in WordPress instead, though, but like we discussed it’s best to offload tasks from our origin to Cloudflare. This saves CPU resources, among other things.

Protect WP JSON
Protect WP JSON

Here’s the necessary code for the above rule.

(http.request.uri.path contains “/wp-json” and ip.geoip.country ne “GB”)

You know where it goes by now, I hope?

Now before I get hung, I’m well aware that most people will type .php on the end of some requests, but my view is the less we type in the box, the less fussy it will be. That might not always be gramatically correct from a coding viewpoint, but I doubt that all of the hackers code is anyway.

If anything causes a problem, you will get notifications in things like Google Search Console. Plus you can always keep an eye out for a sudden drop in traffic or perhaps Google Analytics.

When this happens immediately after implementing your shiny new Cloudflare Firewall rules, you certainly know where to look first.

7. Speed Settings

Remember, we’re only concentrating on FREE options so I won’t bother mentioning anything that needs money throwing at it. That’s not because I’m greedy, but why pay for something unless it offers a worthwhile benefit? The only costs that I agree with are hosting and a CDN upgrade.

Cloudflare’s Pro plan is decent value at $20, but I’d rather have Cloudflare Free, Stackpath CDN and Photoshop for $20 per month.

Sometimes, I don’t think companies think their pricing structure through properly.

The three speed tabs are:

  • Overview.
  • Optimization.
  • Browser Insights.

7.1 Cloudflare Speed Overview

Cloudflare try and temp you with a few speed calculations and Rocket Loader. Ignore the digits they throw at you and also put any thoughts of testing out Rocket Loader on hold.

It does work on some sites, but on others it doesn’t. You’ll have to test it on yours to see if it’s suitable.

Cloudflare Speed Overview

Cloudflare Speed Overview

Browser Insights and Rocket Loader both add a small JavaScript file themselves, so if you activate both, that’s another two requests immediately.

Most people won’t be bothered, but for speed freaks like me all the little things add up.

7.2 Speed Optimization

The most useful section to us is the Auto Minify selector. 

Cloudflare Speed Optimization Settings
Cloudflare Speed Optimization Settings
  • If you’re using AMP then Autoptimize or Fast Velocity Minify won’t work, because AMP restricts JavaScript execution and only really allows it from the actual AMP plugin.
  • Your best option for AMP is to tick all three boxes. (I find Cloudflare’s minification less problematic than W3 Total Cache). 
  • For regular WordPress, you can leave Cloudflare’s minification settings ticked also, because it won’t harm anything, especially if Autoptimize or FVM are already aggregating your scripts before they go to Cloudflare’s servers.
  • Brotli is a more modern version of GZip. Don’t worry about leaving this on because Stackpath, for example, checks to see if your assets are compressed before it applies its own compression. This ensures that resources aren’t wasted compressing multiple times.

Although it’s bad practice to double up on anything like compression. Most high-end plugins that are household names, will check before they apply their own compression settings. Compression is a computationally expensive task and should only be done once.

Rocket Loader won’t work on AMP sites, only regular WordPress configurations.

Cloudflare Rocket Loader Setting
Cloudflare Rocket Loader Setting

You can use GT Metrix, PageSpeed Insights or WebPage Test, but out of the three the last option offers more granular control over your settings.

Pro Tip: Files are faster served from cache, but sometimes Cloudflare won’t cache them, even with a page rule set to Cache Everything. You’ll see EXPIRED or MISS status headers in your waterfall charts.

The best way to solve this is ensure that minification is turned on in your Cloudflare settings.

Cloudflare Cache Control Headers Expired
Cloudflare Cache Control Headers Expired

When we ensure that minification is turned on, Cloudflare is more likely to honor our caching requests. However, there are legitimate instances where files will be served from the origin server, regardless of our cache settings.

Cloudflare Cache Control Headers Hit
Cloudflare Cache Control Headers Hit

7.3 Mobile Optimization

There’s not a lot to talk about with regard to mobile. Most new WordPress themes are responsive so the need for seperate desktop and mobile sites is a thing of the past.

That said, however, a lot of companies tend to keep hold of their older technology. Probably for fear of alienating people if they delete it, but also because the more features they offer the more they’ve got to talk about.

Cloudflare Mobile Speed Settings
Cloudflare Mobile Speed Settings
  • Turn on AMP Real URL if you’re running a WordPress AMP plugin.
  • Mobile Redirect isn’t something you should be wasting time with really.

7.4 Browser Insights

The new Browser Insights feature is a cross between analytics and speed data. It’s usefull if you want to turn it on to keep an eye on a new site, but personally I’d have a play around with it and then say goodbye.

These types of things are resource intensive and you have better options to consider… like real speed testing tools that we’ve previously mentioned.

Cloudflare Browser Insights
Cloudflare Browser Insights

8. Caching Settings

There are many ways to affect caching, especially when we get into Cloudflare Page Rules later on. For now, though, we’re concentrating on the actual Caching module.

It’s a straightforward section, with only a few bits that concern us – the free ones.

One of the hardest things for a new WordPress user isn’t that plugins are hard to use. The main issue that I see is the sheer number of options, which gets more confusing when plugins and services grow.

It’s easy when you have an images plugin, caching plugin and database cleaner. 

Where it falls apart is when the plugins go beyond their original remit and think they’re the Swiss Army knife of the website world. We end up overloaded with features and most of them are redundant. That adds bloat and slows our websites down.

This is something that I’m well aware of and wherever possible try and streamline this plugin soup.

There’s also myriad options for controlling our setup – both good and bad.

It’s obviously time consuming if we have multiple forms that control our caching. That means we need to go in W3 Total Cache, Cloudflare and Stackpath to set our headers.

Luckily for us there’s a better solution. We can kill three birds with one stone here.

  • Set our headers in our caching plugin – W3 Total Cache.
  • Leave Cloudflare to ‘respect existing headers.’
  • Set Stackpath the same way – ‘respect existing headers.’

If you don’t have a caching plugin, you can set the browser Cache anywhere from 30-minutes to a year. Longer is usually better when it comes to Page Speed Tools and user experience.  You can set it to a year if you’re unsure. 

This caching checklist from Google goes into more detail.

Cloudflare Caching Settings
Cloudflare Caching Settings

The only other two boxes that we need to pay attention to are the Always Online and Development Mode.

Always Online does what it says on the tin, it serves content even when your origin server is offline. Development Mode is for bypassing your Cloudflare cache and error testing.

If you’ve been having issues and had to resort to Development Mode, it’s paramount that you turn it off afterwards. Failing to do so will put excessive strain on your origin server.

Cloudflare always Online & evelopment Mode
Cloudflare Always Online & Development Mode

9. Page Rules

If you are happy with a regular WordPress setup then you don’t need to bother with Page Rules. On the other hand, if you want the absolute fastest website this side of a lightning strike, read on…

This one setting I’m going to show you has been responsible for absolutely transforming my websites TTFB. Time to first byte is super important. Google will swiftly let you know if your server is slow.

Good news is that Cloudflare have one of the fastest domain nameservers in the world. Let’s take advantage of it, then. It would be rude not to.

9.1 Page Rules Overview

Once you’ve added your three free page rules, it will look like the diagram below.

  1. The up-and-down toggle moves your rules, you’ve guessed it, up and down. (It’s vital that you have the rules in the correct order because only one rule will fire. If you had Cache Everything first in line the other two rules would never see the light of day).
  2. You can see the ruleset recipe here.
  3. Turn rules on and off with this switch. 
  4. The spanner icon is for editing your rules, but if you follow my example it should be fuss free.
  5. Delete any old rules using the black cross icon.
Cloudflare Page Rules Overview
Cloudflare Page Rules Overview

9.2 Page Rule Recipes

The only three rules we really need are for telling Cloudflare what to cache and what not to cache.

  • /wp-admin* is configured with seven minor rules to make one super rule. This is helpful because it avoids, among other things, caching our work while we’re in the WordPress admin panel. It’s a bit like a slimmed down development mode that turns on and off automatically.
  • /*preview=true* is setup to do the exact same process as our first rule, but I believe this is for things like when we preview a blog post. The point of this is so we see an accurate representation of our work and not confuse matters with cached images and the like.
  • /* the asterix is a wildcard that we use instead of typing hundreds of file names. This tells Cloudflare to do something to every file. We’ve set that something as cache everything.

You’ll be amazed once you configure the last rule properly. The first time that I used it was on Bluehost shared hosting – you know the one that everyone complains about? To say that I was blown away when I saw TTFBs of < 200 ms is an understatement.

For the most part, page speed tweaking is about incremental improvement. Other times we get a pleasant surprise that exceeds our expectations. Cloudflare Page Rules are one of those hidden gems.

9.3 WP-Admin Page Rule

In order to add your first page rule, you can follow the instructions below and also notice the individual settings that make each page rule recipe.

  1. The first thing you need to do is click on the blue Create Page Rule button.
  2. Type your website name into the form with /wp-admin* on the end.
  3. Individually add all the settings as below.
  4. Save before exiting.

Edit Page Rule WP-Admin

One thing worth noting is that unlike the Firewall Rules, where you’re allowed five free rules, but you can create more than that as long as only five are turned on. It seems that with Page Rules, you can only create three unless you purchase more rules.

This shouldn’t be a problem for us, though. Three rules have been working great for me – it’s not like I’ve ever felt the need to buy more.

9.4 Preview=True Page Rule

Follow the same process that we’ve outlined above for your next page rule.

  1. Click on the Create Page Rule blue button.
  2. Type your website name in the form followed by /*preview=true* on the end.
  3. Add the individual settings until it matches the image below.
  4. Save your new rule.
Edit Page Rules Preview=True
Edit Page Rules Preview=True

9.5 Cache Everything Page Rule

This is the simplest rule out of the three, but will have the most benefit from a performance perspective.

  1. Click on the blue button – Create Page Rule.
  2. Type yoursite.com/* into the Cloudflare form.
  3. Select Cache Level – Cache Everything form the settings menu.
  4. Save your work and you’re good to go!
Edit Page Rule Cache Everything
Edit Page Rule Cache Everything

10. Network Management

Another less intensive to implement, but still highly advanced module with great benefits for WordPress enthusiasts. Cloudflare tends to be among the pioneers when it comes to the advancement of website security and speed.

You’ll find some nifty features that are activated by the simple click of a switch.

Each setting might only save a split second, but when you have a raft of features all working together, the end result can often be impressive.

  1. HTTP/2 has been out quite a while now and is well established, which is partly why Cloudflare has it turned on permanetly. A sensible choice in our opinion.
  2. HTTP/3 (with QUIC) is optional, but you should definitely turn it on for increased speed and security.
  3. 0-RTT Connection Resumption results in faster connection times.
  4. IPv6 is the new industry standard and for this reason Cloudflare insist that we keep it on, hence another grayed out button.
Cloudflare Network Settings Part 1
Cloudflare Network Settings Part 1

The Network settings panel is all on the same page, so you won’t get lost when setting it up. 

  1. Web Sockets are open connections between the client and origin. Think of it like a pop-up tunnel that stays open for the duration of the active session. You only need one per session rather than reconnecting numerous times the old-fashioned way.
  2. Pseudo IPv4 is what Cloudflare describes as stopgap to accelerate the adoption of IPv6. All you need to know is that it’s best left turned off.
  3. IP Geolocation – is useful because any requests to your website will include the country code, unless of course Cloudflare deems this information unavailable. 
  4. Maximum Upload Size goes up to 500 MB, but on the free tier we’re stuck with 100 MB.
Cloudflare Network Settings Part 2
Cloudflare Network Settings Part 2

11. Scrape Shield

Last of the Cloudflare free tools that we can benefit from is Scrape Shield. It’s got a trio of security and performance enhancing features.

Although Hotlink Protection doesn’t directly have an influence on site speed, it will help indirectly. When bad actors suck up your resources – CPU cycles and networking bandwith – it can have an adverse affect on your website performance.

Shared hosting users won’t be affected so much, but imagine if you had a large website with millions of visitors. This type of thing could cost you literally thousands of dollars in lost revenue.

  1. Email Address Obfuscation is a posh way of saying we’re hiding your email address from bots.
  2. Server-Side Excludes is something you might find handy if you need to hide data from disreputable visitors. It only works on mime types of text/html and application/xhtml+xml. You have to wrap your content in special tags that follow this example:  &lt;!–sse–&gt;Disreputable visitors won’t see this&lt;!–/sse–&gt;
  3. Hotlink Protection is great for saving on resources, as we’ve already touched on, but it’s not ideal if you need your images to be available for Pinterest or Google Images.
Cloudflare Scrape Shield
Cloudflare Scrape Shield

12. Cloudflare & Stackpath CDN Combination

The Cloudflare and Stackpath combo is a popular and cost-effective solution. You can pair them together for $10 per month – well within most blogging budgets.

They’re easy to setup and work with all major caching plugins.

One nagging question, however, do I really need both?

Firstly, let’s consider our primary objective. There isn’t necessarily a right and wrong answer. It’s more nuanced than that.

Instead we should think about pros and cons.

CDN considerations:

  • Are perfect GT Metrix reports the goal?
  • Does ultimate speed matter more than page speed audits?
  • What about the number of data centers?

12.1 Cloudflare & Stackpath

On my WordPress speed eduction, I remember reading that the more data centers the better. Well, yes, that makes perfect sense, but it’s not that straightforward.

Cloudflare’s Global network now spans 194 cities, which is astonishing really. Plus it’s growing bigger every year and will soon break the 200 barrier.

Stackpath is a relative minnow, with just 45 edge locations. Still good, but nowhere near as solid as Cloudflare’s behemoth.

Adding 194 to 45 gives us 239 data centers in total. 

Problem solved. It’s obvious that using both is the best solution.

Not quite…

A CDN can be set up to deliver static assets, such as images and documents. This leaves the origin server to provide dynamic content.

To really maximise the CDN’s potential, we need to cache the full website on the edge server, which takes the origin out of the equation.

The beauty of Cloudflare is that it’s super easy to serve our WordPress from the edge. We do it by implementing the cach-everything page rule that we discussed previously.

Only this breaks down because we’re using Stackpath for our static content so instead of our full website being available from 239 data centers (194 + 45) like you’d probably imagine, in reality your first request is available from Cloudflare’s 194, but due your static content is only available from Stackpath’s 45 so it’s effectively the lower number 45 that matters and not 194.

In other words, I’m saying that Stackpath is acting like a bottleneck.

Plus you’ve got a small hop when the request goes from Cloudflare to Stackpath.

This hop is only about 0.2 seconds on desktop, but when we set WebPage Test to Moto G4 Chrome, a typical Android Smartphone that’s used around the world, it creeps up to 0.5 seconds. That could be the difference between a lost viewer or a lost sale or even a repeat customer.

Cloudflare Stackpath WebPage Test Moto G4 Chrome
Cloudflare Stackpath WebPage Test Moto G4 Chrome

You’re essentially having a website that’s fully served from Cloudflare’s edge network and clipping its wings by downgrading to a static CDN setup. Every CDN company will tell you that using the full website delivery is the fastest option!

This second test was taken the day after, but it’s another way of looking at the same thing. I kept the same settings – WebPage Test Moto G4 Chrome Browser, but this time I activated Autoptimize Lazyload.

Cloudflare Stackpath Autoptimize Lazyload Moto G4 Chrome WebPage Test
Cloudflare Stackpath Autoptimize Lazyload Moto G4 Chrome WebPage Test

Here’s how our site looks from within W3 Total Cache.

W3 Total Cache CDN Setup
W3 Total Cache CDN Setup

It seems like I’ve been pretty harsh towards Stackpath, but I’m a Stackpath user myself so that doesn’t make sense, does it?

There are benefits to using Stackpath. For example, Cloudflare always sets a security cookie due to them primarily being a security company. This will cause GT Metrix to flag you for not Using Cookie Free Domains.

To be honest, this doesn’t matter, but like I first said it depends on your goals. Do you want to impress people with perfect 100/100 scores on GT Metrix or do you want the ultimate in user experience? For making money and pleasing your viewers, I’d say the later is most important.

It’s a choice you need to make.

Here’s our test site using both Cloudflare and Stackpath.

Cloudflare Stackpath Combo GT Metrix Report
Cloudflare Stackpath Combo GT Metrix Report

12.2 Cloudflare without Stackpath

Let’s remove Stackpath from the equation and run a few more tests. That should give us valuable insights into determining which is the best way forward for you.

Cloudflare WebPage Test Moto G4 Chrome
Cloudflare WebPage Test Moto G4 Chrome

The first benefit we notice, when viewed from WebPate Test’s connections panel, is that the content starts downloading immediately from Cloudflare. It doesn’t nee a second hop to Stackpath.

To be fair to Stackpath, this isn’t really their fault. The problem is Cloudflare is a CDN and Stackpath is also a CDN. Running two CDNs together will always result in a second hop. 

It’s also an easy fix. You simply point your nameservers to Stackpath and serve your full site from Stackpath’s edge network exactly like we’re doing here from Cloudflare.

Cloudflare only results for WebPage Test with Autoptimize Lazyload turned on, show a 212 ms saving when you add the DNS lookup, initial connection and SSL negotiation together.

Cloudflare Autoptimize Lazyload Moto G4 Chrome WebPage Test
Cloudflare Autoptimize Lazyload Moto G4 Chrome WebPage Test

The slower the connection, the bigger the improvement from using only one CDN compared to two.

Looking at things from our W3 Total Cache general settings panel, this is how it’s configured.

Cloudflare CDN Full Site Delivery
Cloudflare CDN Full Site Delivery.

You can ignore the W3 Total Cache new Unlock Feature that you access using the green button. I’m not saying don’t use it, but why would you want to pay $99 a year for one site when you can do it for free?

While I realise that companies have to make money, some of the pricing structures are downright weird. I’ve got 10 sites so there’s no way I’d shell a grand on them, whereas if it was $99 for one licence then it might be worth considering.

Finally we run the site through GT Metrix to see how the above settings affected the performance scores.

Cloudflare CDN Full Site Delivery GT Metrix Report
Cloudflare CDN Full Site Delivery GT Metrix Report

Just like I explained earlier, Cloudflare’s security cookies have a negative impact on the final audit score.

On a more positive note, in the real world this isn’t anything to worry about. Your clients don’t see benchmark results, but they do notice speed both real and perceived.

My advice for online businesses, use only one CDN for full-site delivery. Cloudflare (free tier) and Stackpath ($10) second choice.

For page speed tweakers, though, it’s nice to be able to get perfect audit scores because we feel like we’ve accomplished something. Even if that isn’t of any use in reality.

13. Summary

That’s all, folks. Now you know how to prepare your website and have a solid Cloudflare setup to blitz your competitors. You know Cloudflare provides ace security all wrapped up in a blistering speed package.

Do let us know what you liked and didn’t like about this review.

If you enjoyed this article, you might want to learn how we created the fastest WordPress setup.

See you in the next one!

Share This Post

LinkedIn

2 thoughts on “Cloudflare Setup: Secure CDN < 1 Second Load Time!”

  1. Have to be honest. This is by far the most comprehensive setup guide that I have seen for Cloudflare. I thought my website was fast already, but after following this guide, my website is amazingly fast on what is essentially a sub-$10/yr SSD hosting. Simply brilliant!

    Reply
    • Hi Simon,

      Appreciate your feedback and kind words.

      I do feel that this is one of my better tutorials, as well as Cloudflare being super important for website owners of all levels.

      Take care,

      David

      Reply

Leave a Comment