Disable Cloudflare Rocket Loader in The Oxygen Builder

by Abdelouahed

Updated: November 1, 2020 

The Rocket Loader™ is a great feature of Cloudflare created to bring more speed optimizations and lower the page loading time. But, in many cases, it breaks the Javascript code on the page because it switches the script loading order.

Unfortunately, this scripts order change breaks some parts of the Oxygen libraries; therefore, Hydrogen Pack does not run as expected. Many customers contacted our support because the context menu or shortcodes weren't working on some of their sites.

To solve this issue, we need to add a page rule to disable the rocket loader feature for the oxygen builder pages.

Add new page rules

First, you need to login to your Cloudflare dashboard and select the site where you have this issue. Then navigate to the pages rules tab:

Then click the "Create Page Rule" button:

In the URL matches field, put the following page rule www.yourdomain.com/*ct_builder* but don't forget to replace www.yourdomain.com with your actual site URL with or without www depending on your WordPress settings.

If you are unsure whether to add www or not, you can create two rules, one with www, and another without it.

At the section bellow that field, search for "Rocket Loader" and make sure it's set to off, then click the "Save and Deploy" button:

You should now have a correctly working oxygen builder environment while taking benefits from the Cloudflare Rocket Loader in the other areas of your site frontend.

Note: it may take a few minutes before the settings changes take effect, and you may also need to clear your browser cache.

Disable the Rocket Loader

Sometimes, the page rules may not work for various reason, and the alternative option, is to fully disable this feature while you are making changes to the site, and once you are done, you can turn it on again.

To do that, please open the speed section for the same site

Then navigate to the optimization tab

Scroll down on the page to the Rocket Loader™ section and click the green switch to turn it off.

That's it. Hydrogen Pack should now work fine for you. If you still having issues, please contact us to debug the issue and offer alternative solutions.


Interested in more posts this?

Join over 200 subscribers of our spam-free mailing list, to get email notifications whenever we publish a new blog post.

Clean plugins

Advanced Scripts

Advanced Scripts is the best scripts manager on the market. Besides PHP, CSS, and Javascript, you can also write SCSS and LESS code, use custom hooks, and all of that in a better interface.

Hydrogen Pack

A pack of missing features from the Oxygen builder; copy-paste elements and styles, enhanced structure panel, 60+ customizable shortcuts, sandbox mode, and more handy tools to improve your workflow!

Oxygen Attributes

The way our solution handles the attributes makes all the difference. It offers a centralized attributes manager, more field controls, CSS properties, target sub-elements, and much more.
cross