How do I defer or async this WordPress javascript snippet to load lastly for faster page load times?

Or more universal way:

function add_async_forscript($url){    if (strpos($url, '#asyncload')===false)        return $url;    else if (is_admin())        return str_replace('#asyncload', '', $url);    else        return str_replace('#asyncload', '', $url)."' async='async"; }add_filter('clean_url', 'add_async_forscript', 11, 1);

so you can add async to any script without code changes, just add #asyncload to script url as:

wp_enqueue_script('dcsnt', '/js/jquery.social.media.tabs.1.7.1.min.js#asyncload' )

Trying to keep things somewhat modular and all encompassing, the following approach dynamically chooses how to embed the tag with the async or defer attributes by just appending a small identifier to the $handle name:

/*** Add async or defer attributes to script enqueues* @author Mike Kormendy* @param  String  $tag     The original enqueued <script src="...> tag* @param  String  $handle  The registered unique name of the script* @return String  $tag     The modified <script async|defer src="...> tag*/// only on the front-endif(!is_admin()) {    function add_asyncdefer_attribute($tag, $handle) {        // if the unique handle/name of the registered script has 'async' in it        if (strpos($handle, 'async') !== false) {            // return the tag with the async attribute            return str_replace( '<script ', '<script async ', $tag );        }        // if the unique handle/name of the registered script has 'defer' in it        else if (strpos($handle, 'defer') !== false) {            // return the tag with the defer attribute            return str_replace( '<script ', '<script defer ', $tag );        }        // otherwise skip        else {            return $tag;        }    }    add_filter('script_loader_tag', 'add_asyncdefer_attribute', 10, 2);}

Example usage:

function enqueue_my_scripts() {    // script to load asynchronously    wp_register_script('firstscript-async', '//www.domain.com/somescript.js', '', 2, false);    wp_enqueue_script('firstscript-async');    // script to be deferred    wp_register_script('secondscript-defer', '//www.domain.com/otherscript.js', '', 2, false);    wp_enqueue_script('secondscript-defer');    // standard script embed    wp_register_script('thirdscript', '//www.domain.com/anotherscript.js', '', 2, false);    wp_enqueue_script('thirdscript');}add_action('wp_enqueue_scripts', 'enqueue_my_scripts', 9999);

Outputs:

<script async type='text/javascript' src='//www.domain.com/somescript.js'></script><script defer type='text/javascript' src='//www.domain.com/otherscript.js'></script><script type='text/javascript' src='//www.domain.com/anothercript.js'></script>

Thanks to @MattKeys @crissoca for inspiring my answer here.

This blog post links to two plugins of interest:

Asynchronous Javascript
Improve page load performance by asynchronously loading javascript using head.js

WP Deferred Javascripts
Defer the loading of all javascripts added with wp_enqueue_scripts, using LABJS (an asynchronous javascript library).

Haven't tested them but checked the code and they do pretty fancy stuff with WordPress scripts enqueuing process.

But then WPSE comes to rescue:

// Adapted from https://gist.github.com/toscho/1584783add_filter( 'clean_url', function( $url ) {    if ( FALSE === strpos( $url, '.js' ) ) {        // not our file        return $url;    }    // Must be a ', not "!    return "$url' defer='defer";}, 11, 1 );