Cloudflare kills the theme

OK I’d like to jump in on this one as well.

WP 4.5
ENFOLD 3.5.3

Live Website
Home page has a FULL PAGE SLIDER
After optimising speed for my clients website tweak after tweak after tweak to get the home page Kriesi Enfold to load in a reasonable time. I thought I was finished.

After navigating other pages I realised that no Layersliders were working .

I jumped over to the development site and match setting for setting plugin to plugin DEV site to LIVE site.
all layer sliders worked on the DEV site.
On the LIVE site I then proceeded to turn off all Caching and optimisation that I just completed
Turned CloudFlare to DEV mode
Turned CloudFlare = PAUSE

Quite Google Chrome
Opened Google Chrome
Clear Cache all images since beginning of time
Loaded the website – and all layersliders worked.
I then proceed to turn on each plugin and settings one by one doing a hard refresh between each activation.

To be logical about this I stopped when I got to the page speed and cache plugins and did not activate these.
As I wanted to eliminate CLOUDFLARE as the culprit.

So at this point everything is working as expected.

Turned CloudFlare to DEV mode OFF
Turned CloudFlare = ACTIVE

Quite Google Chrome
Opened Google Chrome
Clear Cache all images since beginning of time
Loaded the website – NO LAYER SLIDERS WORKED!

to summaries…
If I activate CloudFare all LayerSlide WP sliders stop working.

Interesting the home page full screen slider is not effected.

I have replaced the layerslider with a static image for now until support can provide an update fix to this issue.

Ok to be more specific

I have narrowed this down to the following.

CloudFlare > Speed > Turn OFF Rocket Loader

Rocket Loader Improves load time for pages that include JavaScript.

Please note the disclaimer on the text below.

What does Rocket Loader do?
Rocket Loader can improve load times for pages that include JavaScript. Your search engine ranking may be improved by reducing page load time.
Rocket Loader improves page load times by:
Decreasing the number of network requests by bundling JavaScript files, even third party resources, to avoid slowing down page rendering
Asynchronously loading scripts, including third party scripts, so that they do not block the content of your page from loading immediately
Caching scripts locally (using LocalStorage, available on most browsers and smart phones) so they aren't refetched unless necessary
What Rocket Loader setting should I use?
Automatic: Optimize all JavaScript resources on your website. No configuration required
Manual: Selectively enable Rocket Loader for individual scripts. Add the following attribute to the script tag for each script where you want to enable Rocket Loader:
data-cfasync="true"
Note: The 'data-cfasync' attribute must be added to the HTML script tag before the 'src' attribute (adding the attribute via JavaScript is not sufficient).
* Rocket Loader is considered Beta because it’s an experimental feature that modifies the loading and execution flow of Javascript. While efforts are taken to increase Rocket Loader’s compatibility with third-party Javascripts, not all scripts work with this feature. Issues with Rocket Loader affect only a small percentage of customers.

For more information
What does Rocket Loader do?
https://support.cloudflare.com/hc/en-us/articles/200168056

How can I have Rocket Loader ignore my script(s) in Automatic Mode?
https://support.cloudflare.com/hc/en-us/articles/200169436

As Rocket Loader is in BETA – I have specifically contacted CloudFlare Support regarding this issue and hopefully the 42,175 LayerSlider users and 87,813 Enfold Users will provide them enough incentive to do something about this.

Cheers ; )

• This reply was modified 8 years, 7 months ago by HuxburyQuinn.