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

by | May 5, 2020 | WordPress

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

This article may contain affiliate links. This means that at no extra cost to you, I may earn a commission if you use one of these links to make a purchase. Read the full disclosure.

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:

Cloudflare 521 Error

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?

In this article you will learn:

  • Why Cloudflare errors occur and what they actually mean
  • The process for troubleshooting various Cloudflare 52x error codes, including 521, 522, and 524
  • What you need to know about using WordPress caching and optimisation plugins in conjunction with Cloudflare
  • How to configure Cloudflare with the Divi Builder
  • Different methods for solving the specific problems between Cloudflare, WordPress caching and Divi

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.

Divi Builder Icon

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.

Cloudflare 524 Timeout error

524. That’s a timeout error. Oooooh, different.

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

Then, this would happen:

Cloudflare 521 in WordPress dashboard using the Divi Builder

Just what you need when your task list is already stressing you out.

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.

Cloudflare Development Tools 521 Error

No wonder the dashboard wasn’t functioning properly without these files. Note that all of these files are cached and/or optimised at the origin server before they are served via Cloudflare. This is important for later.

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.

Active Users Right Now: 5 on Google Analytics

There was definitely live traffic landing on my site and navigating through the pages. Hmmmm.


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:

How to check your origin IP address in Cloudflare

I’ve kept mine blurred here.

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:

hosts.cx

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:Windows Hosts File Location
  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:Editing the windows host file
  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.

A note about Cloudflare’s Development Mode

You’re also able to test your site using the ‘Development Mode’ toggle in Cloudflare’s dashboard. This temporarily bypasses Cloudflare’s cache for 3 hours before disabling itself. However, all your visitors will also bypass Cloudflare’s cache, so it’s not recommended to rely on development mode either.

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.

In my case, I could actually use the Divi Builder and the WordPress dashboard properly if I connected to a VPN before logging into WordPress. However, it only worked if I chose a VPN location, such as Australia, instead of a more local location in the UK or Europe. If I tried choosing a local location when connecting to my VPN service, I got the same 521 error.

This strongly indicates that one or two particular Cloudflare Ips are potentially being blocked by the origin server. If you reach out to Cloudflare’s support, they should confirm this for you.

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:

Clear all cache in Google Chrome

This is the Google Chrome browser’s Developer Tools, which you get to by pressing Ctrl+Shift+I. You should right-click on all the areas I’ve marked with a star to clear your browser cache before refreshing the page.

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:

ipconfig flush DNS

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:

Cloudflare Page Rules

The top rule bypasses all WordPress admin URLs and query strings from Cloudflare’s cache. It’s recommended to set a rule to not cache the WordPress dashboard.

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*

How to texclude the divi builder from Cloudflare's cache

This rule will exclude the Divi Builder URLs from being cached by Cloudflare.

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:

Wp-config Disable JavaScript Concatenation

Once you’re done, save the file, clear your cache and try again.

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:

Sarah's Windows Hosts File

The ‘#’ at the front of the row means the rule is not active. The ‘#’ represents a comment. If I need to test something, I just remove the ‘#’, save the file then put it back again afterwards.

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.

Share this

You may also like…

2 Comments

  1. Excellent and thank you. For me it was the Rocket Loader. The page builder was just spinning around but turning that off instantly helped.

    You’ve saved me tonnes of time!

    Thanks.

    Reply
    • Hey David, glad you found it helpful. May the forever spinning page builder be a thing of the past!

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Who Am I?

Sarah Tamsin Profile Picture

Sarah Tamsin is a freelance digital consultant and content creator. I use this blog to write digital marketing tips for bloggers and small business owners, as well as occassional travel and music festival content.

Work With Me

I offer a range of affordable packages for small businesses, bloggers and other freelancers to help maximise your digital presence & engage with your online audience.

Let's have a chat about your digital needs today!

Get Started

Blog Categories

Business
Digital
Travel

Sponsored Links

Ezoic

Tailwind Pinterest Scheduler

I will earn a commission if you use one of these ads to make a purchase. Read the full disclosure.