Blog

Deferred scripts allows your JS files to be loaded at a later time especially after the document has been loaded. The problem is that if you have scripts anywhere in your document that is dependent with another scripts such as jQuery and is loaded after page load, it’s going to break the functionality of your site.

I’ve encountered this script loading issues in the WordPress backend long before. I didn’t realize that it was caused by one of the fixes I implemented to minimize page load time by deferring scripts in the front-end.

I used to have the following code to defer any scripts across the site by adding a filter to the script_loader_tag hook.

//Defer Script Loading
add_filter( 'script_loader_tag', function ( $tag, $handle ) {	
   if( strpos( $tag, 'jquery.js' ) >= 1 || strpos( $tag, 'acf' ) >= 1 || strpos( $tag, 'media' ) >= 1 ) {
    	return $tag;
   } else {
    	return str_replace( ' src', ' defer="defer" src', $tag );
   }      
}, 10, 3 );

The above code basically replaces the ‘src‘ attribute of the script tag with ‘ defer=”defer” src‘ be it in the front-end or backend. That addresses an issue but actually creates more.

Solution

Since I only need the scripts to be deferred in the front end, the solution is very simple. I only need to check if the page currently viewed is in backend using  is_admin(). If  is_admin() is true it will just return the script tag as it is.

Below is the updated script for better readability.

//Defer Script Loading
add_filter( 'script_loader_tag', function ( $tag, $handle ) {	
   if (is_admin()) return $tag;
   if( strpos( $tag, 'jquery.js' ) >= 1 || strpos( $tag, 'acf' ) >= 1 || strpos( $tag, 'media' ) >= 1 ) {
    	return $tag;
   } else {
    	return str_replace( ' src', ' defer="defer" src', $tag );
   }      
}, 10, 3 );

The single line in the snippet above solves the nightmare I created myself.  lol