We all know and love Divi. As it comes Divi has great performance features that results on good page loading times. Pairing it with a service like Cloudflare makes your site fly but there are some issues that occur if not taken care of. In this article, I want to walk you through a simple solution to fix the Cloudflare rocket loader conflict with Divi.
In this article, I hope to cover;
Table of Contents
What is Cloudflare?
At it’s core, Cloudflare is a large global network of servers that can improve the security, performance and reliability of anything connected to the internet.
It does this by passing all the traffic to your website through their servers. As the traffic passes through, they can apply certain rules to it to ensure the optimization of security, performance and reliability.
One of the biggest draws to Cloudflare is that it offers a lot of this functionality on a free tier meaning that you get this security and performance boost at no extra cost to you.
What is Rocket Loader?
Whenever someone accesses your website, there are many files being loaded. These files include your actual content ie: the words and images of your site as well as some functional files that affect the look and feel of your website.
One set of these files are called JavaScript files which add dynamic elements to your pages and posts. Often times these files can take some time to load. This delay can affect your page loading times and thereby the experience of your users.
This is where Rocket Loader steps in to help.
Rocket Loader effectively defers the loading of all your JavaScript until your page has rendered which drastically speeds up the loading of your content.
What is the Cloudflare Rocket Loader Conflict?
Our favourite theme – Divi – is built using a lot of JavaScript files. Whenever you fire up the Divi Builder it accesses all the JavaScript files to allow you to build a website on the frontend.
Now, if Rocket Loader is enabled and deferring the JavaScript files, you can imagine why this would cause an issue. Divi builder is calling the files but Rocket Loader is deferring them.
Solution for the Conflict
Thankfully the solution for the conflict is relatively simple in most cases – we simply turn Rocket Loader off whenever we are using the Divi builder.
This can be done manually by going to the Cloudflare and to Speed -> Optimization -> Content Optimization and turning Rocket Loader off.
But if you have been reading my blog you will know I prefer simpler solutions.
We can do this by adding in a Page Rule in Cloudflare.
So if we log back into Cloudflare and head to Rules -> Page Rules and click on the Create Page Rule button.
In the URL field type in your website url followed by *et_fb=*
So it would look something like https://yourwebsiteurl.com/*et_fb=*
In the dropdown field select Rocket Loader. By default, the option should be set to disable but just ensure that the toggle looks similar to the image below.
Now just click Save and Deploy Page Rule and it will be set.
So what did we do?
Since Divi uses ?et_fb= as the URL for the visual builder editor, adding /*et_fb=* to the end of your domain in the Page Rules will ensure that whenever this URL is accessed it will automatically turn Rocket Loader off and should therefore no longer conflict with the Divi visual builder.
Frequently Asked Questions
What is Cloudflare?
Cloudflare is a large global network of servers that can improve the security, performance and reliability of anything connected to the internet.
Why does Divi Builder take long to load?
There are many reasons why the Divi visual builder will take long to load but this Rocket Loader conflict is always a good place to start troubleshooting.
Wrapping Up
I hope you found this tutorial helpful and that it solved the issue that you may have been struggling with. Divi on it’s own is a great tool to use and by using it alongside Cloudflare you have a robust solution to ensure your site loads fast and reliably. This simple solution to solve the Rocket Loader conflict is a great option to keep in your toolkit to ensure that you can continue to use all that the combination offers you.
