How we use love Cloudflare 🧡

We’ve had some great feedback this year about our more technical posts, like the process of moving from Help Scout to FreeScout, and our recent switch from ActiveCampaign to FluentCRM.

I thought I’d take advantage of the holiday quiet to expand on a claim I make quite often: that Cloudflare is, hands-down, the best investment you can make for your website.

It’s better than any plugin. It can even make up for underpowered hosting. And it only costs $20 month.

In this post:

• What is Cloudflare?
• How does Cloudflare work?
• How we use Cloudflare
• Caching
  • Caching setup
  • Cache rules
  • WP Rocket
  • Practical implications
• Email
• Health checks
• Image optimization
• Security
  • Web Application Firewall
  • Challenges
  • Rate limiting
• Summary

#What is Cloudflare?

Cloudflare is a web infrastructure and security company that provides a range of services to help ensure the smooth operation of websites.

When you sign up for Cloudflare, you point your DNS records (more on that below) to Cloudflare instead of your own web server. Cloudflare then acts as a middle-layer for all incoming traffic to your website— providing performance improvements while also enhancing security.

Cloudflare is massive. They support over 25 million websites, and about 20% of the web’s traffic passes through Cloudflare.

#How does Cloudflare work?

For a more technical overview, see this Cloudflare article, but in short…

Normally, when someone types in your website in their browser, like www.mysite.com, your browser connects to a Domain Name Server (DNS) to convert that name into a numeric IP address, like 104.238.130.1.

This IP address points to the physical location of your website’s server. For example this site resides in Newark, New Jersey.

Anyone or anything trying to access your website (visitors, search engines, hackers) ends up knocking on the door of your physical server.

On your website, you probably have systems in place to protect the site and speed it up. You might be using a cache plugin like WP Rocket, or a security plugin like WordFence. These work well, but they still require resources on your server. A big surge in web traffic or a determined attacker can slow your website down or even take it offline.

When you use Cloudflare, you configure your DNS records to point to Cloudflare instead of to your server.

Cloudflare then receives all your incoming web traffic. It provides a ton of services without ever having to connect to your physical web server.

Once Cloudflare has confirmed the request is safe, and that it doesn’t already have a response stored in the cache, it allows the visitor to connect to your website.

This makes your website faster and more secure by serving the majority of your content from Cloudflare instead of from your physical server.

If we use this site as an example— over the last 30 days wpfusion.com received 6.33 million requests from 69,000 unique visitors. Almost 98% of that traffic was served by Cloudflare and never reached our server.

#How we use Cloudflare

To start, there are several Cloudflare plans. The free plan is a no-brainer and provides some great security benefits, but I think at $20 / month the Pro plan is the best return on investment you can get from a web service.

What services do we use with the Pro plan?

#Caching

The biggest benefit to Cloudflare Pro is the “Edge Cache”. This means that Cloudflare keeps a copy of your website in its global network of data centers.

When someone visits our site, for example from Syndney Australia, Cloudflare first checks to see if it has a copy of the requested page in the cache.

If it does, the page is delivered from Sydney instead of needing to connect all the way back to our “origin” server in New Jersey.

This has two benefits:

1. The connection time between Australia and New Jersey is normally about 0.2 seconds. By loading the content from the edge cache, the page loads faster.
2. Because your origin server doesn’t have to do any work to deliver the content, this frees up more resources for things that can’t be cached— like checkouts, running reports, and sending emails.

In our case, about two-thirds of requests for content on this site are delivered directly from the edge cache, and never reach our server at all.

#Caching setup

Enabling caching with Cloudflare is easy. Just install the free Cloudflare plugin and click Apply Default Settings.

This enables Cloudflare’s “Automatic Platform Optimization” for WordPress, which sets a few default rules:

1. When a visitor requests a page, if that page isn’t already cached, Cloudflare will copy that page into their global network of cache servers. The cached page is valid for 30 days.
   • Any requests to that page for the next 30 days will be delivered from the cache. After 30 days, the cache will be rebuilt the next time someone requests that page.
   • This also applies to images and static resources like CSS and JavaScript files.
2. If you update a page or post in WordPress, the Cloudflare plugin will automatically purge the cache for that page.
3. Cloudflare includes support for many popular plugins, like WooCommerce and Easy Digital Downloads. Dynamic pages such as the Cart and Checkout will automatically be excluded from cache.
4. Cloudflare is also compatible with caching plugins. We use WP Rocket, and clearing the cache via WP Rocket automatically clears the Cloudflare cache as well.

#Cache rules

In most cases, the default cache setup will work. However Cloudflare does let you override the defaults using Page Rules and the newer “Cache Rules”. These can be found in Cloudflare under the Caching and Rules headings.

Each setup will be different, but for our Easy Digital Download store, we have two sets of rules. The first is under Page Rules and sets some scenarios where the cache and security should be bypassed.

Most of these relate to pages on our site where we’re using dynamic content for guests— for example the contact form, login form, and feature requests portal.

We also use a wildcard match of https://wpfusion.com/*edd* to match any of the Easy Digital Downloads endpoints. This makes sure that webhooks from PayPal and Stripe, as well as file downloads and license checks don’t get cached.

Our second set is under the newer Cache Rules tab, and here we set some exceptions where we do want to cache a response that would normally be un-cached:

We support about 30,000 websites running WP Fusion and each of them “calls home” once a day to check for updates. This can require a lot of server resources, so we’ve created rules to cache the API endpoints for checking the latest WP Fusion version so that it’s cached via Cloudflare for 12 hours.

This means after we release a WP Fusion update, it can take up to 12 hours to show up via automatic update, but it also means that we can significantly reduce the number of requests that hit the origin server.

Looking at the last 7 days, almost half of these EDD Software Licensing requests were served by Cloudflare ✅.

#WP Rocket

I have to admit to being confused as to why I would still use a local caching plugin like WP Rocket (or server-side caching) to convert database queries into static content if I chose to use Cloudflare’s CDN. Would Cloudflare not do that job if WP Rocket was absent?

• Gary Elley – 12/24/2023

Gary asked a good question in the comments about something we left out of the first version of this post— why do we use a caching plugin in addition to Cloudflare?

While we don’t rely on WP Rocket’s page cache very much, we do use a lot of other WP Rocket features:

1. Preloading: WP Rocket can read your sitemap file and simulate a visit to each page on your site, to pre-load your cache files. This also triggers Cloudflare to cache the same pages, so by the time actual visitors reach the site, the pages are already in Cloudflare’s cache.
2. LazyLoad: We use LazyLoading on images and backgrounds to speed up the load time of pages.
3. CSS Optimization: I’m a huge fan of WP Rocket’s Remove Unused CSS feature. It can be difficult to set up— we had to put in a lot of overrides to get everything working correctly. But when it’s set up, it removes any CSS styles from pages where those styles aren’t in use. This reduces the page size, and improves your performance score with testing tools like PageSpeed Insights.
4. JavaScript Optimization: We use Load JavaScript deferred and Delay JavaScript execution to speed up the initial load time for our pages.

While there are other performance and optimization plugins that offer similar features, in my experience the Remove Unused CSS feature with WP Rocket makes the biggest difference in terms of optimization.

#Practical implications

Not only does this make our site faster for visitors, it also lets us save money on hosting.

Since half our traffic is handled by Cloudflare, we’re able to run the site on a relatively affordable server, at only $60 / month. It pays for itself.

#Email

Since 2021 Cloudflare has supported email routing (even on the free plan). This lets you easily create new email addresses at your domain, and forward them to a destination of choice (for example a Gmail address).

We use Cloudflare for all our email addresses. If anything bounces or goes missing, it’s also easy to see why in Cloudflare’s dashboard.

#Health checks

We used to use UptimeRobot to notify us if any of our websites went down, but a couple of years ago we moved that into Cloudflare as well, using the Health Checks feature.

In Cloudflare go to Traffic » Health Checks, and create a new health check. Select a URL on your site. In our case we use wp-admin/admin-ajax.php?action=cloudflare_healthcheck, since admin-ajax.php loads pretty fast and isn’t cached by default. We’ve set the interval to two minutes.

Once every two minutes, Cloudflare pings the URL and records the response time.

If there’s an error or timeout, we get an email alert.

By clicking Health Check Analytics, you can also view reports on uptime and latency for the last seven days.

#Image optimization

There is a new-ish image format called WebP which is about 30% smaller than JPEG images, without sacrificing any quality.

Obviously it’d be inconvenient to go through all your old images and convert them to a different format. There are plugins that do this, like Smush, but most feature require a paid subscription.

Thankfully Cloudflare makes this easy. Head to Optimization » Image Optimization and turn on Image Resizing.

Cloudflare will copy your site’s images into their cache, convert them to WebP, and resize the image for optimal display.

#Security

We actually don’t use any security plugins on our websites, Cloudflare handles all security.

That works in a few ways:

#WAF

The Web Application Firewall gives you a configurable level of sensitivity towards potentially threatening visitors.

By setting it to Medium under Security » Settings, Cloudflare will automatically challenge any visitor who has exhibited suspicious behavior within the last 14 days.

In a couple of instances where our site was being directly attacked we’ve been able to activate I’m under Attack! mode, which challenges all incoming traffic.

This quickly puts a stop to any kind of bot or DDoS (Distributed Denial of Service) attack, and gives us time to figure out where the malicious traffic is coming from and how to block it in a more targeted way.

In some cases where we have had recurring issues from specific countries, specific IP addresses, or to specific endpoints (like the REST API or xmlrpc.php), we can then add firewall rules under Security » WAF » Custom Rules to challenge any matching traffic.

In addition to the automatic firewall configuration in the security settings, we also make use of Challenges and Rate Limiting.

#Challenges

To prevent brute force login attempts, every login page is protected by a “managed challenge“. You can see this visiting the login page on this site.

In most cases, you will be redirected automatically to log in. In some cases you might be asked to solve a puzzle to confirm you’re a human.

This is configured under Security » WAF (Web Application Firewall) » Custom Rules in Cloudflare.

#Rate limiting

Many vulnerabilities in WordPress involve repeatedly trying different credentials or combinations of code patterns to try to get access to a site.

To protect against this, we will show a challenge to anyone who visits the site more than 10 times in 10 seconds.

This can be configured under Security » WAF » Rate limiting rules.

#Summary

I’m not getting paid to write this post (Cloudflare doesn’t have an affiliate program 😉).

I just really believe it’s one of the best tools out there, for any kind of website.

Even people I talk to who are already using Cloudflare often don’t realize how many features it has built in. They’re also adding new features all the time (for example we’re planning to cancel Vimeo and switch to Cloudflare Stream for video hosting).

In this post I shared some of the tricks we use to keep our sites fast and secure. What are your favorite Cloudflare features? Let me know in the comments 🤓👇

Thanks for reading! 🧡
– Jack