[Plugin: Easy FancyBox] Plugin not working with Cloudflare

Hi @oblogdamari

Are you using https://wordpress.org/plugins/cloudflare/ plugin? As far as I understand it, they recommend the default settings as described on https://support.cloudflare.com/hc/en-us/articles/227342487 which means Rocket Loader is OFF.

Otherwise, if you really need the rocket but want to exclude certain scripts by adding a data-cfasync="false" attribute then you’ll have to code your own filter to add them specifically.

Try something like this in your theme’s functions.php :

add_filter( 'script_loader_tag', 'add_cfasync_false', 10, 3 );

function add_cfasync_false( $tag, $handle, $src ) {

    // add any script handle to the array to set its cfasync attribute to false
    $handles = array ( 'jquery-fancybox', 'jquery-easing', 'jquery-mousewheel', 'jquery-metadata' );

    if ( in_array( $handle, $handles ) ) {
        $tag = '<script type="text/javascript" data-cfasync="false" src="' . $src . '"></script>';
    }

    return $tag;
}

Disclaimer: this snippet is untested. Please backup your functions.php before testing!

• This reply was modified 9 years, 4 months ago by Rolf Allard van Hagen.

OK hang on, it seems the inline scripts ar also changed from type="text/javascript" to type="text/rocketscript" … do you know if adding data-cfasync=”false” there too should fix that? On https://support.cloudflare.com/hc/en-us/articles/200169436-How-can-I-have-Rocket-Loader-ignore-my-script-s-in-Automatic-Mode- the author only talks about linked script… 🙁

after we inserted ‘jquery-core’ the site’s performance dropped a lot. I was using less then 50% of CPU now it’s using 71,85 100% =\

Very strange. I would expect the site to drop in pagespeed/etc. tests (because jquery no longer benefits from rocket loader deferring) but raising CPU usage is really surprising. Is that a constant CPU level? Does it go back down again if you disable the rocket loader option?

About the inline scripts we can do a test if you want to. Unfortunately there’s not much more info on cloudflare besides the linked scripts. =(

Yes we can do a test. Open the file easy-fancybox/inc/class-easyfancybox.php in the WordPress plugin editor and fid these lines not far from the top:

 
		// begin output FancyBox settings
		echo '
<script type="text/javascript">
/* <![CDATA[ */

Now change that script line to

<script data-cfasync="false" type="text/javascript">

Next, find not far from the bottom:

 
		echo '<script type="text/javascript">
jQuery(document).on(\'ready post-load\', function(){ jQuery(\'.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create/button"]\').addClass(\'nolightbox\'); });';

There too, add a data-cfasync="false" attribute to the script tag.

Then save, clear cache and check the result.

• This reply was modified 9 years, 3 months ago by Rolf Allard van Hagen. Reason: typo