Implement Cloudflare's CDN For Better MyListing Security And Performance

Building better MyListing websites. One guide at a time.

Table of Contents

Overview

Guide Updated: 9/14/2021

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.

Cloudflare is so well regarded for what it offers, that our preferred WordPress host for MyListing websites partnered with them, to bring enterprise-level features to their customers for no extra cost. We use Cloudflare for every MyListing website, in order to take advantage of the additional performance, security, reliability, and analytics it provides.

While this guide is applicable to all MyListing website owners, it is especially applicable to those who host with Kinsta, as that is the hosting solution we are highly in tune with.

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

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: 6 months (Recommended)
    • Include subdomains: On
    • Preload: On
  • Edge Certificates > Minimum TLS Version: 1.2

Firewall

Bots

Bot Fight Mode: Toggle ON.

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, we recommend only doing minification within a single solution, so in this case, only at the CDN level.

Caching

Tiered Cache

Argo Tiered Cache: Toggle ON.

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 heavy 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, 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.

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: We recommend Webpagetest.org and have written a How to Audit the Performance of Your MyListing 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 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 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 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. We have replaced Google Analytics on all of our websites, with this solution, as it provides us with all the information we need while not adding a performance hit to our websites.

  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.

Cloudflare APO

In our opinion, every MyListing website should be implementing Cloudflare’s Automatic Platform Optimization (APO) service. Why? MyListing websites 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 wellAPO 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, 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’.

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

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

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

In this section, we’ll be detailing our recommendations for features that come with Cloudflare’s Pro plan and if we don’t specifically mention a setting, it is safe to assume that we chose 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 MyListing 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 our 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. We cannot imagine needing more than 50,000 requests each month for a majority of the MyListing websites out there, but when/if you do enable this offering, do set yourself a reminder to check in on your usage, just until you get a sense of what your usage is going to look like going forward.

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.

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

WooCommerce Subscriptions Ready

The latest version of the WooCommerce Subscriptions plugin is included (unlicensed) and once you have a Starter Site in hand, you can easily put in your own pricing, package features, graphics, etc.

Should you not wish to use WooCommerce Subscriptions, you can simply turn the Listing Subscription packages into standard MyListing packages in just a few clicks and be on your way.

  • Custom WooCommerce Endpoint Design
  • WooCoommerce Subscriptions Setup
  • Listing Subscription Packages
  • Listing Subscription Switching
  • Stripe Payment Gateway Plugin
  •  and more…

Note: The latest version of the WooCommerce Subscriptions plugin is included, but you need to purchase your own license or sign up for a qualifying MyListing Website Care plan if you wish to receive future plugin updates and support.

Premium Assets

Get licensed, premium plugins, valued at over $600 in the first year alone, making a Starter Site investment a no-brainer.

You will get licensed copies of all the plugins listed below, with the exception of the WooCommerce Subscriptions and WooCommerce Product Vendors, and the licenses are yours to keep, for as long as the plugins remain on your website.

  • Admin 2020 ($39)
  • Crocoblock Suite ($130)
  • Elementor Pro ($49)
  • Perfmatters ($25)
  • Permalink Manager Pro ($45)
  • SEOPress Pro ($39)
  • WooCommerce Product Vendors ($79) 
  • WooCommerce Subscriptions ($199)
  • WP Rocket ($49)