Elementor

Elementor and Cloudflares’ Rocket Loader do not play well together

Get the latest from
Sniffle Valve

Sniffle Valve

Consider buying Sniffle Valve a coffee  

Book a one-on-one online training session

Note: To copy any code presented in these tutorials, hover over the code and select the Toggle RAW Code icon raw code icon

UPDATE:

Thanks to Chris and David from the Elementor FB group for this!

All you have to do is set up the Page Rules in Cloudflare. The free accounts give you three and that’s all that I need for this site:

  • All Elementor pages, including the Home Page:
    • Site URL/*elementor*
  • Elementor library templates:
    • Site URL/?elementor_library=*
  • AnyWhere Elementor templates:
    • Site URL/?elementor_library=*

Example: http://snifflevalve.com/*elementor*

For each Page Rule, select Disable Performance from the “Then the settings are” drop down.

After over two hours of trying to track down why – “all of sudden” –  none of my Elementor pages would load, I finally found the culprit. It was Cloudflare’s Rocket Loader option.

image

I had made changes to a few Elementor pages the day before with no problems and had just finished doing updates to a bunch of pages, but in the WordPress editor. Then I thought, hey, why not check GTmetrix to see how the numbers are after those changes. Hmm, could be better so off to Cloudflare to snoop around, specifically in the Speed section.

Oh, look at this! Let’s try that!

image

Yep, made a nice difference. Scrolling down the Speed page some more brought me to Rocket Loader. Interesting. Let’s set it to Automatic and see what that does.

WOW! What a difference. Cool. Or so I thought.

But later when I went to edit an Elementor page, the dreaded “won’t finish loading” scenario. Any page. Any template. Did the standard troubleshooting methods to no avail. Even rolled back Elementor to the previous version because I had recently updated it.

Long story short, I came back to the Speed page in Cloudflare and turned Rocket Loader off and lo and behold, I was back in business.

Although it does make a nice enhancement to the GTmetrix numbers, I do believe I will leave Rocket Loader off until a fix is found for the Automatic setting or I take the time to figure out how to set up the Manual method. If anyone reading this knows how to do so, would you be so kind as to post it in the comments.

So if you are experiencing the “won’t finish loading” issue and have that site on Cloudflare, check that Rocket Loader has not “somehow” been turned on. And add Page Rules if it has.

14 thoughts on “Elementor and Cloudflares’ Rocket Loader do not play well together”

    1. Sniffle Valve

      Hi Verdi,
      You’re welcome! 🙂
      I have updated the post to include adding Page Rules which will allow Rocket Loader to remain on when editing the pages listed in the page rules.

      Cheers!
      Lyle

    1. Sniffle Valve

      Hi Arya –
      I would have to say that it is more an issue with Cloudflare and Rocket Loader. Keep in mind that Cloudflare lists Rocket Loader as beta.
      Cheers!
      Lyle

  1. Amazing! You’ve just ended 3 long days of suffering 🙂
    When elementor goes to “Content cannot be loaded” just try turning off RocketScript in CloudFlare

  2. AnyWhere Elementor Pro is still blocking elementor , can you give me the right page rule url , because cloudflare seems to refuse to add duplicate url:

    Elementor library templates:
    Site URL/?elementor_library=*
    AnyWhere Elementor templates:
    Site URL/?elementor_library=*

    they are the same

    1. Sniffle Valve

      Not really sure what that URL would be. Perhaps contact AnyWhere Elementor Pro to see if they know.
      Cheers!
      Lyle

  3. My Elmentor page is not loading, its showing loading and thats it. I have inspect web page and found error in cosole, below is the error.

    Uncaught ReferenceError: nfForms is not defined
    at n.initialize (front-end.js:1)
    at n.f.Object (backbone.marionette.min.js:22)
    at new n (load-scripts.php:18)
    at n.initialize (front-end.js:2)
    at n.f.Object (backbone.marionette.min.js:22)
    at new n (load-scripts.php:18)
    at n.initialize (front-end.js:3)
    at n.f.Object (backbone.marionette.min.js:22)
    at n.constructor (backbone.marionette.min.js:23)
    at new n (load-scripts.php:18)

    Now I don’t know what to Do !
    Plz help

    1. Hi Nitin,
      Not really sure what that could be. Looks as though it may be related to Ninja Forms. Perhaps try temporarily deactivating Ninja Forms and see if that helps.
      Cheers!
      Lyle

      1. I just want to throw this out there –

        Whenever I am modifying the website, I put it in ‘Development Mode’ anyway and it seems to ignore any Rocket Loading (and other) rules.

        Is there some reason why putting the site in Development Mode is not the recommended solution for this – rather than disabling Rocket Loader with rules? Lots of folks already have several rules in place (like the increased security on wp-admin and so on) and if they are on the free 50GB plan (which is great for small traffic sites), they will run out of rules very quickly if they are making special Elementor rules.

        I typically train folks to go into Cloudflare (there’s a Plug-In) and put it in Development mode if they are going to use Elementor.

        Just my two cents on this – as this is certainly the way I would teach people as ‘best practice’ anyway. I’d like them to see the site as it is rather than after the CDN cache has caught up – regardless which CDN they are using!

        1. Hi Paul,
          Thanks for the information, good stuff 🙂
          I haven’t used CF/RL for a while now but as I recall, even in Dev Mode I was having issues with E loading. Could be mistaken. But all your points are quite valid.
          Cheers!
          Lyle

  4. Newbie question – where do I add the “pages” ie All Elementor pages, including the Home Page:

    thank you

    1. Hi Mitch,
      I posted the link to the Cloudflare support page in your post on the Facebook group.
      Cheers!
      Lyle

Leave a Comment

Your email address will not be published. Required fields are marked *