Solving Problems Caused by Cloudflare, WordPress Caching & the Divi Builder

I’ve got 521 problems and Cloudflare is all of them.

This article covers specific issues I’ve encountered when using Cloudflare, WordPress and the Divi Builder together. I decided to document the process of troubleshooting and fixing these errors for others to refer to. I’ve come to the conclusion that if I’m having this error, others will be experiencing the same, or similar errors.

I’ve always been a huge advocate of using Cloudflare for several reasons:

1. It speeds up your website for global visitors by serving content from its global content delivery network.
2. It adds a layer of security between your website and its visitors.
3. Cloudflare protects your privacy by hiding the origin server’s IP address if someone is looking for information on where your website is hosted.
4. DNS management is easy if your host doesn’t give you the option to add records to your DNS if you need to use other services with your domain.
5. You get a free SSL certificate, which is great if your host does not offer free Let’s Encrypt SSL Certificates.

However, sites using Cloudflare will sometimes show this really annoying error, that happens even if the web server is functioning perfectly well:

It’s quite non-specific, but it’s an error that means you can’t access your site. You’ve probably seen this error even if you don’t use Cloudflare, but you’ve seen it on someone else’s site.

If it’s happening to you on your own website, it’s frustrating because just like any error, it almost always occurs at the most inconvenient of times. When you really need to change a typo on your page or have a new blog post to update and the deadline was yesterday.

But why does this happen and how can we stop it?

The Problem

I use the Divi Theme Builder by Elegant Themes with a lifetime unlimited license, I use it with most of the sites that I manage. One day, while casually making a simple change to a page, the dreaded Cloudflare error would appear. This also happens with other page builders such as Elementor or WP Bakery (formerly Visual Composer).

Most of the time, this error could be “refreshed away” so to speak, but it become increasingly persistent and annoying. I’d noticed a pattern that this error only seemed to happen to me when I was logged into WordPress and trying to make changes to something. It didn’t seem as if website visitors were affected as I could see consistent live Real-Time traffic in Google Analytics.

Earlier this month I decided to tackle my long list of website tasks on my own sites that I’d been neglecting. This is where my problems all started.

What is a 521 Error?

A 521 error is specific to websites using Cloudflare. It means that it cannot connect to the host’s server. There are a few different causes which could be:

1. Your web host’s server is actually down
2. The server is blocking or rate limiting Cloudflare IP addresses
3. A plugin or script is blocking Cloudflare IP addresses
4. Your web server or website is misconfigured

Yeah, pretty non-specific.

The Continuous Loading Divi Builder

This icon is shown briefly when the Divi Builder is loading. Sometimes it never stops loading.

This is not that uncommon problem in the world of Divi web designers. Sometimes it happens, you just need to clear your various caches, logout, step away from the computer for 5 minutes and try again. All is usually well, but not this time.

The Divi Builder would never load for me, like never. It would just keep loading, and loading, and loading. Sometimes it would actually timeout, sometimes it wouldn’t.

Eventually, I gave up using the Divi Builder and just tried to update some old blog content instead.

Then, this would happen:

The TinyMCE frame containing the Divi builder was displaying the 521 error. Not the WordPress dashboard, just the frame.

via GIPHY

The Bigger Problem (it’s not just the page builder)

As time went on, I could no longer complete a single task within WordPress. As in, I couldn’t change a single setting, update a single plugin or publish a blog post without the error appearing.

Forget about using the Divi Builder, the WordPress dashboard was, at times, totally unusable. Buttons were not clickable, pages within the dashboard would infinitely scroll, TinyMCE font customisation options were completely missing, and loads more little things that just made the entire experience completely terrible.

I’ve been using WordPress sites for just over 10 years and I’ve never seen anything like this before.

It wasn’t just the Divi Builder that was having issues, several other plugins plus some of WordPress core features felt entirely broken. The Developer Tools showed that certain CSS and JavaScript files were returning a 521 error, so the dashboard was partially loaded and the files required to make it actually work would not load.

I tried different browsers, all pretty much the same. Some features would work, others wouldn’t, but Divi Builder never worked. I went as far as restoring WordPress to its default state, disabling every plugin, manually reinstalling core files using FTP and a manual re-installation of TinyMCE.

via GIPHY

It also seemed that only me, the logged-in admin user was affected by my sites behaving in this way. Luckily, website visitors were able to browse without interruption, as far as I could tell.

---

Troubleshooting the problem

The first thing you need to do is check that your web server is in fact up and running. There is a chance that your web server is actually down or having problems.

How to check if your site is actually down when using Cloudflare

There are several ways to check if your host’s server is down when you’re using Cloudflare:

1. Get your host’s IP Address

In Cloudflare, visit the DNS settings and get the origin IP address of your web server, like this:

2. Visit Hosts.cx

In your web browser, visit https://hosts.cx/ (opens in a new tab) and enter your IP address (that you just got from Cloudflare) and your domain name into the site:

Use hosts.cx to get a temporary URL to test your site. If it loads properly, your web server is definitely not down.

Note: do not access /wp-admin* URLs via the temporary URL as it’s not a secure way to login to the WordPress environment.

Another method – using your computer’s hosts file

Your operating system has a tiny text document that tells specific domain names to resolve to a particular IP address. This is usually used in companies with large networks and extensive infrastructure to allow their employees to access internal services with a dedicated IP address. However, you can also use this file if you’re a web developer, webmaster or have any role at all in managing websites.

The following instructions are for Windows users, if you need instructions for a Mac, click here.

1. Press the Windows Key on your keyboard and type ‘notepad‘ then right-click on the Notepad search result and select ‘Run as Administrator‘
2. In the blank notepad window, go to file > open and open the folder path C:\Windows\System32\drivers\etc
3. Ensure that you have ‘All Files‘ selected and open the file called hosts:
4. Add a line to your hosts file with your server’s IP address, then a space, then your domain. Add another line for the www. version of your site, like this:
5. Hit Ctrl+S or File > Save to save the file. Now, if you visit your website from your own computer, it will always bypass Cloudflare and connect directly to your host so you can test your site in its live, non-cached environment. However, remember to change this file back afterwards so you see the same as what your visitors see when visiting your website.

If you’re able to access your site using any of the above methods by connecting directly to your host’s origin server, then it is most definitely not down.

Is your host blocking Cloudflare IP Addresses?

The next thing to check is whether your host is actually blocking Cloudflare IP addresses. This is common because of the nature of how Cloudflare works, multiple visitors appear to be visiting the site from the same IP address as all web traffic and content is being handled by Cloudflare. So, when your host sees an influx of traffic from the same IP address, it will likely trigger a block, resulting in visitors from that Edge server being served a 521 error.

This is overcome by asking your host very nicely to unblock Cloudflare’s IP addresses, which are published on Cloudflare’s website.

Do you have a WordPress security plugin?

You should also Whitelist Cloudflare IP addresses and your own home/work IP address within your WordPress security Plugin. So, if you’re using WordFence, iThemes Security or Securi, go and check your whitelisting settings. Ensure that every Cloudflare IP address is whitelisted.

My host is definitely not blocking CloudFlare, now what?

If you’re absolutely certain that your host has definitely whitelisted all CloudFlare IP addresses but you’re still having problems using Cloudflare and the Divi builder, then you need to eliminate the other possible causes:

Disable WordPress Caching and Optimisation Plugins

If you’ve ever tried to speed up your site and you don’t know what you’re doing, you probably have one of these plugins with lots of the options ticked:

• W3 Total Cache
• Autoptimize
• WP Rocket
• WP Fastest Cache
• Asset Cleanup
• WP Optimise

However, caching and optimisation are two very different functions. If you’re using Cloudflare to cache your site, but you’re also caching it locally on the server then you can run into problems.

Also, if you’re using CloudFlare to minify or optimise your website’s code, you could encounter different problems.

If you’re using Cloudflare, you do not need a caching plugin as well. If you’re using an optimisation plugin then you don’t need CloudFlare to minify your code.

I’ve even seen people using multiple plugins caching each other’s cache. What a mess.

TL;DR: disable your caching and optimisation plugin during your troubleshooting. Totally disable it and purge every level of cache that you possibly can. Then wait a little bit and test again.

Related Post: The biggest WordPress mistakes to avoid.

Clear Browser Cache

Clear your browser cache and local storage using your browser’s Developer Tools:

Try to replicate the issue in a brand new browser that you’ve never used before, for example, if you don’t use Safari, then download Safari from their website just for testing purposes. As a completely brand new browser, you can rule out local browser caching if the problem still happens.

Your Operating System Cache

To clear your DNS cache on Windows, follow these instructions. If you need the steps for a Mac, click here.

1. Press the Windows Key on your keyboard and type ‘cmd‘ then right-click on the Command Prompt search result and select ‘Run as Administrator‘
2. In the console window type ‘ipconfig /flushdns‘ exactly like that but without the quotation marks, then hit enter:

You will see some text appear on the screen. When it’s done, close the Command Prompt window and try again.

Check your Router or ISP Cache

Your ISP may cache regularly visited websites, check with your ISP how often this is cleared. Unfortunately, you don’t have much control over this.

If you have control over your wireless router, then login to its control panel and look for an option to clear cache and reboot. Otherwise, you’ll have to wait or locate another Wi-Fi, 5G or 4G connection to use for testing purposes.

---

The fairly unique problem between Cloudflare + Caching + the Divi Builder

There are some recommended rules when setting up CloudFlare with a WordPress site. With a free Cloudflare plan, you get 3 ‘page rules’ which allow certain features to be enabled/disabled on certain pages.

Here’s an example of page rules in Cloudflare:

You can use regex (regular expressions) to set these rules. That means that you can set a single rule to affect a pattern of URLs instead of just one single one. If you’re not familiar with regex, an extremely simple example is adding an asterisk after the /wp-admin* URL to denote that anything following the end of the URL is to be included in the rule.

Despite this, the Divi Builder is not affected by the rule.

This is because the Divi Builder needs to load on every single page in order to work. Also, when editing content using the Divi Builder it doesn’t use the /wp-admin* URL suffix, it uses its own special query string, which looks like:

?et_fb=1&PageSpeed=off

Now, this in itself forms part of the solution.

---

The Solution

– s. Solutions – there are more than one.

Fully exclude Divi Builder query strings with a Page Rule in Cloudflare

Setup a new Page Rule in Cloudflare, use Regex to exclude the Divi Builder query strings that are present on every page.

In Cloudflare’s dashboard, go to Page Rules and add a new rule. If you have a free plan, you only have 3 rules but you can buy more from as little as $5 per month.

Exclude the following string from cache: yourdomain.com/*?et_fb=1&PageSpeed=off*

Remember that the Divi Builder loads on every single page, so you have the use asterisks to denote that all URLs using this query string should bypass Cloudflare’s cache. You should also continue to bypass /wp-admin* URLs from Cloudflare’s cache too.

If you’re using a different page builder such as Elementor, change this to match their query strings instead.

Disable Rocket Loader in Cloudflare

When I was researching this issue and looking for solutions, I found some others who discovered that the Rocket Loader feature of Cloudflare was responsible and that disabling it solved this issue. Rocket Loader is a feature that minifies and optimises JavaScript files to help them load faster.

You can disable Rocket Loader from Cloudflare’s dashboard, go to speed, the optimisation and the toggle for Rocket Loader is about halfway down. Alternatively, you could set a page rule, just like above to exclude Rocket Loader only on pages with the Divi URL query strings.

However, this didn’t work for me. The Rocket Loader feature optimises JavaScript code, however I already had this disabled because I use a separate plugin to optimise JavaScript, therefore didn’t need the rocket loader as well.

Disable JavaScript Concatenation

WordPress has a built-in feature that combines multiple JavaScipt files into one. This means fewer HTTP requests and results in faster page load times. However, adding multiple layers of cache may cause a problem, resulting in the 521 (or other 52x) error code from Cloudflare.

Visit your web host’s File Manager section or access your site via FTP and locate your wp-config.php file.

Locate the line that says /* That’s all, stop editing! Happy blogging. */ and add this line of code directly above it:

define( 'CONCATENATE_SCRIPTS', false );

It should look like this:

Use your computer’s hosts file for website management

This is more of a workaround than an actual solution, but it’s quick and easy to apply and could save you a lot of frustration if you just have one tiny thing to do on a site. Using the steps mentioned under the ‘troubleshooting’ section of this article, edit your hosts file so that the site you’re working on bypasses Cloudflare and connects directly to the host.

I’ve got all of my Cloudflare sites in my Windows hosts file, but commented out (denoted by the ‘#’ at the beginning of the line) so I can quickly enable them again if I need to. I’ve also added a shortcut to this file on my desktop for quick access.

When you need to do work on a site, remove the ‘#’ from the front of each line, finish your work then comment out the line when you’re done:

Stop using Cloudflare and find a new CDN

If you have a genuine business need to use a Content Delivery Network, Cloudflare is not your only option. Here are a few other options for you to look into:

1. StackPath
2. Google Cloud CDN
3. Amazon CloudFront
4. Sucuri
5. KeyCDN
6. Rackspace

---

Conclusion

WordPress, with a theme such as Divi is a powerful framework for creating beautiful websites with innovative design features. If you’re experienced with web design, CSS and JavaScript, it’s even more powerful and flexible. However, when you add continuous caching, other plugins and third-party services outside of your control, errors like this are inevitable.

That aside, seeing something broken on your website, your brand’s most valuable digital asset, is stressful as hell.

The ideal solution is to find a theme, framework, CDN, caching, optimisation and web hosting combination that works for you and doesn’t make your site break.

No matter what your setup is, here are a few guidelines to refer to when configuring and optimising your WordPress website with Cloudflare:

• Do not cache any WordPress admin pages for logged-in users
• Exclude Divi (or other theme builder) URL query strings from caching in Cloudflare
• Avoid too many optimisation plugins that do the same thing
• Do not cache your site locally if you use Cloudflare
• Use your computer’s hosts file for working on your website
• Regularly test, check, and test again
• Use a monitoring service to alert you by email or SMS if your site goes down.

Special mentions to Dan at EcoHosting, as well as my friends Ryan from Adoptt and Perry from Rylance Creative Studios for their support in solving this error.