Page speed is one of the vital parameters that add value to the website’s search engine optimisation. A WordPress website with good page speed is easy to crawl in for search engines, thus this increases its chances of being ranked on the SERPs- search engine result pages. Some of the common practices to shrink website load time include enabling GZIP Compression, Leverage Browser Caching and Minifying CSS, JavaScript and HTML files of a WordPress website.
All these files; CSS, JavaScript and HTML, include common functionalities of a website and load as soon as a website render. Rendering refers to loading and whatever content is render-blocking means that it needlessly increases website’s loading time making it slower. Hence it is important to eliminate render-blocking as soon as possible.

The Rendering Process

A website loads as a user scrolls down within a browser. The website content and layout that a user sees on the screen before scrolling any further is known as above-the-fold content. Rest, the website content and layout that is accessed by scrolling further in a website is labelled as below-the-fold content.
It is highly important to fix rendering blocking for above-the-fold content on a WordPress website to make it load faster.

How to Remove Render blocking JavaScript in WordPress

JavaScript is one of the major culprits that increase a website’s load time. This is because whenever browsers find a script, they tend to load it before loading HTML. JavaScript that merely defines transitions and stylises, take longer to load since they are larger in size.
To remove render-blocking JavaScript, one must take steps to defer parsing JavaScript to completely optimise the loading schedule of JavaScript file. This method does not remove render-blocking but rather lets you modify your webpage rendering. For defer parsing JavaScript you need to:

1. Create a complete backup to lower down the risk of damaging the website
   
2. If you are not using a Child Theme, create and activate one
   
3. Access the WordPress Dashboard > Appearance > Theme Editor
   
4. Copy and paste the following code the end of the functions.php file. 

function defer_parsing_js($url) {

//Add the files to exclude from defer. Add jquery.js by default

    $exclude_files = array('jquery.js');

//Bypass JS defer for logged in users

    if (!is_user_logged_in()) {

        if (false === strpos($url, '.js')) {

            return $url;

        }

        foreach ($exclude_files as $file) {

            if (strpos($url, $file)) {

                return $url;

            }

        }

    } else {

        return $url;

    }

    return "$url' defer='defer";

}

add_filter('clean_url', 'defer_parsing_js', 11, 1);  

6. JavaScript files can be specified to exclude from defer array (jquery.js)
7. Click update file to save changes. 
8. Test the website using page speed tools such as Google PageSpeed Insights to check if changes have successfully made the website’s load time shrink. 

If you face any problem while implementing defer parsing JavaScript in WordPress, feel free to be part of the conversation. Comment Below!