How to Exclude Any WordPress Script from Cloudflare Rocket Loader

Rocket Loader is a useful feature in Cloudflare that improves loading time and responsiveness of websites by moving all JavaScript to the bottom of the page. Occasionally, this can cause compatibility issue with certain scripts that require to be loaded in the header or body of a web page. One very common example is jQuery, which is widely used in the WordPress ecosystem.

In a previous post, we covered the steps to exclude any script that is defined within HTML <script> tags from Rocket Loader. This works well for scripts that you manually add to your site, say the codes for advertisement, analytics, etc, but not for scripts which are dynamically loaded by core, plugins, and themes through PHP (wp_enqueue_script() function). Read on for the steps to exclude such scripts from Rocket Loader.

⚠️ This post contains steps to modify your WordPress site’s functionality through code. This can cause serious issues, including downtime, if not followed properly. Please exercise caution, and preferably try it out on a test site first.

1. First, you will need a functionality plugin running on your site. It’s a simple plugin for storing your site specific customization independent of your site theme. You can either install a functionality plugin from the WordPress.org plugins directory, or create one yourself (it’s quite simple if you can FTP to your site).

2. After you have the plugin up and running, it’s time to find out the unique “handle” assigned to each script that’s loading in your website. Paste the below code in your functionality plugin between <?php and ?> tags, save, and upload the file (if editing through FTP). You can remove this code from the functionality plugin after finishing step 4.

// print all script handles below admin bar
add_action( 'wp_print_scripts', 'to_detect_enqueued_scripts' );
function to_detect_enqueued_scripts() {
	global $wp_scripts;
	foreach( $wp_scripts->queue as $handle ) :
		echo $handle . ' | ';
	endforeach;
}

3. Open any page of your site while logged in, and you should see the handles of all loaded scripts below the admin bar. Note that you must be logged in to your site and have the admin bar enabled, as this will be hidden to regular visitors.

4. Select and copy the script handles, and we can move to the final part of excluding them from Rocket Loader.

5. Let’s say you want Rocket Loader to bypass script handles abc, lmn, and xyz. Below is the code you’d need to add to your functionality plugin. Replace the examples with whatever script handles (for example, handle for jQuery is jquery-core) you’d like to be excluded from Rocket Loader, save the file, and upload to your server (if editing through FTP).

// disable Cloudflare Rocket Loader for certain scripts

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

function cfrocketloader_ignore_script( $tag, $handle, $src )
{
	if ( 'abc' === $handle || 'lmn' === $handle || 'xyz' === $handle ) 
	{
		return str_replace( "src='", "data-cfasync='false' src='", $tag );
	}
	else
	{
		return $tag;
	}
}

The scripts should now be bypassed by Rocket Loader thanks to the data-cfasync='false' tag. You can verify this by loading any page in your site that includes the scripts, and checking their tags from page source (Ctrl + U) or browser dev tools (F12 key).


Have any questions or issues regarding this? Let us know in the comments below.

References:

https://wordpress.stackexchange.com/questions/233140/how-can-i-get-a-list-of-all-enqueued-scripts-and-styles

https://stackoverflow.com/questions/60883508/how-to-add-cloudflares-data-cfasync-false-attribute-to-script-elements-in-word

discussion thread ↓

  1. Hello Orbiter, how I do exclude images from being lazy-loaded with Cloudflare rocket-loader since I don’t need it to be lazy-loaded

    Reply
    • Rocket Loader doesn’t lazy load images, it only deals with JavaScript. You might be using something else that’s lazy loading the images. WordPress, for example, has lazy loading for images and iframes in its new versions.

      Reply

add a comment ↓

Comments will be moderated as per our comment policy, and may take some time to appear below the post.