Cloudflare and WordPress:
The Definitive Performance Setup

I remember the first time I tried Cloudflare. After the activation, my first thought was, that’s it?

It felt like magic

Though I didn’t understand at the time how Cloudflare works, I knew it was a game changer for my sites’ performance.

In today’s guide, you’re going to learn what I consider the best Cloudflare setup to speed up WordPress.

Contents

CHAPTER 1Cloudflare as a performance dashboard

Many of you must be interested in Cloudflare for the CDN feature.

But Cloudflare is much more than a regular CDN.

In fact, Cloudflare is also a DNS provider, a web performance and security panel, a web firewall and much more.

Cloudflare as a performance dashboard banner

CDNs are usually not recommended for sites with mainly local visitors. However, as I’m going to show you, Cloudflare is very different from a regular CDN provider.

Let’s just mention for now that Cloudflare offers more than 150 POP servers around the world.

It’s three times more than MaxCDN and five times more than KeyCDN.

Cloudflare Network Map

Therefore, it’s very likely that there is a Cloudflare server near your local market.

Which drops the main argument against using a CDN.


Cloudflare as a web performance panel

Here’s the deal:

For me, Cloudflare isn’t just a CDN, it’s a complete performance panel for my sites. I activate it by default, whether or not a CDN is absolutely required.

First, Cloudflare is one of the fastest DNS providers. Plus, the DNS feature is available for free. It’s worth it just for that.

Second, Do you know any free CDNs? I mean, ones that don’t suck? And yes, Jetpack Photon suck, because it’s so slow.

Third, It can fix performance gaps from your hosting provider. For example, it can activate HTTP/2, optimize your images, minify your files and activate compression.

Let’s suppose you had just renewed your hosting for a full year. Then, you heard about the HTTP/2 protocol and its potential speed benefits, but your hosting doesn’t support it.

Well, lucky for you, with Cloudflare you can still get HTTP/2 without moving your site somewhere else.

This is a practical performance guide.

For that reason, I’m not going to cover security options, or go into detail on every subject either. However, each section has multiple links so you can learn more about the subject if needed.

CHAPTER 2How to activate Cloudflare

In this short chapter, you are going to learn how to enable Cloudflare.

And, learn how to know it’s working.

If you have already activated it, feel free to jump to Chapter 3.

Activate cloudflare banner

There are two ways to enable Cloudflare.

Option 1 – Simply change your DNS

The way it works, you need to change your nameservers for Cloudflare’s nameservers.

But don’t worry, it’s a very simple process.

Cloudflare Setup Video

First, if you don’t already have a Cloudflare account, create one now.

Second, add your URL and wait. Cloudflare should automatically replicate all your DNS’ records, but if some are missing, just add them.

Finally, Cloudflare will show your new name servers. So, log in to your domain name registrar and replace the old name servers for the new ones.

Old nameservers vs new nameserves for cloudflare

Pretty simple right?

Option 2 – Through a Cloudflare Hosting Partners

It’s also possible to activate it from Cloudflare’s hosting partners. Check out Cloudflare’s optimized hosting partners list to know if your hosting provider is in it.

I personally noticed a 50 ms difference in the Time to First Byte between the two ways of enabling Cloudflare. Therefore, I strongly recommend you change your name server.

Verify Cloudflare activation

Nameserver (DNS) changes can take up to 48 hours.

However, most of the time, it won’t take more than a couple of hours.

Probably even just two hours, but don’t worry if it takes longer. It’s normal.


So, to verify it’s working, open your browser’s developer tool or a website speed test. Then, navigate to the network tab and refresh the page.

With your browser’s developer tool
Open your site in the browser and press CTRL + ALT + i for Mac, or F12 for Windows.

Then, navigate to the network tab and refresh the page.

Click on the first request and search for the server row.

Verify Cloudflare activation with devtool
Verify Cloudflare activation with Chrome Devtool

With a website speed test
Execute the speed test and locate the File Requests section.

Then, open the first request and search for the server row.

Verify cloudflare activation with pingdom tool
Verify Cloudflare activation with Pingdom tool

Further reading:
Create a Cloudflare account and add a website
Change your domain name servers to Cloudflare
How do I know Cloudflare is working on my site?

CHAPTER 3Setting up the Cloudflare WordPress plugin

The official Cloudflare WordPress plugin is not mandatory, but I encourage you to install it.

The plugin is going to help you purge the cache, change some options and almost forget that Cloudflare is activated.

Cloudflare WordPress plugin banner

First, download, install and activate the plugin.

Second, from your Cloudflare dashboard, go to the “My Profile” page and copy your “Global API Key.”

Cloudflare API key lightbox

Finally, from your WordPress admin, go to “Settings” -> Cloudflare, and enter your API key and your email address.

You should then see the plugin setting.

Recommended settings

I’m not going to describe each setting here.

For now, just apply the Cloudflare recommended settings.

Cloudflare WordPress plugin apply recommended settings

And turn on the automatic cache management.

Cloudflare WordPress plugin automatic cache option

This option is particularly useful if you are caching your WordPress pages with Cloudflare.

Further reading:
Using Cloudflare with WordPress
Cloudflare’s Plugin for WordPress

CHAPTER 4The DNS Tab

A misconfiguration here could keep your site from gaining any speed improvement.

If you want to jump directly to the next chapter, you just need to know that orange clouds mean Cloudflare is on, and grey clouds mean Cloudflare is off.

Cloudflare DNS tab banner

DNS Records

This section is not complicated.

Orange clouds mean Cloudflare is enabled, and grey clouds mean, well, not so much activated.

Notice the FTP record?

Its cloud is grey, to get direct access to the server. You should do the same for all records that are not your root domain or a subdomain.

This is how you can turn off Cloudflare for debugging or just to test your site’s speed without it.

Just remember that it can take some time (5–15 minutes) to take effect.

Flattern those CNAMEs

Well, this point is pretty geeky.

The majority of you don’t have to change anything here.

But I want to address it because it’s another transparent feature that speeds up your site.

If you are like me and hate having a “www” subdomain, flattening your subdomain might be for you.

Thanks to Cloudflare for activating this on all its plans.

Here’s what the Cloudflare team has to say about CNAME flattening:

An ancillary benefit we’ve found is that we decrease the time for CNAME resolution by about 30% on average.

Cloudflare team

Further reading:
Cloudflare: Introducing CNAME Flattening
What is a DNS record?

CHAPTER 5The Crypto Tab

You may wondering why Crypto tab is here: it’s a security section, isn’t it?

Yes it is, but some settings in the Crypto section have to be set correctly to ensure you get the best results.

cloudflare crypto tab banner

Enable SSL and HTTP/2

Enabling SSL in Cloudflare also activates the HTTP/2 protocol. It allows many performance benefits, including multiplexing and header compression.

Cloudflare SSl option

If you have been toying with the idea of migrating to HTTPS, I strongly recommend you do so now.

There is no reason not to enable SSL.

Especially since the arrival of HTTP/2, and the fact that HTTPS is a ranking signal for search engines.


Start by enabling an SSL certificate on your server. If you don’t know how, ask your hosting provider.

Then, set the Cloudflare setting to “Full” or “Full Strict.” The Flexible SSL should be used as a last resort only.

Flexible SSL
flexible ssl cloudflare
Cloudflare.com Illustration

I don’t recommend this SSL option but it’s better than nothing if, for some reason, you can’t create an SSL certificate at your origin server.

Flexible SSL is less secure than the two other options and it can cause a redirect loop. If you do encounter a redirect loop, this help file can help, as well as this WordPress plugin.

Full SSL
Cloudflare full ssl illustation
Cloudflare.com Illustration

To use full SSL, a certificate must be enabled on your origin server, but the certificate doesn’t have to be valid.

This means a self-signed certificate will work.

Full SSL (strict)
cloudflare full ssl stict illustration
Cloudflare.com Illustration

A valid SSL certificate is mandatory for the full SSL option.

Always use HTTPS

After enabling SSL, you have to make sure users are redirected to the HTTPS version of your site.

cloudflare always use https option

Opportunistic Encryption

This will probably not be useful if you have correctly set up an SSL certificate—but it costs nothing to activate it.

cloudflare opportunistic encryption

TLS 1.3

A secured site was slower than a non-secured site during the HTTP/1 era.

Fortunately, this isn’t true anymore, thanks to the new HTTP/2 protocol.

However, to connect to an encrypted site, you must first establish what’s called an SSL handshake, and this takes time.

ssl handshake

The TLS1.3 is the latest and fastest version of the TLS protocol.

cloudflare tls enabled ortt

Automatic HTTPS Rewrites

Last but not least, you want to enable Automatic HTTPS Rewrites to prevent resources from loading from unsecured connections.

cloudflare automatic https rewrites

Further reading
Cloudflare One-Click SSL
Introducing TLS1.3
Introduction to HTTP/2

CHAPTER 6The Speed Tab

Now we’re at the heart of the subject.

I’m going to explain each setting in this tab and give you my thoughts on them.

You shouldn’t turn on all the switches here.

Cloudflare Speed Tab banner

Auto Minify

Minification removes unnecessary characters from your source code without changing its functionality. This process reduces file size, which improves page load times.

Cloudflare’s auto minify option is a light minification process, and the risk of breaking anything is low.

Don’t hesitate to enable it, even if you already use a plugin for minification.

Cloudflare auto minify

Polish

This feature is pretty impressive.

Once enabled, Polish automatically optimizes your images on the fly.

Cloudflare can also serve a WebP image if a compatible user agent is detected. WebP image is a modern image format that provides superior compression possibilities.

Have you already tried using WebP images on a WordPress site?

If so, you know it’s a far-from-seamless process.

But with Cloudflare, you can just enable it and forget about it!

Cloudflare Polish image optimization option

Polish allows two types of compression.

LosslessLossy
Reduce the size of image files without impacting visual quality.Going further than Lossless, here, JPEG images are even more compressed, which may reduce visual quality.

Unless you are a super-picky photographer, you should choose Lossy compression.

Railgun

I must admit, Railgun really looks awesome!

Cloudflare Railgun option

However, in practice, I have never observed much difference in site speed with it activated.

What Railgun does is it compresses exchanges between Cloudflare and the origin server even more.

Without Railgun

Without Cloudflare Railgun illustration
Without Railgun Illustration from Cloudflare.com

With Railgun

With Cloudflare Railgun illustration
Railgun Illustration from Cloudflare.com

In addition to being available only for Business and higher plans, Railgun requires a compatible server.

Check out the Cloudflare’s hosting partners page to find one.

Railgun on a free plan

You can get access to Railgun on a free plan if you activate Cloudflare from your hosting provider. Though, like I said earlier, you are better off changing your DNS manually.

Enable Accelerated Mobile Links (AMP)

The AMP project is quite controversial in the industry.

I have personally never used it, since my sites are faster than an AMP site most of the time.

Nevertheless, if your site is AMP-ready, this feature might interest you.

Cloudflare AMP option

Here’s the scoop:

Users usually only land on an AMP page when they are coming from a Google search result.

But, with this turned on, Cloudflare will dynamically change links on your page to the corresponding AMP page.

Which is pretty cool for AMP websites.

Further reading:
Cloudflare: Accelerated Mobile Links
AMP For WordPress tutorial
Cloudflare AMP Cache

Brotli

Brotli is the most efficient compression algorithm out there.

According to Mozilla, Brotli may outperform Gzip by 22%.

Cloudflare Brotli compression option

There is no risk in activating it.

Mirage

Mirage is another Cloudflare exclusive.

Cloudflare mirage mobile image optimization option

It works three ways:

1- Detection: Cloudflare detects the visitor’s device and network connection type, and stores this for the next visit.

2- Virtualization: Virtualization is a lazy load technique. It displays a super low-resolution image to the user, and the regular image loads in parallel during the consolidation step.

3- Consolidation: The consolidation step merges all image requests into one request.

Mirage Demo

As a result of these three ways, even a page with hundreds of images can start to be seen in the browser with as few as two requests.

As cool as Mirage is, it works on mobiles only. I wonder why, because lazyloading images is a strong performance booster that desktop visitors could also benefit from. I guess they determined that the speed improvement was marginal on desktops.

Further reading:
Mirage Image Optimization
How we made our page-load optimisations even faster

Rocket Loader

The way Rocket Loader works is similar to Mirage’s consolidation step.

Cloudflare Rocket Loader Illustration
Cloudflare Rocket Loader Illustration

Rocket Loader transparently defers all Javascript execution until the rest of the page has loaded. This allows the browser to display the content the visitors are interested in as soon as possible.

Cloudflare Rocket Loader option

I tested it on dozens of WordPress sites, and my recommendation is you SHOULD NOT ACTIVATE IT.

Why?

Based on experiments, sites with Rocket Loader enabled were either dysfunctional or slower than sites with WordPress optimization plugins installed.

There’s nothing keeping you from testing it on your site though.

But, in my book, it’s a waste of time.

Mobile Redirect

What this section does is obvious.

In case you handle mobile traffic the old way.

Cloudflare mobile redirect option

A mobile redirect on Cloudflare is going to be faster than a Javascript solution.

A redirect on Cloudflare is faster than a Javascript solution.

Prefetching URLs From Headers

I have never had the opportunity to work on an Entreprise plan.

But when I do, I would activate this option.

Once enabled, Cloudflare is going to prefetch URLs you have specified in your manifest file.

Cloudflare prefetching url from HTTP headers

This won’t accelerate the first view, but it will most likely speed up subsequent page views.

CHAPTER 7The Caching Tab

In this chapter, I’m going to cover all the settings related to the Cloudflare cache.

This includes how to purge the Cloudflare cache and how to fix the browser cache length.

Cloudflare Caching Tab banner

Purge Cache

This is where you clear a file or your entire site’s cache.

Cloudflare purge cache option

While your first reflex might be to flush the entire cache, Cloudflare recommends purging individual files instead.

This make sense because clearing the entire cache will increase requests to your server, which will raise your bandwidth and CPU usage.

So, when possible, use the Purge Individual Files option.


However, you can purge your files’ cache under the CloudFlare WordPress plugin panel.

Caching Level

This should already be set correctly, but if not, set the caching level to standard.

Cloudflare caching level option

No Query String: Only delivers files from the cache when there is no query string.

Ignore Query String: Delivers the same resource to everyone, independently of the query string.

Standard: Delivers a different resource each time the query string changes. This is the regular behaviour.

Browser Cache Expiration

This is where you make sure users never load the same resource twice.

The best option here is to set the Browser Cache Expiration option to Respect Existing Headers.

cloudflare browser caching option

This tells CloudFlare to respect the file headers set by your origin server. It’s useful for keeping better control on WordPress directly through plugins.

However, it’s only good if headers are well configured on your server.

How to check the browser cache headers

The fastest way is to scan your site with Google PageSpeed Insight.

How to Check Browser Cache is enabled

Your origin server has set the wrong headers:

  1. If PageSpeed Insights displays the “Leverage Browser Caching” error, and
  2. If the files are coming from your site.

What if the error is displayed but the files are external to your site?

Unfortunately, you can’t control files on another server.


What if you do have a browser cache issue?

I recommend first trying to fix it on your server. For Apache and Litespeed servers, try this WordPress plugin.

If that doesn’t work for you, you can overwrite your server headers from Cloudflare.

Set the Browser expiration setting to 8 days.

cloudflare browser cache expiration 8 days

Further reading:
How do I purge my cache?
What does browser cache expire TTL mean?
HTTP Cache
Deeper explanation and how to fix.

CHAPTER 8The Page Rules tab to Customize Cloudflare by URL

Page rules are very useful for controlling how Cloudflare works across your domain.

They allow you to change settings on a directory and subdomain basis.

The number of page rules included depends on your plan: 3 in the free plan, 20 in Pro, and 50 in Business.

cloudflare page rules banner

Here is a quick round-up video of what you can do with page rules:

Cloudflare Page Rules for WordPress

Since you can do a lot with page rules, I’ll just show you common WordPress usage.

The order of Page Rules matters

Only one page rule applies by request. Therefore, drag and drop the most important rules to the top.

Performance-related page rules

  • Browser Cache TTL – Controls how long resources cached by client browsers remain valid.
  • Edge Cache TTL – Controls how long Cloudflare retains files in its cache.
  • Cache Level – Controls how much of your website’s static content you want Cloudflare to cache. Unlike the Caching Level option under the Caching tab, this page rule has two additional values: Bypass Cache and Cache Everything.
  • Rocket Loader – Controls the activation of Rocket Loader.
  • Origin Cache Control – Controls whether Cloudflare must respect the origin server cache headers.
  • Disable Performance – Disables Minification, Rocket Loader, Mirage and Polish.
  • Forwarding URL – Creates redirect rules.
  • Polish (Pro) – Controls the activation of Polish.
  • Mirage (Pro) – Controls the activation of Mirage.
  • Bypass Cache Cookie (Business) – Bypasses the Cache Everything rule and fetches resources from the origin server.
  • Cache On Cookie (Enteprise) – Activates the Cache Everything rule and fetches resources from Cloudflare servers.

Stronger Media’s Cache

Odds are that your site images and files won’t change.

Then, why not apply an aggressive caching rule?

cloudflare page rule cache wordpress medias

Faster redirects

I have never been a fan of managing redirects from WordPress.

Page rules allow you to easily create 301 and 302 redirects, which couldn’t be faster since the request doesn’t reach your origin server at all.

Securing the WordPress admin & login

To enhance security but also ensure that everything works smoothly.

Trick to save on page rules

Like I said above, you don’t have an unlimited number of page rules.

Consequently, you can use wildcards to save some.

For example, take my business needs as a WordPress themes shop: I need to secure WordPress admin on subdomains, on the main directory and even on subdirectories.

Here’s what it looks like using wildcards:

Further reading:
Enhancing the Security and Performance of WordPress
Is there a tutorial for Page Rules?

CHAPTER 9The Network and Traffic Tabs

This chapter covers the Network and Traffic tab options.

Pay special attention to the Argo section, as it’s a very interesting way to leverage your origin server loads.

Cloudflare Network and Traffic tabs banner

HTTP/2 + SPDY

This setting should always be activated to HTTP/2 + SPDY—unless you have very specific needs.

Cloudflare HTTP/2 SPDY option

Response Buffering

The default behaviour, which is to send packets to the client as soon as received, shouldn’t change.

However, if you have very special needs, you can activate it to tell Cloudflare to wait until it has the entire file before forwarding it to the end user.

Cloudflare Response Buffering option

Argo

Argo Smart Routing reduces Internet latency on average by 35%; connection errors by 27%

Cloudflare.com

My shop site, as well as my demo sites, are on a modest but powerful Siteground server.

Therefore, I appreciate Argo’s small contribution to my site speed and the fact that it minimizes requests to my server.

Cloudflare Argo option

When a request is made, Argo’s smart routing algorithm determines the optimal route through the Cloudflare private network.

If there is traffic congestion in an area, Argo will route the request via a different path.

Argo Animation

Argo is an on-demand Cloudflare feature available on any plan. You can read more about the pricing here.

Load Balancing

The load balancing feature reduces latency by load balancing traffic across multiple servers or by routing traffic to the closest geolocation region.

Cloudflare load balancing option

In short, websites need at least one server to work, but for highly demanding sites, you may need several servers.

That’s where a load balancing mechanism is required.

Once activated, Cloudflare’s servers will route traffic to the nearest server.

Cloudflare Load Balancing Illustration
Cloudflare Load Balancing Illustration

Load balancing is an on-demand Cloudflare feature available on any plan. You can read more about the pricing here.

Further reading:
What is Response Buffering?
Argo Landing page
Cloudflare’s load balancing landing page

CHAPTER 10Cloudflare Pricing

Let’s make this clear:

Features available on the free plan, such as the CDN, ARE NOT SLOWER than the same feature on the $200 plan.

You do get priority support with paid plans though 😉

Cloudflare Plans Banner

Some users claim that paid plans receive priority, but I have never found any evidence of this. And from my experience with dozens of Cloudflare sites, I have never noticed any particular slowdown with the free plan.

Update (June 4, 2018): It seems that the free package is actually slower in some parts of the world. Thanks Punit Sethi

Here are the main (performance-related) differences between each plan.

FREE

  • 3 page rules

PRO $20mo

  • 20 page rules
  • Polish images optimizations
  • Mirage mobile image optimizations

BUSINESS $200mo

  • 50 page rules
  • Polish images optimizations
  • Mirage mobile image optimizations
  • Railgun accelerated delivery
  • Bypass Cache on Cookie

ENTERPRISE?mo

  • 100 page rules
  • All features

CHAPTER 11Bonus Tips

This chapter introduces special things you can do with Cloudflare.

I’ll update this part every time I find something new.

Don’t hesitate to submit your special config or tip related to Cloudflare and performance.

Cloudflare bonus tips banner

Cache pages’ HTML with Cloudflare

I was very surprised to learn that Cloudflare can cache HTML pages.

This dramatically reduces the wait and helps display your page instantly.

Lucky you

I previously made a complete how-to-guide about Cloudflare page cache.
Take a look

Enable Server Push

Server Push is a new feature available with HTTP/2.

It lets you send data to the user without waiting for the user to ask for it.

Some resources are always sent to your site’s visitors, no matter what. Logos and stylesheets are good examples.

With this in mind, why not push everything necessary with the initial request?

As you can imagine, this can decrease a page’s rendering time.

HTTP/2 Server Push is exclusively for HTTPS sites

How activate Cloudflare Server Push

  1. Install the official WordPress plugin.
  2. Open your site’s wp-config.php file.
  3. Add the following code below the line /* That’s all, stop editing! Happy blogging. */
define('CLOUDFLARE_HTTP2_SERVER_PUSH_ACTIVE', true);

Further reading
How do I enable HTTP/2 Server Push in WordPress
Google Web Fondamental
A Comprehensive Guide To HTTP/2 Server Push

PHEW!Now It’s Your Turn

I’m so glad you stayed to the end.

I put A LOT of work into this guide. So I hope you enjoyed it.

Did I forget anything? Did you notice a speed improvement?

Let me know in the Comments section below.

Final banner

Leave a Reply

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

*