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: https://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.
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!
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.
This really helped me out a lot, thank you for sharing Lyle!
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
Thanks brother its working.elementor should have to fix this.
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
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
Hi Yaniv,
Nice to hear that it worked for you 🙂
Cheers!
Lyle
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
Not really sure what that URL would be. Perhaps contact AnyWhere Elementor Pro to see if they know.
Cheers!
Lyle
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
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
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!
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
Newbie question – where do I add the “pages” ie All Elementor pages, including the Home Page:
thank you
Hi Mitch,
I posted the link to the Cloudflare support page in your post on the Facebook group.
Cheers!
Lyle
Turning off the Rocket Loader fixed my issue with Elementor. Its working now!
Thank you so much for sharing Lyle.
Hi Millie,
You’re welcome. Good to hear it helped 🙂
Cheers!
Lyle
I have the same problem with elementor I’m using cloudflare enable rocket loader
I’m not sure how to create the pages rules in cloudflare
If I use https will it be in cloudflare http://*mysite.com/*elementor*
Hi Pelle,
Here is a link that will help you with that: https://support.cloudflare.com/hc/en-us/articles/218411427-Understanding-and-Configuring-Cloudflare-Page-Rules-Page-Rules-Tutorial-
Cheers!
Lyle