Learn how to Insert Tables in WordPress Post or Page. There are some situations when you want to insert data and details in tabular form in WordPress post or page. In this article, I will…
How to Remove Render Blocking JavaScript
Learn how to Remove Render Blocking JavaScript. 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. Removing Render Blocking JavaScript is one of the Google PageSpeed guidelines and it must be implemented on your website. As render blocking JavaScript is one of the major culprits to slow down your page speed, you must consider to fix this.
In this article I will discuss what is render blocking JavaScript? Why you should remove render blocking JavaScript? How to eliminate render blocking JavaScript? And yes, you can remove render blocking JavaScript in WordPress as well.
Before you get your hand on a solution to eliminate render blocking JavaScript in above-the-fold content. You should understand the problem first. So let’s talk, what render blocking JavaScript is and why it is important to remove render blocking JavaScript.
What is Render Blocking JavaScript?
Render blocking JavaScript in above-the-fold content is that external/internal JavaScript(s) which blocks the desired loading of website. If JavaScript(s) is present above the fold content in a webpage, it will slow down the page loading. Because browser could not render HTML smoothly if a script encounters it path. Whenever browser come across a script, it has to stop and execute the script first before continue to parse HTML.
Why You Should Eliminate Render Blocking JavaScript?
Obviously, removing Render-Blocking JavaScript in above-the-fold content will make your website load faster and will improve your Google PageSpeed Insights Score.
Hence, it will help to improve your overall search ranking and technical SEO too. As Google is taking into account site speed as one of the ranking factors. Therefore Google recommends to eliminate Render-Blocking JavaScript.
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 many ways to do this. You should use Google PageSpeed Insights Tool. PageSpeed Insights tool let you know which JavaScript(s) are blocking the loading of 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 Async by adding async attribute in the JavaScripts. For example:
<script async scr ="abc.js">
Defer parsing of JavaScript: Defer means hold back for later time. When we say Defer parsing of JavaScript, it refer to hold the JavaScript back while rest of webpage resources (HTML, CSS etc.) load and JavaScript load only afterward the page is loaded. I have written a guide to Defer Parsing of JavaScript 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>
Note: 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?
To remove render blocking JavaScript in WordPress, you can use following methods:
- Using plugin(s)
- Defer parsing JavaScript manually using a simple code
Which Plugin(s) to Use:
Autoptimize
Autoptimize: You can use Autoptimize plugin to remove render blocking JavaScript in WordPress. Search Autoptimize in WordPress plugin directory:
- Install and activate this plugin.
- Navigate to Dashboard>Settings>Autoptimize. You will the see a screen like below.
- Check the options as shown in the screen.
- Click Save changes and Empty Cache and you are done.
You can also exclude any specific JavaScript from Autoptimize.
Speed Booster Pack
Speed Booster Pack: This is another good plugin that can be used to to remove render blocking JavaScript in WordPress. Search Speed Booster Pack in WordPress plugin directory:
- Install and activate Speed Booster Pack plugin.
- Go to Dashboard>Settings>Speed Booster Pack. You will be taken to screen like below.
- Select the options as show in image below.
- Click Save Changes. And you are good to go.
I always recommend loading of JavaScript in footer instead of head element. The advantage of moving scripts to footer is that scripts will be load after the rest of page. Hence scripts will not block the rendering of the web page. As a result your website will load faster.
Loading JavaScript (JS) from Google libraries
Advantage of loading JavaScript (JS) from Google libraries is that there is high chance that the visitor of your website already had cache copy of JavaScript (with his browser) which you are using on your website. Thus the browser will not download it from your website and will collect local cached copy of JS. Consequently it will make your site load faster.
W3 Total cache
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. There is fair chance that you already installed this plugin. If not,
- Install and activate W3 Total Cache plugin.
- Go to Dashboard>Performance (W3 Total Cache Settings)>Minify.
- Scroll down to JS minify settings. You will see settings like shown in image below.
- Check/select options as show in image below. Click Save all settings and you are done.
Defer Parsing JavaScript Manually Using a Simple Code:
I have written a guide on how to Defer Parsing JavaScript Properly. Read this guide to defer parsing JavaScript on your website and to unlock more Google PageSpeed Insights score.
Note: Still need more performance for your website. I have written a complete guide to set up W3 Total Cache plugin for best performance. Check this out to optimize your site further.
I hope you will find this post useful. Which method or plugin do you use to eliminate render blocking JavaScript? Let me know your experience while implementing above methods on your website. Have a question regarding this article, post it via comment section. I will be happy to help.
Cheers!
More to read:
Remove Query Strings from Static Resources to Increase Website Speed
How to Leverage Browser Caching in WordPress
How to Enable Gzip Compression in WordPress via .htaccess file
How to Optimize WordPress Database: WP-Optimize
Thanks! Your feedback helps us to improve technumero.com
Reader Interactions
About The Author
As always great information ,it helped to solved the problem that i have been trying to resolve .Thanks !!
Hey Aman,
Glad that I could help.
Thanks for stopping by.
Hello!
I tried using all of these plugins but I am still have the same “Your page has 36 blocking script resources and 36 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.”
Is there anyway you can help me?
Hey Zoe,
You must be using some obstinate code/plugins on your site. Share some more information, url of your site.
.js has been a big pain in my high-speed butt for months, but I run a lot of it and hesitated to move it by coding it myself. But today I tried your recommended Autoptimize and it does an excellent job. I run WP 4.4.4 with 35 active plugins, and this one works like a charm. Dropped my pageload speed in half and I scored in thr 90%+ range in every category measured. Great recommendation.
I did disable it tonight as it seemed to inhibit my CDN service setup, because my CDN is tied in through W3Total Cache, and both apps try to do similar things. After the CDN pull is complete in the next few hours, I will probably activate Autoptimize again. It is a solid plugin that produces ideal results.
Hey Jerry,
Glad that I could help. Love that awesome feedback.
Thanks for stopping by.
Thanks for the tips. I used Autoptimize for the JavaScript with success. If anyone is interested in using that plugin to inline and defer CSS this guide will get you going in the right direction.
Enjoy 😉
Hey Chris,
Glad, you find this post useful.
Thanks for stopping by.