Ignore Cloudflare Automatic RocketLoader for specific JavaScript

Question

I need to disabled Cloudflare Rocketloader for a specific JavaScript file and I have spent a few hours reading and trying out different solutions with no success. I am running WordPress and need to omit the Automatic Rocket Loader for a specific .js file.

Plugging this recommended code into my theme functions.php throws the following error.

Script Url: example.com/wp-content/plugins/waveplayer/assets/js/waveplayer.js

Code in functions.php

function rocket_loader_attributes_start() {
ob_start();
}

function rocket_loader_attributes_end() {
$script_out = ob_get_clean();
$script_out = str_replace(
  "type='text/javascript' src='{rocket-ignore}", 
  'data-cfasync="false"'." src='", 
  $script_out);  
print $script_out;
}

function rocket_loader_attributes_mark($url) {
// Set up which scripts/strings to ignore
$ignore = array (
    'script1.js'
);
//matches only the script file name
preg_match('/(.*)\?/', $url, $_url);
if (isset($_url[1]) && substr($_url[1], -3)=='.js') {
  foreach($ignore as $s) {
     if (strpos($_url[1], $s)!==false)
       return "{rocket-ignore}$url";
  }
  return "$url' data-cfasync='true";
}

return "$url";

}
if (!is_admin()) {
  add_filter( 'clean_url', 'rocket_loader_attributes_mark', 11, 1);
  add_action( 'wp_print_scripts', 'rocket_loader_attributes_start');
  add_action( 'print_head_scripts', 'rocket_loader_attributes_end');
}

Error:

GET https://example.com/blog/sheol-stranger-things/%7Brocket-ignore%7Dhttps://example.com/wp-content/plugins/waveplayer/assets/js/waveplayer.js?ver=2.0.5 404 ()

I have also tried inserting this into my header.php but this also does not omit the script from Rocket Loader.

<script data-cfasync="false" src="/waveplayer.js"></script>

score 3 · Answer 1 · answered Feb 07 '17 at 18:51

You can have Rocket Loader ignore individual scripts by adding the data-cfasync="false" attribute to the relevant script tag, for example:

  <script data-cfasync="false" src="/javascript.js"></script>

You must however ensure that the data-cfasync element comes before src. Also this cannot be done within another JavaScript file.

If this is still problematic for you may want to consider disabling RocketLoader for a given endpoint using a Page Rule.

However, my recommendation here would be enable HTTPS on your site and then disable RocketLoader. By enabling HTTPS on your site, you'll benefit from HTTP/2 features such as concurrency without needing to use RocketLoader.

Resources:

Ignore Cloudflare Automatic RocketLoader for specific JavaScript

1 Answers1