Add async in enqueue

Here’s one method:

https://ikreativ.com/async-with-wordpress-enqueue/

I found several other methods suggested

https://www.google.com/search?q=enqueue+async+wordpress

I just found this on my twitter feed!

https://jasonyingling.me/fixing-render-blocking-scripts-third-party-sources-wordpress/

Steve,

Thanks for the quick answers! I used your first solution. It helped, but the script I’m enqueueing isn’t JavaScript. When I added the code, this is what I got as the output:

<script type='text/javascript' src='//www.apex.live/scripts/invitation.ashx?company=regalrestorationservices&ver=ff0ea97f0f9e034a4cf07eab83d15fce' async='async'></script>

How can I remove the type=’text/javascript’ part?

I need the script line to be outputted like this:

<script src="//www.apex.live/scripts/invitation.ashx?company=regalrestorationservices" async="async"></script>

• This reply was modified 7 years, 6 months ago by mrtechnique.

What’s super neat about that filter is that you can easily do that. Give me a few minutes to come up with the code for that.

Try the following code snippet:

/**
 * Hooks to the front-end
 */
add_action( 'wp_enqueue_scripts', 'regal_chat_script' );
function regal_chat_script() {
	wp_enqueue_script( 'chat-script', "//www.apex.live/scripts/invitation.ashx?company=regalrestorationservices", array(), '1.0', true );
}

/**
 * Filters just the chat-script
 */
add_filter( 'script_loader_tag', 'regal_tag', 10, 3 );
function regal_tag( $tag, $handle, $src ) {
	if ( $handle !== 'chat-script' ) {
		return $tag;
	}

	return "<script src='$src' async></script>";
}

Let us know if this helps.

That solved my problem. Thanks a lot, Jose! This isn’t as important, but how can I make the script the last one before the closing body tag?

What does the 10 and 3 represent in the add_filter command?

So, the 10 is the priority of the script being loaded. So if you add a higher number it will be towards the end of the line of being printed. The 3 is how many variables to pass the callback function. Each hook/filter has different ones so it can be a good thing to know how many and what is being passed.

If that doesn’t makes sense, please let us know and we can explain it a little better. ??

Thanks for answering so quickly, and I apologize for my slow reply. I’m having a little trouble wrapping my head around this. This line calls the regal_tag function:

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

The function only adds async to the script with the chat-script handle.

What’s the callback function? Is it regal_tag? If I used a lower number than 10 in the filter, would the code appear lower in the code? I added the code you gave me on this site:

https://www.regalrestorationservices.com/

Yup, filter hooks are tricky to understand initially. Once you do fully understand, everything about customizing WP makes so much more sense!

The “callback” is a function the filter calls when WP core code executes something similar to $nutag = apply_filters('script_loader_tag', $tag, $handle, $src ); So in this case regal_tag(). What apply_filters() does is it goes through the list of added callbacks and uses call_user_func() for each one. Whatever your callback returns ends up being assigned to $nutag.

By using a lower priority parameter (the 10), your callback will be executed earlier than any others hooked to the same filter that use 10 (the default). Of course then, using a parameter larger than 10 means your callback will be called later than the others. We often think of passing lower numbers as assigning a higher priority to your callback. While true, it is often most advantageous to assign a larger number, lower priority so your callback executes last so it has the final say in the eventual value returned by the apply_filters() call.