Implement Cloudflare’s CDN for Better WordPress Security and Performance

Cloudflare is so well regarded for what it offers, that my preferred WordPress website host partnered with them, to bring enterprise-level features to their customers for no extra cost.

I use Cloudflare for every WordPress website, in order to take advantage of the additional performance, security, reliability, and analytics it provides.

While this guide is applicable to all WordPress website owners, it is especially applicable to those who host with Kinsta, as that is the hosting solution I’m highly in tune with.

Cloudflare Initial Setup

For the initial setup, I’ll be covering Cloudflare’s FREE plan, which can sometimes be enough for most people, especially those that don’t have the skills, time, desire, or budget to dive deeper into performance optimization.

Pro Tip: At a minimum, I highly recommend Cloudflare’s free plan and their APO add-on. If it fits in your budget, I would go with Cloudflare’s Pro plan which includes APO, amongst many other great benefits.

  1. Sign up for a FREE Cloudflare account.
  2. Enter your domain name in the Site field and click the ‘Add site’ button.
  3. Choose the FREE plan and click the ‘Continue’ button.
  4. After a quick scan of your DNS records completes, compare the discovered DNS records on the Cloudflare side, to the DNS records within your DNS Hosting account.
  5. Add any missing DNS records on the Cloudflare side or just click the ‘Continue’ button. (Note: Typically, Cloudflare will capture all of your DNS records, but it’s always good to double-check.).
  6. On the current DNS Hosting account side, change the Nameservers to match what Cloudflare provides, and save changes there.
  7. Back in Cloudflare, click the ‘Done, check nameservers’ button.
  8. Click the ‘Done, check nameservers’ button.
  9. Click the ‘Finish Later’ link to skip the Quick Start Guide.

Let’s continue on with the Cloudflare settings, giving the DNS changes a chance to propagate across the web. 

DNS propagation can take up to 24 hours, depending on where your DNS was previously hosted, but you should experience no downtime as far as your domain name resolution goes.

Optimal Settings for WordPress

I currently use the settings below, but I’m constantly testing for the best optimization, so please check back in every now and then to get the latest setting recommendations.

If a setting is not specifically mentioned, assume I’m just using the defaults.

SSL/TLS

Edge Certificates

  • Overview >  SSL/TLS encryption mode: Set to Full (strict). (Note: The ability to do this, depends on your SSL Certificate, but if you are on Kinsta, you can safely use Full (strict) mode.
  • Edge Certificates > Always use HTTPS: On
  • Edge Certificates > HTTP Strict Transport Security (HSTS): Enabled/Configured
    • Status: On
    • Max-Age: 12 months (Note: Cloudflare lists a recommendation of 6 months, but the actual recommendation, according to them is 12 months.)
    • Include subdomains: On
    • Preload: On (Note: This enables HSTS to be preloaded. See the ‘HSTS Preload’ section below, for steps to enable preloading.).
  • Edge Certificates > Minimum TLS Version: 1.3
HSTS

HSTS is a response header that tells a browser to always use SSL/TLS to communicate with your site. It doesn’t matter if the user, or a link they are clicking, specifies HTTP, HSTS will remove the ability for a compatible browser to use HTTP and will enforce the use of HTTPS.

This still leaves a user vulnerable on their very first connection to a site though. HSTS preloading fixes that.

What is HSTS Preloading

Today, web browsers allow websites to be “preloaded” as HSTS-only. This means that web browsers will always use HTTPS to connect with those websites.

For example, wpturnedup.com has been preloaded into all major web browsers. If you type wpturnedup.com into your browser and press Enter or click on a link without https in the protocol, your browser knows to connect to https://wpturnedup.com instead of http://wpturnedup.com, even though you didn’t specifically tell it to.

The same thing happens if you go to a subdomain of wpturnedup.com like community.wpturnedup.com.

By preloading wpturnedup.com, I’ve ensured that browsers will always make secure HTTPS connections to my website.

Enable HSTS Preloading
  1. hstspreload.org
  2. Enter your domain name (e.g. wpturnedup.com) and click the ‘Check HSTS Preload Eligibility’ button.
  3. If your domain is eligible for HSTS preloading, check the two confirmation boxes, and click the ‘Submit’ button.

If everything checks out, you should see a success message (“wpturnedup.com is now pending inclusion in the HSTS preload list!)

  1. Set a 1-week calendar reminder to check the status of your submission.

Firewall

Bots

Bot Fight Mode: Toggle ON. (Note: Be sure to thoroughly test your site after turning this on, as this could block good, 3rd party bots that you actually want coming through.)

Speed

Optimization

Auto Minify
  • JavaScript: Toggle ON.
  • CSS: Toggle ON.
  • HTML: Toggle ON.

Note: If you are using an optimization plugin that also offers minification features, I recommend only doing minification within a single solution, so in this case, only at the CDN level.

Caching

Configuration

  • Caching Level: Standard
  • Browser Cache TTL: Respect Existing Headers
  • Crawler Hints: Enable (Note: This tells search engines to only crawl your content that has changed, thus reducing the load on your server.).
  • Always Online: Disable. (Note: This setting is useless for eCommerce websites and is, therefore, a waste of your server resources since Cloudflare needs to crawl your website for this to work. I’d consider disabling this, regardless of the type of website you have.).

Tiered Cache

Argo Tiered Cache: Toggle ON. (Note: If you serve a global audience and have the budget, I would consider giving an Argo a shot.).

Argo is a service that uses optimized routes across the Cloudflare network to decrease loading times, increase reliability, and reduce bandwidth costs.

Enabling Argo activates Argo Smart Routing, reducing Internet latency by 30% and connection errors by 27% on average.

Argo is a usage-based product and costs USD $5.00 per month, plus usage. After exceeding the first gigabyte of traffic between Cloudflare and your visitors, you are charged USD $0.10 per additional gigabyte.

Configuration

Browser Cache TTL: Respect Existing Headers.

Page Rules

Cloudflare’s FREE tier allows for up to three page rules, which can be used to further secure and/or optimize your website.

Please note that a common mistake website owners make is to create a page rule to cache what Cloudflare already caches by default

For websites that have a heavy reliance on WooCommerce, the focus should be on security while avoiding caching the wrong areas (e.g. Cart, Checkout, etc.). Again, if you can, at a minimum, use Cloudflare’s APO  add-on service to get around this.

Below, are the page rules I recommend for WooCommerce websites that are covered under Cloudflare’s FREE tier.

Single Domain Scenario

If you have a single domain (e.g. onlinedirectory.network), you will use the rules shown in the screenshot below.

cloudflare cdn for mylisting websites page rules

Page Rule 1

I’m telling Cloudflare to avoid caching the WooCommerce checkout process, which can include multiple pages.

Page Rule 2

I’m telling Cloudflare to avoid caching for the WooCommerce cart.

Page Rule 3

I’m are telling Cloudflare to avoid caching sensitive login areas of a WordPress website.

Note: I highly recommend changing the default login URL to something obscure, for both security and performance reasons, which is why ‘your-custom-login-url’ is showing in the screenshots. If you happen to be using a plugin like Perfmatters, it’s super easy to change your default login URL.

Subdomain Scenario

If you have subdomains (e.g. demo.onlinedirectory.network) and you want the Page Rules to apply to those domains, you will use the rules shown in the screenshot below.

cloudflare cdn for mylisting websites subdomain page rules

Network

  • HTTP/3 (with QUIC): Enabled
  • 0-RTT Connection Resumption: Enabled

Scrape Shield

  • Hotlink Protection: Enabled

Verify Cloudflare Caching

  1. Using your preferred testing tool, run a performance test for your website. (Note: I recommend Webpagetest.org and have written a How to Audit the Performance of Your WordPress Website guide that covers how to use it.).
  2. When the results come back, click on the Waterfall tab.
  3. Expand the first item on the list which should be your domain name.
  4. Click on the Response tab.

If Cloudflare is caching a particular asset, you will see a result of CF-Cache-Status: HIT.

Note: For more information about the various Cloudflare caching codes (e.g. HIT, MISS, EXPIRED, etc.), view their support article on this topic.

cloudflare cdn for mylisting websites super cache success

Cloudflare Cache Maintenance

As website professionals push out new content (copy, design, etc.) it’s important to ensure customers and users are being served the correct (current) content. 

Manual Maintenance

If you’re someone who runs a really tight ship, there is a manual process for clearing Cloudflare’s cache, which is good for keeping plugins to a minimum, while also ensuring the cache is absolutely getting cleared. 

To clear Cloudflare’s cache, you have the option to clear the cache for a specific URL, which I recommend in order to keep your overall cache…cached.

  1. Cloudflare > Caching: Custom Purge.
  2. Enter the URLs you which to purge, using the simple instructions that Cloudflare provides.
  3. Click Purge.

While the process to manually clear Cloudf’lare’s cache is simple, it is also easily forgotten, and that’s where the automated options come into play.

Automated Maintenance

To automate the Cloudflare cache-clearing process, you could use a plugin like WP Rocket.

If using a no-cost solution is desired, you can use Cloudflare’s proprietary plugin that can be found in the WordPress repository.

Cloudflare Cache Management with the WP Rocket plugin

  1. Install and activate WP Rocket.
  2. Settings > WP Rocket > Add-Ons: Toggle on the Cloudflare add-on.
  3. Click Modify Options.
  4. Log into your Cloudflare account.
  5. Using your Cloudflare account, fill in the Global API Key, Account Email, and Zone ID.
  6. Save changes.

Cloudflare's Official Plugin

  1. Install and activate the official Cloudflare plugin.
  2. Settings > Cloudflare: Click the Sign-in link.
  3. Add your Cloudflare email and API Key.
  4. Click Save API Credentials.
  5. Automatic Cache Management: Toggle ON.
  6. Click ‘I’m Sure’.

Cloudflare Web Traffic Analytics

Cloudflare provides privacy-first, lightweight, accurate web analytics, for customers that are at least on their Pro plan.

If you’re not already using another solution for your analytics, Cloudflare’s analytics might be worth looking at.

    1. Cloudflare Dashboard > Analytics
    2. Enter your domain name and click ‘Next’.
    3. Copy the JS snippet by clicking on the ‘Click to copy’ link.
    4. Add the JS snippet above the closing body tag (i.e. footer) of your website, using the method you typically use to insert code. (Note: I recommend Perfmatters or WPCodeBox for adding scripts to your website.).
    5. Back within Cloudflare, click the ‘Next’ button.
    6. Click the ‘View Analytics’ button to see how your hard work has paid off.

    Just as would be the case with Google Analytics, you may not have enough traffic yet to get stats, so just be aware you may need to check back and view your stats once you get more traffic.

    Once you do start to generate traffic, your Cloudflare Web Analytics will start to show data similar to what’s shown in the screenshots below.

Cloudflare APO

In my opinion, every WordPress website should consider implementing Cloudflare’s Automatic Platform Optimization (APO) service.

Websites that are highly dynamic in terms of how they serve up data on the front end and being able to optimize that content is where APO shines. Also, APO serves both static and dynamic content from Cloudflare’s edge, reducing costly round trips to the origin and server processing time.

APO comes with a $5/month cost for those on Cloudflare’s FREE plan, and for that low price you are able to cover all of your subdomains as well

Automatic Platform Optimization is included in all of Cloudflare’s paid plans.

APO for WordPress Improves Site Performance in Major Ways

  • Typically Cloudflare only caches static content, but with APO, Cloudflare can also cache dynamic content like HTML so the entire site is served from cache.
  • Third-party fonts are cached and served by Cloudflare.
  • With APO, you don’t have to change how you manage your WordPress site, as updates you make to the content of your website are automatically cached on Cloudflare’s Edge Servers to ensure stale content isn’t served up.
  • For logged-in or admin users, Cloudflare will bypass the cache ensuring that private content is not cached and served to other visitors.
  • and more…

Before you begin with the implementation of Cloudflare APO, you first want to create a performance baseline that will help you determine if the cost (albeit low cost) of APO is worth the results that come from using it.

I recommend following the How to Audit the Performance of Your WordPress Website guide when creating your baseline.

Implementing APO

Before you begin with the implementation of Cloudflare APO, you first want to create a performance baseline, using your preferred testing tool (e.g. Webpagetest.org). 

Having a baseline will help you determine if the cost (albeit low cost) of APO is worth the results that come from using it.

  1. Create and document your performance baseline.
  2. Log into Cloudflare.
  3. If you have multiple websites on Cloudflare, select the website where you want to implement APO.
  4. Speed > Optimization > Optimized Delivery > Click Purchase and checkout.
  5. Toggle on ‘Automatic Platform Optimization for WordPress’.
  6. From your website, install and activate the official Cloudflare plugin.
  7. From Cloudflare, go to Speed > Optimization > Optimized Delivery > Automatic Platform Optimization for WordPress and click the ‘Check again’ link to verify the Cloudflare plugin is checking in.
  8. From Cloudflare, go to Overview > Get your API token > API Tokens > Click the ‘Create Token’ button.
  9. Choose the ‘WordPress’ template.
  10. Accept the default template settings by clicking the ‘Continue to summary’ button.
  11. Click the ‘Create Token’ button.
  12. Copy your API Token.
  13. Return back to the Cloudflare plugin settings on your website and click the ‘sign in’ link.
  14. Enter your email address, paste in your API Token, and ‘Save API Credentials’.

Verify Successful Caching

  1. Using your preferred testing tool (e.g. Webpagetest.org), run a performance test for your website.
  2. When the results come back, click on the Waterfall tab.
  3. Expand the first item on the list which should be your domain name.
  4. Click on the Response tab.

If Cloudflare APO is properly implemented, you should see the following values, in which case you can go ahead and run some performance tests to check out your improvements.

  • age: How long ago, in seconds, Cloudflare cached the assets on this page you’re testing.).
  • cf-cache-status: You’re looking for a value of ‘HIT” here, which says Cloudflare is caching your content.
  • cf-edge-cache: You’re looking for ‘cache,platform=wordpress’, which indicates this is a page that Cloudflare can cache.
cloudflare cdn for mylisting websites apo success

At this point, you will want to run some new tests and compare the results with those of your baseline to see how your website is now performing.

Cloudflare Pro Plan Configuration

Cloudflare’s FREE plan is good enough for a lot of websites and then the next logical jump might be to add on their Automatic Platform Optimization (APO) offering, but there are some good reasons why you might want to give the Pro plan ($20/month per site) a shot from the start.

  • Web Application Firewall (WAF): Enhanced security without impacting website performance.
  • Polish: Improve image load time by optimizing images hosted on your domain, and optionally, enable the serving of WebP images for additional performance benefits.
  • Automatic Platform Optimization: Improve the performance of your WordPress website by serving it to users from Cloudflare’s edge network and caching third-party fonts, which essentially gives you the benefits of a static site without any changes to how you manage your site, resulting in a consistently fast Time to First Byte (TTFB) and faster loading content.

In this section, I’ll be detailing my recommendations for features that come with Cloudflare’s Pro plan, and if I don’t specifically mention a setting, it is safe to assume I went with the defaults for that particular area of Cloudflare.

Firewall

Managed Rules

Cloudflare’s WAF uses frequently updated rulesets to block common attacks like cross-site scripting (XSS) and SQL injections.

As new vulnerabilities are exposed across the web, Cloudflare protects websites just by having the WAF turned on, while their in the background, their engineers are also hard at work.

Using Cloudflare’s WAF, allows you to protect your website at the edge, eliminating the need for server-based, WAF security plugins, which in turn keeps additional load off of your server. 

Cloudflare Dashboard > Firewall > Managed Rules > Web Application Firewall: Toggle ON.

Aside from turning OFF the Cloudflare Flash managed ruleset in the next section, we leave everything else under the Managed Rules tab of Cloudflare at their default settings, to start.

Cloudflare Managed Ruleset

For WordPress websites, you typically will want to turn off all of the rulesets, except the ones listed below.

  • Cloudflare PHP
  • Cloudflare Specials
  • Cloudflare WordPress

Bots

Super Bot Fight Mode

Definitely Automated: Block. (Note: Be sure to thoroughly test your site after turning this on, as this could block good, 3rd party bots that you actually want coming through.)

Speed

Optimization

Image Resizing

You can resize, adjust quality, and convert images to WebP format, on-demand, caching every derived image at the edge, so you store only the original image.

This allows you to adapt images to your website’s layout and your visitors’ screen sizes, quickly and easily, without maintaining a server-side image processing pipeline.

This offering is similar to what ShortPixel Adaptive Images provides, as covered in the Image Optimization for MyListing Websites guide.

So, when might you use Cloudflare’s offering and when might you use ShortPixel’s?

If you are already paying for Cloudflare’s Pro plan, using their ‘Image Resizing’ option, as well as their other image optimization offerings like Polish, and avoiding the additional ShortPixel Adaptive Images plugin, might be something to strongly consider.

If you are already paying for or paid for ShortPixel image credits, using the ShortPixel Adaptive Images plugin might be something to strongly consider, as that utilizes the Bunny.net CDN for serving up images.

In this case, we would use the combination of ShortPixel Adaptive Images and Cloudflare FREE plan with APO.

Cloudflare Image Resizing is a usage-based product that gives you 50,000 image resize requests per month for free, and then charges $9 for every additional 50,000 requests each month. 

I cannot imagine needing more than 50,000 requests each month for a majority of the WordPress websites out there, but when/if you do enable this offering, do set up a notification so you can keep an eye on your usage.

Automatic Platform Optimization (APO)

I covered APO in the previous section, so you’ll just refer to the steps from that section to set it up.

Cloudflare Domain Hosting

Cloudflare provides domain registrar services with no-markup pricing, as is often seen with many domain hosting providers.

As an example, a domain I had on Namecheap was renewing at $13.48 per year, whereas with Cloudflare it was $8.39 per year.

With Cloudflare, you can securely register new domains, transfer existing domains, and effortlessly consolidate and manage all your domain portfolios, with transparent, no-markup pricing.

Register New Domains With Cloudflare

  1. Log into Cloudflare.
  2. Click the ‘Registrar’ tab at the top of the Cloudflare Dashboard.
  3. Click ‘Register’ from the menu at the left.
  4. Enter a domain name (e.g. wpturnedup.com) in the search box and click ‘Search’.
  5. Rinse, repeat, until you find a domain name that’s available, and then click ‘Purchase’.
  6. Choose the desired registration period.
  7. Complete the purchase.

Transfer Domains Into Cloudflare

  1. Log into Cloudflare.
  2. Select any of your websites to get started.
  3. Overview > Domain Registration > Click the ‘Manage domain’ link.
  4. Click ‘Transfer to Cloudflare’.
  5. Click ‘Transfer’. (Note: This will bring up ALL of the websites you have added to your Cloudflare account, so this is a convenient way to transfer all your domains in one shot if you want.).
  6. Select the domains you wish to transfer and click ‘Confirm Domains’.
  7. Follow the onscreen instructions for your current registrar, pasting in the authorization codes in the boxes provided, for each domain.
  8. Click ‘Confirm Authorization Codes’.
  9. Fill out the contact information and click ‘Confirm and Finalize Transfer’.

One of the things you might want to do after your domains have finished transferring into your Cloudflare account is to set them to auto-renew.

This can be done by going to the root of your Cloudflare account, clicking on the ‘Registrar’ tab, clicking on the ‘Manage’ link, and then toggling ON the ‘Auto-renew’ option.

Notifications

Cloudflare allows you to set up notifications in order to keep an eye on feature usage (i.e. billing), to know when your website is down, etc., and I’ll give you a couple of notification examples below.

Origin Monitoring Notifications

This notification will tell you when your website is offline, according to how Cloudflare sees things.

I also recommend adding an additional monitoring/notification point, as covered in the How to Monitor Your Website Uptime and Performance guide.

  1. Log into Cloudflare.
  2. Click on the ‘Notifications’ tab.
  3. Notifications > Click ‘Add’.
  4. Original Monitoring > Click ‘Select’
  5. Notification Name > Website Uptime
  6. Description > Enter an optional description
  7. Click ‘Add email recipient’ and enter the desired email address
  8. Click ‘Create’

Image Resizing Notifications

As part of Cloudflare’s Pro plan, 50,000 image resize requests are provided for free each month plan so we will set up a notification to go out when/if 40,000 requests are hit.

  1. Log into Cloudflare.
  2. Click on the ‘Notifications’ tab.
  3. Notifications > Click ‘Add’.
  4. Billing > Click ‘Select’
  5. Notification Name > Image Resizing
  6. Description > ‘Applies to Cloudflare > Speed > Optimization > File Size Optization > Image Resizing’
  7. Product > Image Resizing
  8. Notify when the total number of image resizing requests exceeds > 40,000
  9. Click ‘Add email recipient’ and enter the desired email address
  10. Click ‘Create’

Bulk Redirects

Bulk Redirects allow you to define a large number of redirects that navigate the user from a source URL to a target URL.

These redirects do not support any string replacement operations or regular expressions, but you can configure URL Redirect parameters that affect their URL matching behavior and their runtime behavior.

Pricing

When determining the available Bulk Redirect features and their limits, Cloudflare takes into account the highest plan on your account.

Free Plan

  • Number of Edge Rules (includes Bulk Redirect Rules): 15
  • Number of Bulk Redirect Lists: 5
  • Number of URL Redirects across lists: 20

Pro Plan and Business Plan

  • Number of Edge Rules (includes Bulk Redirect Rules): 15
  • Number of Bulk Redirect Lists: 5
  • Number of URL Redirects across lists: 500

Enterprise Plan

  • Number of Edge Rules (includes Bulk Redirect Rules): 50
  • Number of Bulk Redirect Lists: 25
  • Number of URL Redirects across lists: 10,000

Configure Redirects

  1. From your Cloudflare dashboard, hover over your user avatar in the menu area and choose ‘Billing’.
  2. Click ‘Bulk Redirects’.
  3. Click ‘Create a Bulk Redirects list’.
  4. Click ‘Create new list’.
  5. List Name > Give your list a name and put in an optional description.
  6. Content Type > Redirect.
  7. Click ‘Create’.
  8.  Input the ‘Source URL’ (i.e. where you are redirecting from) and the ‘Target URL’ (i.e. where you are redirecting to).
  9.  Ensure the Status is ‘301’.
  10. Click ‘Add to list’.

At this point, you might think you’re all set with your redirect, but that’s not the case. You now need to add your redirect list to a redirect rule so that it’s deployed.

  1. Click on ‘Bulk Redirects’ from the Cloudflare menu.
  2. Click ‘Create Bulk Redirects’.
  3. Add a name for the redirect rule.
  4. Select the ‘Bulk Redirect List’ you configured above.
  5. Click ‘Save and Deploy’.
  6. Test your redirection.

Grant Team Access

Cloudflare offers an easy way to grant access to your in-house team, consultants, etc., and the steps below walk you through granting access.

  1. Log into Cloudflare.
  2. Click Members from the top menu.
  3. Enter the email address of the person you would like to invite.
  4. Click Invite. (Note: If you receive an error message that typically means you need to first verify your own account, using the email Cloudflare sends to you upon account creation.).