Cloudflare CDN for Beginners

Guide Overview:

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
Cloudflare Optimization
Verify Cloudflare Caching
Cache Maintenance

Cloudflare Initial Setup

  1. Sign up for a Cloudflare account.
  2. Enter your domain name in the Site field and click Add site.
  3. Click Next, choose the free plan, click Confirm plan, and click Confirm.
  4. After the scan completes, click Continue.
  5. Open a new browser tab and log into your current DNS hosting account.
  6. Edit your DNS settings for the same domain you’re currently adding to Cloudflare.
  7. Compare the discovered DNS records on the Cloudflare side, to the DNS records on the DNS Hosting account side.
  8. Add any missing DNS records on the Cloudflare side or just click Continue.
  9. On the current DNS Hosting account side, change the Nameservers to match what Cloudflare provides and click Continue. (Note: Although it rarely does, it may take up to 24 hours for the DNS to propagate across the web. Once DNS has fully-propagated, Cloudflare will show Status: Active. Proceed on once the propagation has completed.).
  10. Cloudflare > Overview > Advanced (link) > Pause Website (Note: With the website still in development, we want to keep the optimization portion of Cloudflare turned OFF.).
  11. Cloudflare > DNS > Change the A records so that they point to website’s server IP address.
  12. Cloudflare > Crypto > SSL > Change the encryption level to Full (Note: When you go to implement a non-custom SSL certificate like the free Let’s Encrypt certificate, Full is the appropriate Crypto choice, compared to say Full Strict. This is because Full Strict has an additional handshake that’s not required.).

Cloudflare Optimization

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.

Crypto

  • SSL: Full
  • Always use HTTPS: On
  • HTTP Strict Transport Security (HSTS): Enabled/Configured
    • Status: On
    • Max-Age: 6 months (Recommended)
    • Include subdomains: On
    • Preload: On
  • Automatic HTTPS Rewrites: On (Note: You may already have this enabled in your .htaccess file. We found a slightly better performance increase when using Cloudflare to rewrite HTTPS. In the end, just make sure not to duplicate rewriting.)

Speed

  • Auto Minify: All
  • Rocket Loader: Enabled (Note: This may cause issues with a website’s JavaScript. Be sure to thoroughly test your website and if any issues are discovered, work with the vendor (theme support, plugin support, etc. to find ways to exclude particular scripts from Rocket Loader.)

Caching

  • Caching Level: Standard
  • Browser Cache Expiration: 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.  Here are the page rules we currently use for this tier.

For Page Rule 1, by placing it above the settings of Rule 2, we are telling Cloudflare to avoid caching for the /wp-admin/ area, as well as /wp-login.php and /wp-json.php. (Note: We do not include a Cache Level: Bypass setting, to avoid bypassing cache for /wp-uploads/.).

For Page Rule 2, we are telling Cloudflare to “cache everything”, including the website’s static HTML. Since this rule comes second, as far as processing order, this allows the Rule 1 takes precedence.

  1. *.wpturnedup.com/wp-*
    • Rocket Loader: Off
    • Security Level: High
    • Disable Apps
  2. *.wpturnedup.com/*
    • Browser Cache TTL: 12 Hours
    • Cache Level: Cache Everything
    • Edge Cache TTL: 1 Month

Scrape Shield

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

Verify Cloudflare Caching

  1. Follow the GTmetrix section of our WordPress Optimization tutorial.
  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 this resource, 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.), you can view their support article.)

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 in 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 it’s 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 WP Rocket

  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.

At this point there should be any other settings you need as far as configuring this plugin. Cloudflare should already be configured using the Cloudflare website.

Let's empower others. Share the knowledge.

Share on twitter
Share on facebook
Share on linkedin