How to Remove Render Blocking JavaScript Properly

Learn how to Remove Render Blocking JavaScript properly. As you have landed on this page, you must have tested your website on Google PageSpeed Insights, Pingdom Tools or Gtmatrix and looking for a solution to eliminate Render Blocking JavaScript in above-the-fold content. Read on…

In this article, I will discuss what is render blocking JavaScript? Why you should remove render blocking JavaScript? How to eliminate render blocking JavaScript properly? And how to remove render blocking JavaScript in WordPress with or without plugin.

Before digging deep and exploring the solutions to eliminate render-blocking JavaScript in above-the-fold content, you should know the problem first. So let’s start with, what render blocking JavaScript is and why it is important to remove render-blocking JavaScript.

Do you know? How to

Table of Contents

What is Render Blocking JavaScript?
Why You Should Eliminate Render Blocking JavaScript?
How to find Render Blocking JavaScript(s)?
How to Remove Render Blocking JavaScript?

How to Remove Render Blocking JavaScript in WordPress with or without plugin?
Wrapping it up

What is Render Blocking JavaScript?

Render blocking JavaScript in above-the-fold content is that external/internal JavaScript which blocks the desired loading of website. Such JavaScript(s) blocks rendering of the webpage speedily.

Why You Should Eliminate Render Blocking JavaScript?

If JavaScript(s) is present in above-the-fold content in a webpage, it will slow down the page loading speed. Because the web browser could not render HTML speedily if a script encounters its path.

Whenever the web browser comes across a script, it has to stop and execute the script first before continue to parse HTML. Hence, critical rendering path is blocked and optimized rendering of the web page does not happen. Therefore the progressive site loading is compromised.

Clearly, Render Blocking JavaScript is one of the major culprits to slow down your page speed and you cannot afford slow loading website these days. Because no one (including search engines) likes a slow loading website. Therefore you must consider fixing this issue of render blocking JavaScript(s) on your website.

Also, Google recommends eliminating Render-Blocking JavaScript as one of the Google PageSpeed guidelines. And Google has already started taking into account site speed as one of the ranking factors in web search ranking. Hence, removing render blocking JavaScript will not only help to improve user experience & pagespeed but overall search ranking and technical SEO also.

Summing up the benefits of eliminating Render-Blocking JavaScript in above-the-fold content:

Improve pagespeed
Better user experience
Search ranking & technical SEO benefits
Improve Google PageSpeed Insights Score

How to find Render Blocking JavaScript(s)?

Before you start to eliminate render blocking JavaScript, you must know which Render Blocking JavaScript(s) are. There are several ways to do this. You should use Google PageSpeed Insights Tool. PageSpeed Insights tool let you know which JavaScript(s) are blocking the critical render path and loading of the web page.

How to Remove Render Blocking JavaScript?

Google recommends following three solutions to remove render-blocking JavaScript:

Async loading of JavaScript
Defer parsing of JavaScript
Inline JavaScript

Async loading of JavaScript: JavaScript can be loaded Asynchronously by adding async attribute in the JavaScripts. For example:

<script async scr ="abc.js" >

Defer parsing of JavaScript: Defer means hold back for the later time. When we say Defer Parsing of JavaScript, it refers to hold the JavaScript back while other critical webpage resources (HTML, CSS etc.) have completed loading and JavaScript loads only afterward the initial render of the web page is loaded. I have written a detailed guide to Defer Parsing of JavaScript Properly you can check that out.

Inline JavaScript: To inline JavaScript, you should call the whole JavaScript instead of calling it by name. This method is useful for small JavaScript(s).
For example:

<html>
<head>
<script type="text/javascript" src="abc.js"></script >
</head>
<body>
<div>
Hello, world!
</div >
</body>
</html>

You should place the content of JavaScript after /* contents of abc JavaScript file */ comment to inline JavaScript.

<html>
<head>
</head>
<body>
<div>
Hello, world!
</div >
<script type="text/javascript">
/* contents of abc JavaScript file */
</script >
</body>
</html>

Do you know?
Why you should always use minified version of JavaScript on your website, Read this How-to Guide to minify JavaScript with and without a plugin.

How to Remove Render Blocking JavaScript in WordPress with or without plugin?

You can use following methods to remove render blocking JavaScript in WordPress:

Using WordPress plugin(s) – plugin method
Defer parsing of JavaScript manually – without plugin method

Remove Render Blocking JavaScript in WordPress using Plugin(s)

Though there are several WordPress plugins available for removing render blocking JavaScript in above-the-fold content, following three plugins stand out from the crowd:

Autoptimize
Speed Booster Pack
W3 Total Cache

Check out following paragraphs explaining the setup of these plugins to remove render-blocking JavaScript in WordPress.

Facing trouble installing WordPress plugins? Check out our detailed Guide to Learn 3 Different Methods to install WordPress plugins.

#1 Autoptimize

You can use Autoptimize plugin to remove render blocking JavaScript in WordPress. [Download link]

Go to WP Dashboard > Plugins > Add New.
Search Autoptimize in WordPress plugin repository.
Install and activate Autoptimize
Navigate to Dashboard > Settings > Autoptimize. You will see a screen like below.
Check (select) the options as shown in the screenshot below.
Click Save changes and Empty Cache and you are done.

You can also exclude any specific JavaScript from Autoptimize.

#2 Speed Booster Pack

This is another good plugin that you can use to remove render blocking JavaScript in WordPress. [Download link]

Go to WordPress Dashboard > Plugins > Add New.
Search Speed Booster Packin WordPress plugin repository.
Install and activate Speed Booster Pack
Go to Dashboard > Settings > Speed Booster Pack. You will be taken to screen like below.
Select (check) the options as shown in the image below.
Click Save Changes. And you are good to go.

Move Scripts to footer

I always recommend loading of JavaScript in footer instead of head element wherever possible. The advantage of moving scripts to footer is that the scripts will be load after the rest of page resources. Hence the scripts will not block the rendering of the web page. As a result, your website will load faster.

Loading JavaScript (JS) from Google libraries
The advantage of loading JavaScript (JS) from Google libraries is that there is high chance that the visitor of your website already had a cached copy of JavaScript (in his browser cache data) which you are using on your website. Thus the browser will not download it from your website and will render the locally cached copy of JavaScript. Consequently, it will help to make your site load faster.

#3 W3 Total Cache

Yes, you can also use W3 Total Cache plugin to remove render blocking JavaScript in WordPress. W3 Total Cache one of the most popular cache plugins. [Download link]

There are fair chances that you already installed this plugin. If you haven’t:

Go to WordPress Dashboard > Plugins > Add New.
Search W3 Total Cache in WordPress plugin repository.
Install and activate W3 Total Cache plugin.
Go to WP Dashboard > Performance (W3 Total Cache Settings) > Minify.
Scroll down to JS minify settings. You will see settings like shown in the image below.
Check/select options as shown in the image below. Click Save all settings and you are done.

Remove Render Blocking JavaScript in WordPress without plugin

Defer Parsing JavaScript Manually Using a Simple Code

I have written a guide on Defer Parsing JavaScript. Read this guide to defer parsing of JavaScript to eliminate render blocking JavaScript in above-the-fold content on your website and to improve Google PageSpeed Insights score.

Note: Still want better performance for your website? Check out this Complete Guide to Setup W3 Total Cache Plugin for Better WP Performance.

Wrapping it up

Since faster loading websites loved by everyone including search engines like Google, you must consider fixing to render blocking JavaScript for better user experience and technical SEO.

I hope this article helps you removing render blocking JavaScript in above-the-fold content. Which method or plugin do you use to eliminate render blocking JavaScript? Have a question regarding this article, post it via comment section. I will be happy to help.

Cheers!

Are you leveraging followings for site speed?

How to Increase Page Speed Using Htaccess (WordPress)
How to Optimize WordPress Database for better Performance
Remove Query Strings from Static Resources to Increase Site Speed
Leverage Browser Caching in WordPress with or without Plugin