wp-enqueue-script-defer.php

<?php

// hook into the script_loader_tag filter, but not in the admin ##
if ( ! \is_admin() ) { 

	\add_filter( 'style_loader_tag', 'q_script_loader_tag', 0, 3 );

}

// add the filter function - passing 4 params ##
/**
* Defer style asset enqueuing
* 
* @param  String  tag       The original enqueued <script="...> tag
* @param  String  $handle   The registered unique name of the script
* @return String  src       The asset file path with fragrments
* @return String  $html     The src <link rel="...> tag
*/
// only on the front-end
function q_style_loader_tag( $tag, $handle, $src ) {

	// error_log( $tag );
	// error_log( $src );
	// error_log( $handle );
	
	// route two - exclude files based on handle match ##
	$avoid = [
		'underscore', // _underscore ##
		'backbone', // backbone ##
		'jquery-core', // main js ##
		'wp-i18n', // internationalizations ##
		'wp-tinymce-root', // tinymce root ##
		'wp-tinymce', // tinymce ##
		'editor', // wp editor ##
	];

	// exclude files based on handle match -- controlled by passed filter ##
	$avoid = \apply_filters( 'q/hook/wp_enqueue_script/avoid', $avoid );

	// error_log( $avoid );

	if (
		in_array( $handle, $avoid )
		|| strpos( $tag, '__nodefer' ) !== false
	){

		// h::log( 'Not deferring load of script: '.$handle );

		return $tag;

	}

	// track changes ##
	$param = '';

	// route one - include all files based on explicit usage of "__js_async" OR "__js_defer" in $tag - normally appended to src url ##

	// if the unique handle/name of the registered script has 'async' in it
	if ( strpos( $tag, '__js_async') !== false ) {

		// return the tag with the async attribute
		$param = 'async ';

	}

	// return the tag with the defer attribute
	$param .= 'defer ';

	if ( $param ) {

		return str_replace( '<script ', '<script ' . $param, $tag );

	}

	// no change ##
	return $tag;

}

// example of how to add an asset to the avoid array via the filter ##
\add_filter( 'q/hook/wp_enqueue_script/avoid', function( $array ){

	// add asset handles to skip ##
	$skip = [
		'acf', // main acf js file ##
	];

	$return = array_merge( $skip, $array );

	// check ##
	// error_log( $return );

	// kick back to filter ##
	return $return;

});

// example of how to avoid deferring css files when adding via wp_enqueue_style ##
\wp_register_script( 'unique-handle', 'path/to/file/index.js?__nodefer', [ 'jquery' ], '1.0.0' );
\wp_enqueue_script( 'unique-handle' );