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.
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.
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.