Implement Cloudflare's CDN For Better MyListing Security And Performance

Get the knowledge your online business needs to succeed.

Overview

Our Implement Cloudflare’s CDN for Better MyListing Security and Performance guide will show you how to easily configure the Cloudflare solutions according to best practice.

We use Cloudflare for almost every site we implement, in order to take advantage of the additional performance, security, reliability, and analytics it provides.

Cloudflare Initial Setup
Optimal Settings for MyListing
Verify Cloudflare Caching
Cloudflare Cache Maintenance
Cloudflare Web Analytics
Automatic Platform Optimization (APO)
WP Cloudflare Super Page Cache (BETA)
Grant Team Access

Cloudflare Initial Setup

For our initial setup, we will be covering Cloudflare’s FREE plan, which is typically enough for most people, especially those that don’t have the skills, time, desire, or budget to dive deeper into performance optimization.

  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.

At this point, we are going to continue on with our Cloudflare settings for MyListing, 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 MyListing

We currently use the settings below, but we’re 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 we are just using the defaults.

SSL/TLS

  • 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: 6 months (Recommended)
    • Include subdomains: On
    • Preload: On

Speed

Speed > Optimization

Minification is best done on your server (i.e. using a plugin) before the assets (JS, CSS, and HMTL) get pulled into Cloudflare.

If you are NOT using a WordPress performance plugin (ex. WP Rocket) that already performs minification for you, then you will want to enable all of Cloudflare’s Auto Minify options.

Caching

Caching > Configuration > Browser Cache TTL > Respect Existing Headers

Page Rules

Cloudflare’s FREE tier allows for up to 3 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.

Also, since MyListing websites have a reliance on WooCommerce, the focus should be on security and not attempting to cache the wrong areas (e.g. Cart, Checkout, etc.).

Below, are the page rules we recommend for MyListing 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.

Page Rule 1

We are telling Cloudflare to avoid caching the WooCommerce checkout process, which can include multiple pages.

Page Rule 2

We are telling Cloudflare to avoid caching for the WooCommerce cart.

Page Rule 3

We are telling Cloudflare to avoid caching for the sensitive login areas of a WordPress website.

Note: We highly-recommend changing the default login URL to something obscure, for both security and performance reasons, which is why we are showing ‘your-custom-login-url’ in the screenshots.

If you happen to be using a plugin like Perfmatters or WPS Hide Login, 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.

Scrape Shield

  • Email Address Obfuscation: Enabled
  • Server-side Excludes: Enabled
  • Hotlink Protection: Enabled

Verify Cloudflare Caching

  1. Using your preferred testing tool (GTMetrix, Pingdom, Web.dev, etc.), 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 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 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.

The manual option 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 or for your entire website.

We recommend clearing the cache for a specific URL,  in order to keep your overall cache untouched.

  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, we recommend WP Rocket, due to its overall ability to performance-optimize a website.

If using a no-cost solution is desired, you can use Cloudflare’s proprietary plugin.

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 Proprietary Plugin

  1. Install and activate the 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 Analytics

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

In plain English, with Cloudflare Web Analytics, you can gain great insights into your website’s traffic, without sacrificing your visitor privacy and the resources on your server.

  1. From the Home screen of your Cloudflare dashboard, click on the Web Analytics option.
  1. Enter your domain name and click the  ‘Next’ button.
  1. Copy the JS snippet by clicking on the ‘Click to copy’ link.
  2. 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: We use Perfmatters to insert code into the footer, from the Extras > General tab.).
  3. Back within Cloudflare, click the ‘Next’ button.
  4. 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.

Automatic Platform Optimization (APO)

Automatic Platform Optimization (APO) is a new offering from Cloudflare, that 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.

APO is included in all of Cloudflare’s paid plans.

Automatic Platform Optimization serves both static and dynamic content from Cloudflare edge reducing costly round trips to the origin and server processing time. All the communication occurs between the user’s device and Cloudflare edge and

Automatic Platform Optimization bypasses the cache on standard WordPress and WooCommerce cookies for authenticated users. This ensures customized content for a specific user is only visible to that user. Fonts are rehosted and served from our cache.

APO for WordPress improves site performance in multiple, 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, using your preferred testing tool (GTMetrix, Pingdom, Web.dev, etc.).

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’.

WP Rocket Users

If you have WP Rocket implemented on your website, be sure to disable the Cloudflare Add-on.

WP Dashboard > Settings > WP Rocket > Add-Ons > Toggle OFF Cloudflare.

Verify Successful Caching

  1. Using your preferred testing tool (GTMetrix, Pingdom, Web.dev, etc.), 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.

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

In this section, we’ll be detailing our recommendations for features that come with Cloudflare’s Pro plan, which has a price tag of $20/month per site.

Cloudflare’s FREE plan is good enough for a lot of websites and then the next logical jump might be to throw their Automatic Platform Optimization (APO) into the mix.

There are some good reasons why you might want to give the Pro plan a shot.

  • 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 MyListing 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.

Note: If we don’t specifically mention a setting, it is safe to assume that we chose the defaults for that particular area of Cloudflare.

Web Application Firewall (WAF)

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 MyListing websites, you typically will want to turn off all of the rulesets, except the ones listed below.

  • Cloudflare PHP
  • Cloudflare Specials
  • Cloudflare WordPress

Automatic Platform Optimization (APO)

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

WP Cloudflare Super Page Cache

Note: While some may see this as a replacement to Cloudflare’s APO, it doesn’t have the full power of APO, so our recommendation is to make a small investment for the real deal…APO.

We are tagging this as “BETA”, given how new this is to the WordPress repository, and recommend trying this out in your Staging environment before rolling it out to your Live site.

This is a FREE WordPress plugin that hooks into Cloudflare, bringing features to those on Cloudflare’s FREE plan, that typically are only available on their enterprise-level plans, similar to what Cloudflare’s APO service provides.

Most importantly, is the ability to truly utilize the ‘Cache Everything’ page rule, to greatly improve response times.

For dynamic websites such as those built with MyListing, it is not possible to effectively use the ‘Cache Everything’ rule without possibly running into problems, as it is not possible to exclude critical web pages from the cache, the sessions for logged in users, ajax requests and much more.

Thanks to this plugin all of this becomes possible!

This plugin can also be used in conjunction with other performance optimization plugins like WP Rocket, Perfmatters, etc., and is meant to be a replacement for Cloudflare’s paid Automatic Platform Optimization (APO) offering.

Before you begin with the implementation of this plugin, you first want to create a performance baseline, using your preferred testing tool (GTMetrix, Pingdom, Web.dev, etc.).

With the baseline in hand, we will be able to see how this plugin stacks up against APO and possibly save you the monthly cost of using that solution.

Please keep in mind that every website is different, so you really need to test thoroughly and figure out what works best for you and your wallet.

  1. If you already have the official Cloudflare plugin installed, you will want to uninstall it.
  2. Open a new browser tab, log into your Cloudflare account, and select the website you are adding this functionality to.
  3. From the Cloudflare ‘Overview’ tab, click on the ‘Get your API token’ link.
  4. API Tokens > API Keys > Global API Key > Click the ‘View’ button and enter your password.
  5. Copy your API Key to your clipboard.
  6. Install and activate the WP Cloudflare Super Page Cache plugin.
  7. WordPress Dashboard > Settings > WP Cloudflare Super Page Cache.
  8. Paste in your API Key from above, into the ‘Cloudflare API Key’ field.
  9. Enter your Cloudflare email address into the ‘Cloudflare e-mail’ field.
  10. Click the ‘Update Settings’ button.
  11. Your screen will refresh and you should see the option to choose your domain, which you will do, and then click ‘Update Settings’ again.
  12. At the top of the plugin settings page, click on the ‘Enable Page Caching Now’ button, which should present you with a ‘Page cache enabled successfully’ message.
  13. Click the ‘Ok’ button to continue.
  14. At the top of that same settings page, click on the ‘Test Cache’ button, which should present you with a ‘Page cache enabled successfully’ message. (Note: If you receive a message saying something about caching not working, that is likely a false-positive, and there are steps below to check.).

Third-Party Integrations

WP Cloudflare Super Page Cache provides a really nice and simple way to identify which third-party solutions you have in place and also provides instructions for any steps you might need to take to make everything play well together.

  1. WordPress Dashboard > Settings > WP Cloudflare Super Page Cache.
  2. Click on the ‘Third Party’ tab.
  3. Locate any items (plugins, providers, etc.) that are showing a green status (i.e. active) and perform any actionable steps that may be provided.

Note: For those of you on Kinsta and using WP Rocket, you’ll notice that WP Rocket shows as not active, and that’s because Kinsta handles 100% of the caching still.

Sticking with the subject of Kinsta, it’s probably a good idea to configure the ‘Automatically purge Kinsta cache when Cloudflare cache is purged’, since your users should always see consistent information.

Verify Successful Caching

To verify that everything is working properly, you’ll want to check the WP Cloudflare Super Page Cache headers of the displayed page in Incognito mode (browse in private).

The two possible headers to look for, are outlined below.

x-wp-cf-super-cache

If this header has a value of ‘cache’, WP Cloudflare Super Page Cache is active on the displayed page and the page cache is enabled.

If the value is ‘no-cache’, WP Cloudflare Super Page Cache is active but the page cache is disabled for the displayed page.

x-wp-cf-super-cache-active

This header is only present if the previously-mentioned ‘x-wp-cf-super-cache’ header has the value ‘cache’.

If this header has a value is 1, the displayed page should have been placed in the Cloudflare cache.

To find out if the page is returned from the cache, Cloudflare sets its header called ‘cf-cache-status’.

  • If its value is ‘HIT’, the page has been returned from cache.
  • If its value is ‘MISS’, the page was not found in the cache and you should refresh the page.
  • If its value is ‘BYPASS’, the page was excluded from WP Cloudflare Super Page Cache.
  • If its value is ‘EXPIRED’, the page was cached but the cache has expired.
  • If its value is ‘DYNAMIC’, the page was not cached by Cloudflare, as, there are missing Page Rules to implement custom caching.

Cache Preloader

Now that you have the plugin in place and caching working, you want to tell Cloudflare to start gobbling up all of your content.

  1. WordPress Dashboard > Settings > WP Cloudflare Super Page Cache.
  2. Click on the ‘Advanced’ tab.
  3. Click ton the ‘Start Preloader’ button.
  4. You should receive a ‘Preloader started successfully’ message, on which you’ll click ‘Close’.

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.

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.

Find a bug or typo? Please let us know.