How to fix ‘Eliminate render-blocking JavaScript and CSS in above-the-fold content’ error on Google PageSpeed for your WordPress Website

Here is how you may want to tune up your WordPress website performance i.e. how much time it takes to download your website from server to your visitors’ computer, mobile or tablet.

 
In era of responsive design we tend to embed more than one Javascript or CSS files such as bootstrap css & js file bundles.

 
And if you have integrated third party advertising in your website then vendor like Google they add their own javascript file through their AdSense ad code that you can’t control.

 
But here is simple way out of this problem.

 

Important Note: Compressing, Minifying or Deferring Files may have adverse effect on functionality of website because of dependencies so first do following steps on your local server if everything looks to be working fine then you can update same files on Live servers. Just for safety & security purposes.

 

Here is example:

 
When you ‘Analyse’ your website on Google PageSpeed you get warning something like this:

 
Your page has 4 blocking script resources and 8 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

 

Solution 01: Safest way of Deferring JavaScript ‘JS’ would be like following

 
Step 01: Just add word ‘async’ at closing tag called ‘</script>’, So your code would not block loading any of other resources.

 
Step 02: Add same line of code just before closing of footer tag so your code already asynchronous (async) after moving same code to footer it will load at completion of loading of website.

 

//So it will look something like this:
<script type='text/javascript' src='<?php echo get_template_directory_uri(); ?>/js/file-name.js' async></script>
</body>

 

Solution 02: Add following code to your WordPress Theme’s functions.php file.

 

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

 
Note: So by using above code we use ‘WP Deferred Javascripts’ which defer the loading of all Javascripts added with wp_enqueue_scripts, using LABJS (an asynchronous javascript library). It seems after discussing this code with other WordPress experts I found out that adding this code may create WordPress Core security issues. So using Solution 01 would be best answer.

 
Now check & analyse your website with PageSpeed .js error should have been resolved now.

 

Now problem remains for your root CSS files.

 
Note: You will not able to solve this error for externals css files which third party & from external source which can not be controlled by you e.g. AdSense Ads related css files or WordPress Jetpack css files

 

So Solution is: you should minify or compress your WordPress Theme’s all CSS files removing extra spaces, line breaks, comments etc.

 
So how to do that?

 
Step 01: Backup your website & server

 
Step 02: Navigate to this website of CSSCompressor

 
Step 03: Copy pasting your original css source code in text field

 
Step 04: Tweaking settings to your test & then press compress button to get expected result of compresses i.e. minified css

 
Step 05: Now replace your original root css file’s code with this output

 
Step 06: Now save your root css file

Step 07: You can move your css file’s link from header to footer just above ending body code like below:

//So it will look something like this:
<link rel='stylesheet' id='icons-css'  href='<?php echo get_template_directory_uri(); ?>/css/font-awesome.min.css' type='text/css' media='all' />
</body>

 
Step 08: Check all of your website to see it is working as expected.

 
Now check & analyse your website with PageSpeed .css error should have been resolved now.

 
Hope it helps,

 
Thanks & Regards
Mandar Apte