It doesn’t matter how fast your WordPress host is; you can never overcome network latency. A content delivery network (CDN) like Cloudflare fixes this by storing copies of your assets (images, CSS, and JS) on edge servers around the globe. When a visitor looks up your website, the content is delivered from the closest geographical server.
With Cloudflare Automatic Platform Optimization (APO), you can take this even further and serve the entire page (images, CSS, JS, and HTML) from the edge server. This means a request doesn’t even hit the origin server (your hosting provider). This results in insanely low time-to-first-byte (TTFB) and lightning-fast load times.
We’ll go tab by tab and share all the settings we use for Cloudflare on our WordPress sites (including perfmatters.io). If you don’t see a section mentioned, it means we most likely left that as the default on Cloudflare. This article explicitly focuses on performance; security settings might vary based on your needs.
It’s also important not to toggle on every setting just because it looks our sounds good. Many times security features have a performance cost associated with them.
Cloudflare setup on WordPress site
The first thing you’ll need to do (if you haven’t already) is create a free Cloudflare account and point your domain (DNS). Follow these steps.
Next, you’ll need to configure Cloudflare on your WordPress site. There are a couple of different ways to do this.
(Option 1) Free Cloudflare plugin
Your first option is to install the free WordPress Cloudflare plugin and connect your account with your API key. If your hosting provider already integrates with Cloudflare, you’ll probably want to skip to Option 2.
Many other WordPress optimization plugins also have integrations with Cloudflare.
(Option 2) Enable Cloudflare hosting integration
The second option is to enable the Cloudflare integration with your hosting provider. Kinsta is a great example of this as Cloudflare powers its CDN integration. With that being said, you might need to reach out to them to change one of the settings we’ll dive into below.
Cloudflare overview settings
On the “Overview” tab, you’ll want to make sure you don’t have either of the following options enabled:
- Under Attack Mode
- Development Mode
Both of these will impact your site’s performance in a negative way. Development mode, for example, will bypass Cloudflare caching altogether. These should only be enabled when troubleshooting or if you think your site is undergoing a DDoS attack.
Cloudflare DNS settings
The most important thing regarding performance on the “DNS” screen is whether or not you have enabled a DNS record to use Cloudflare’s proxy.
When you have a grey cloud, this means you’re only using Cloudflare for DNS and routing. When you have an orange cloud, this means you’re using Cloudflare’s proxy, which enables all of their performance benefits, such as their caching, file optimization (minification), firewall, automatic platform optimization (APO), etc.
Note: Make sure to follow the documentation on how you initially set up Cloudflare. For example, if you’re using the free Cloudflare plugin, you’ll want to enable Cloudflare’s proxy (orange cloud). However, if you’re utilizing a hosting provider’s integration with Cloudflare, you might only need to enable the DNS functionality.
Cloudflare SSL/TLS settings
Under the “SSL/TLS” tab, click into the “Edge Certificates” screen. You should make sure TLS 1.3 support is toggled on. This helps both with performance and security.
- Opportunistic Encryption: Enabled
Cloudflare firewall settings
Then click into the “Settings” screen. We recommend setting your security level to one of the following:
- Essentially off
Anything above that can start to impact your performance and overall user experience on your site.
- Browser Integrity Check: Enabled
- Privacy Pass Support: Enabled
Cloudflare speed settings
Under the “Speed” tab, click into the “Optimization” screen. The first thing you should enable is “Auto Minify.” Some plugins minify things on your WordPress site, but why not let Cloudflare do all the heavy lifting? Everything like this that you can offload from your origin server (hosting provider), the better.
Also, many theme and plugin developers already minify their code. If you ever see a file that contains
.min.css, that means the file is already minified. Therefore, minification isn’t as important as it used to be because, on most sites, 95%+ of the resources are already minified. But every little bit helps!
The next feature you should enable is Brotli. This is a newer form of compression and is faster than its predecessor GZIP.
Automatic Platform Optimization (APO)
Next is Automatic Platform Optimization. This is optional and costs $5/month per site (traffic volume doesn’t matter). The good news is you can sign up for it while still using the free Cloudflare plan. It’s important to point out that this is by far the most impactful feature out of everything Cloudflare offers. We use APO on all of our WordPress sites.
Why is APO such a big deal? Because it essentially caches your entire site, not just the assets but also HTML. In the past, a request would go to your hosting provider’s server to download the HTML and your CDN to download the assets (images, CSS, JS). With APO, all requests (until they expire) go directly to the Cloudflare edge server closest to the user (images, CSS, JS, and HTML).
This eliminates the wait time (TTFB) issue and is insanely fast! It also doesn’t have to preload cache per edge server like a traditional CDN. APO uses its KV to store the cache, and on the first visit, it gets instantly distributed across all their edge servers. For most sites, you can think of it as automatically hosting a separate copy of your website around the globe. You also don’t have to mess with any confusing page rules.
APO is also great for improving your HIT cache ratio. Check out what happened in the screenshot below when we enabled APO on our site. Our cached requests versus uncached requests increased dramatically! This is great for speed and perceived performance (how fast your site feels). More visitors hitting cache more often is always a good thing.
Kinsta will soon be integrating the APO service for free for all of their clients! But you can add APO to your site with any hosting provider.
We recommend keeping Rocket Loader turned off. This can vary per site, but many times we’ve seen it actually slow WordPress sites down. It also has a lot of compatibility issues with plugins and themes. We don’t use Rocket Loader on any of our sites.
Cloudflare caching settings
Under the “Caching” tab, click into the “Configuration” screen. We recommend setting your “Browser Cache TTL” to 1 month or higher. This will help resolve any warnings from Core Web Vitals complaining that you need to serve static assets with an efficient cache policy. Google requires that your caching headers are at least 30 days or higher.
The longer your cache doesn’t expire, the better your HIT cache ratio is. This means more visitors are getting our website delivered using the lightning-fast cache from Cloudflare’s edge servers.
Search engines like Bing, Yandex, and DuckDuckGo utilize the IndexNow protocol to notify them of content changes. Cloudflare Hints helps improve the efficiency of crawlers and also limits them if the content hasn’t changed. We recommend enabling this feature to reduce the load on your origin server.
Cloudflare’s Always Online service crawls your site periodically and adds it to the Internet Archive’s Wayback Machine. While this is kind of cool, it’s not very helpful for e-commerce sites. They won’t function properly anyways and therefore we prefer to keep crawlers to a minimum wherever possible. The fewer things hitting/crawling your site the better. Therefore, we don’t recommend enabling Always Online.
- Caching Level: Standard
Cloudflare network settings
Under the “Network” tab, make sure both “HTTP/3 (QUIC)” and “0-RTT” are toggled on. HTTP/3 (QUIC) is the newest version of the protocol after HTTP/2. 0-RTT improves performance for those who have previously connected to your WordPress site.
Cloudflare traffic settings (optional)
This step is entirely optional. Under the “Traffic” tab, click into the “Argo” screen. You can enable Argo, which helps reduce network latency. In other words, it helps speed up the connection to your origin server. Argo starts at a minimum of $5/month, and after the first gigabyte, you will be billed at $0.10 per gigabyte. For example, if you average 100 GB of data transfer, it will cost $15.00/month.
We don’t use Argo on our sites. However, if you have a high-traffic site and don’t mind the additional charges, we do recommend enabling Argo. It’s important to note, though, if you’re trying to choose, APO produces much more noticeable results than Argo. You can, however, use both at the same time for even better performance.
Under the “Apps” tab, click into the “Installed Apps” screen. Here you’ll want to double-check that you don’t accidentally have any apps running that shouldn’t be. We see clients all the time with resources loading from Cloudflare apps that they were playing around with and forgot to remove.
If you’re using an app for a specific purpose, great, but make sure to remove anything that is not in use; otherwise, it could have a performance impact.
Cloudflare Scrape Shield settings
Under the “Scrape” tab, we recommend turning off “Email Address Obfuscation.” This supposedly helps by obfuscating email addresses on your website. However, we don’t recommend putting your email address on your public site. There are many ways for spammers to still take advantage of it.
email-decode.min.js). And this will show up in Core Web Vitals under critical request chains.