async javascript and css for wordpress

Question

I'm trying to make JS and CSS asynchronous without plugins(I know this is possible, without much of coding).

As I'm not really know php, I would like you to help me a little bit over here.

I found this code, to handle this kind of thing, but I don't really understand how to use it.

function add_async_attribute($tag, $handle) {
   $scripts_to_async = array('my-js-handle', 'another-handle');
   foreach($scripts_to_async as $async_script) {
      if ($async_script !== $handle) return $tag;
      return str_replace(' src', ' async="async" src', $tag);
   }
   return $tag;
}
add_filter('script_loader_tag', 'add_async_attribute', 10, 2);

What should I place exactly instead of my-js-handle or another-handle if JQuery file placed here: wordpress/wp-includes/js/jquery/jquery.js?ver=1.11.3 ?

Also, if I'll enlarge the array, say like this:

array('my-js-handle', 'another-handle', 'one-more');

Would I need to change something, say this(in the end of add_filter): 10, 2); ?

And as for the css asynchronization... would it be enough to simply enlarge this array and add mine css address?

Answer 1

You would use the handle of your enqueued scripts, ie, the first parameter of the wp_enqueue_script function used in WordPress for all your scripts... (if you are loading them another way you should use this function instead.)

The handle for jQuery is... jquery actually jquery-core now. But each script queued will have it's own handle. A bit like a 'slug' for a post.

You are fine to add as many handles to that array without having to change the filter parameters. (The 10, 2 part is the filter run priority and number of arguments passed to the filter function respectively.)

But the script_loader_tag filters enqueued scripts, not stylesheets, so no this will not be fine for doing the same with CSS files.

EDIT I don't think that loop will work as it is, as it will return on the first fail, and thus not check all the handles. Use instead:

foreach($scripts_to_async as $async_script) {
  if ($async_script === $handle) {return str_replace(' src', ' async="async" src', $tag);}
}