Select Page
Written By Connor Bearse

SOLVED: Divi Builder Loading Indefinitely with Cloudflare

Last Updated: April 19, 2020

Utilizing speed optimizations from Cloudflare can either be incredibly helpful or completely break your website. I’m here to show you an incompatibility between Cloudflare Rocket Loader and Elegant Theme’s Divi Builder. 

Web Server Info:

Website Info:
PHP 7.3, WordPress 5.4 and Elegant Theme’s Divi Builder Version 4.4.3 on the webserver.

Cloudflare Settings:
 
SSL Full, Always Use HTTPS on, Opportunistic Encryption On, TSL 1.3 On, Automatic HTTPS Rewrites Off, Polish On Lossy (WebP), Brotli On, Rocket Loader On, Mirage Off, TCP Turbo Enabled, Enhanced HTTP/2 Prioritization Off

The Error:

The first sign there was a problem was that the Divi builder would not fully load. The loading symbol would infinitely load with no sign of getting better. When we check the developer tool’s console there were consistently 63 errors. Just about all of them pertaining to:

Uncaught Reference Error: jQuery is not defined

or

Uncaught Type Errors

Below is a photo from my console showing some of the errors.

Uncaught ReferenceError Jquery Is Not Defined Divi WordPress

The Solution:

Clearly jQuery was not loading for some reason which meant it had something to do with an optimization script somewhere in the WordPress/Cloudflare stack. The setting in this instance which was the problem? Cloudflare’s Rocket Loader.

Not only was it causing the Divi Builder to completely break, anything that relied on jQuery to work had to wait until the page was 100% loaded. This meant that the navigation menu on mobile would not slide open until all the images were loaded. This did not lead to great user experience.

Rocket Loader by Cloudlfare will automatically move the loading of jQuery to be one of the last things a web page loads. This certainly does improve the paint time, as promised, but it does not do anything good for a WordPress website. Especially one built on Elegant Theme’s Divi builder. 

Cloudlfare Rocket Loader

Turn off Rocket Loader off in the Cloudflare dashboard and your Divi builder should start working again as intended! I hope this helps someone save time trying to troubleshoot this error. 

TL;DR

The world moves fast. Don’t fall behind. Weekly updates on technology, digital marketing, and more from an industry professional.
"