How can I defer these JS files?

Question

In my website, I used GTmetrix and I got JS defer error on following two files.

92.5KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.

http://mysite.url/wp-includes/js/jquery/jquery.js?ver=1.12.4 (87.0KiB)

http://mysite.url/ (5.5KiB of inline JavaScript)

In my functions.php file I have following code to defer js but it seems not affected for js file(s) outside the theme folder.

Here's my piece of code in functions.php file

if (!(is_admin() )) {
    function defer_parsing_of_js ( $url ) {
        if ( FALSE === strpos( $url, '.js' ) ) return $url;
        if ( strpos( $url, 'jquery.js' ) ) return $url;
        // return "$url' defer ";
        return "$url' defer onload='";
    }
    add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}

How can I get rid of that error and defer parsing above mentioned items?

Answer 1

What Are Async And Defer Attributes?

Here's what the async and defer attributes do:

Async Attribute: The async attribute loads the script asynchronously. In other words, ensures that the script loads asynchronously along side the other contents of the page, after which it is executed.

Defer Attribute: The defer attribute defers loading of the script. It ensures that the script is executed only after all contents of the page have finished loading.

Both these attributes are well supported in all modern browsers including Firefox, Chrome and Internet explorer. Internet explorer has added support for these attribute since IE10.

An example of a script tag with the async and defer attributes is as follows:

<script src='http://sitename.com/js/scripts.js' async='async' type='text/javascript'> 
</script>
<script src='http://sitename.com/js/scripts.js' defer='defer' type='text/javascript'> 
</script>

Function To Add 'Async/Defer' Attribute To Your Render Blocking Scripts In this article, we are going to look at three different methods to add these attributes to your render blocking javascripts. These methods are as follows:

Method 1: Adding defer/async to all scripts without exception. Method 2: Adding defer/async to all scripts with exception of a few. Method 3: Adding defer/async only to selective scripts. (Most flexible method as it allows you to add async to some scripts and defer to others.) You can use any method that suits your need. You can use any method that suits your need.

Method 1: Adding Async or Defer to All Scripts

If you would like to add the async or defer attribute to all scripts without exception then you can use the following code.

Open your theme's functions.php page and add this code to the bottom of the page.

/*function to add async to all scripts*/
    function js_async_attr($tag){

# Add async to all remaining scripts
    return str_replace( ' src', ' async="async" src', $tag );
    }
    add_filter( 'script_loader_tag', 'js_async_attr', 10 );

for additional information please check link https://orbitingweb.com/blog/add-defer-async-attributes-to-scripts-in-wordpress/