Divi visual builder not loading

John McConville | 20 June 2020

Updated 9 November 2021

Divi Visual Builder does not load

I don’t usually post tips for the Divi community, but I could not find good information on this problem, so here goes!

You have made your beautiful Divi website then suddenly the Divi Builder stops working and you (or worse your clients) are left looking at the colourful loader spin round. Things to check:

1. Is your hosting adequate? 

We all love Divi, but it can put extra demands on your webserver compared to a basic WordPress installation. Make sure your websites are hosted on a server than can handle the extra load. There are lots of good (and bad) providers out there, so I am not getting into this here, but recommend you host with a WordPress specialist, with a good reputation in the WordPress community.

There is now a great tool to check your hosting environment build into WordPress 5.2 and above. This will let you know if you need to change your hosting environment by – for example – updating your php version. 

2. Caching

There are lots of good caching plugins out there, and again there is a healthy debate about the best caching set up; rocket loader, sg optimiser, w3 total cache, wp super cache, wp fastest cache and autoptomise. This is not the place to discuss their relative merits but make sure that whichever plugin you are using that the administrator or editor login is not being cached. If in doubt clear your cache!

Update for Divi’s Performance settings

In Divi 4.10 a new performance setting was added to speed up Divi websites. It is not surprising to find that this can interfere with your caching set up. For websites where there was no previous caching it will transform the speed of your website.

I have found that there are a few tweaks and tricks to be used to make sure it is working efficiently. You can find these settings in Divi \ Theme Options \ General \ Performance.

If you have found recently your divi editor is not loading, then disable the “defer Gutenberg block css” option. You may have to experiment by going through the options and gradually switching them back on to see what works best in your hosting environment.

Finally, I now always disable divi performance caching while I’m working on a website as the cache does not automatically clear when you update the page, and at the moment there is no option to clear the Divi cache.

3. Cloudflare

Cloudflare can be a great addition to your toolkit, bring security and speed to your website. There are special settings in Cloudflare for WordPress which should be enabled. The easiest way to optimise Cloudflare is to use the official Cloudflare WP plugin. This allows you to easily set up the recommended settings in Cloudflare and clear the cache without leaving your wp admin area.

4. Divi Builder Settings

I have optimised all these settings in the past to find that the problem has simply reappeared.

Try adjusting your Divi settings like this: Go to Divi \ Theme Options \ Builder \ Advanced

I have found that turning off the product tour (good idea to do this anyway. to reduce load) and enabling the classic editor has resolved the issue for me. Finally, disable static css generation. Your caching plugins will be handling this, so it is not necessary anyway:

5. Firewall

Make sure your firewall is properly configured. If you are using WordFence, make sure you let the configuration go through the process of learning before you switch it on.

I hope this helps you resolve these issues. There can me many configurations of wordpress, your divi installation and your web host, so it can be a matter of trial and error to get the best installation for your website. The key is patience and persistence.

6. Browser

Not all browsers are equal. I usually use Chrome or FF for web development, and always test with the developer tools on Safari, but never develop in this browser.

7. Plugins

WordPress plugins are great. We all have favourites we immediately turn to in any installation. However they all use up resources and the more you use, the more likely you are to have a conflict. Use plugins sparingly, and if you can do something without a plugin it is better. Always check your plugin to see if it has been around for a while and are lots of people using it. Read the reviews if you are unfamiliar with a plugin you would like to use.

Before you install a new plugin, check to see if you can achieve your goal with the tools built in to Divi. An example of this could be header and footer code injection plugins which can be done within Divi.

Make sure your plugins and theme are up-to-date.

In Summary

There can be many reasons for the divi builder failing to load, most commonly because your server either cannot cope or is not configured to handle Divi.