How to eliminate render blocking JavaScript in above-the-fold content

Share this

Posted by on

Render Blocking Javascript is one of the major factors which is adversely affecting the page speed. Rendering usually means how the browsers fetch your content and display it to the outside world. In this post, I’m going to show you the ultimate ways to remove render-blocking javascript in above the fold content of your website.

This issue mainly arises in the low-width devices such as mobiles, iPad, etc.

What is render-blocking Javascript ?

In simple words, the Javascript that blocks your website to render on the browser is known as render-blocking Javascript.

Before the website completely loads the browser has to create a DOM tree to first load all the HTML elements. During this process, if the browser finds any script in the above-the-fold (head) content, it has to stop loading HTML and load the script first. And hence it breaks DOM construction.

These scripts can be mainly external CSS or Javascript files which are linked to your website. For example, you have added a Bootstrap CSS and Javascript files to your website which is currently present on any other alien site (by the method of including scripts using links).

Simply, ‘external scripts’ are the JS or CSS files that your website uses from any other site.


This creates a chain of links on your website. Furthermore, the browser has to first extract the files from other sites then again from your site and then it serves to your users. Isn’t this a very long way friends ?

Google prefers to show their users the better content which loads in no time. And if you’re slow, you know that how will Google treat you. It will definitely push your contents to further (lower) pages.

And this is the reason why Google ignores the sites which contain ‘render-blocking javascript’ files. Hence, it can also be considered as a secondary SEO factor.

We have already shared the major factors affecting the website speed and how to fix it in our previous posts. You may like to read:

Before making any changes you should know if you really need it. Yes, it is my first recommendation for you to check your website speed grade (Using Google PageSpeed). Change your settings only if Google is opting to do so.

How to check whether you need to remove render-blocking Javascript ?

It is very simple. Go to > Google PageSpeed Insights > Enter your website URL in the placeholder > Click on Analyse button.

Google will scan your website from its server within 5-6 seconds. After scanning, it will suggest some required modifications to improve your site speed. If it is also resulting to “Eliminate render-blocking Javascript from above the fold content” then you have to follow and fix this. If not, Congratulations !!

How to remove render-blocking Javascript ?

HTML to Javascript, How to remove render-blocking Javascript ?

Well, there are some easy and some complex methods to fix this issue of website speed. But I will recommend you to use an easy method and not to wreck your website. Because if you are going to pick up the complex one you will have to do a couple of more customization for its operation.

Of course, an easy method requires a good plugin as always. As plugins are the primary solution, right ?

The plugin which I’m going to talk about is primarily made to remove render-blocking Javascript and pass this issue on Google PageSpeed insights. This plugin will not minify your Javascript file, on the other hand, it will optimize the CSS delivery of your website. The name of the plugin is Above The Fold Optimization.

Install and activate the plugin. Go to the plugin settings under Plugins > Installed plugins. You will come across the page which will show the number of CSS optimization options. For first, you have to check the boxes and enable ‘advanced CSS editor‘ and ‘optimize CSS delivery‘.

This will automatically add ‘async‘ to all the external CSS strings opened in your <head> tag. You will come to know more about ‘Async‘ in the manual method (given below).

Secondly, you have to enable ‘Localize Javascript’ on the same settings page of the plugin. In the Localize Javascript BETA tab above the options, you can enable the Javascript files in your theme to pass Leverage-browser-caching rule in Google PageSpeed.

If you are a beginner and don’t know much about WordPress but wish to solve this issue then please use the above method (Do not go for code).

Also, this issue can be fixed by using any external content delivery network. Here at 3nions, we are using CloudFlare CDN and hence we do not face this issue. This is because CDN caches the files of your website such as scripts and styles and then serves it to your users from the alternate servers.

Well, if you really care about your website speed you should definitely attempt to fix this ASAP.

Inlining Javascript in head content.

how to remove render-blocking javascript and css from above-the-fold content.

The another (complex) way to remove render-blocking Javascript from your website is to inline the scripts.

The external Javascript files forces the browsers to first fetch them before rendering (loading) the whole page. Also, the external scripts may contain some useless strings which should not require being rendered. Hence, this creates another network jump which takes more time to render. If the header code looks like this,

..then you should inline the script like this.

This is known as inlining the Javascript. Hence, inlining the Javascript helps the browser to skip the external request and focus on rendering.

Inlining the scripts may increase the HTML size but it will not affect the speed. Furthermore, you should only inline the small Javascript files for getting optimized results.

The next thing you should attempt is to add ‘Async‘ attribute to your code.

What are (Async) Asynchronous scripts ?

Async‘ is an HTML attribute for giving the browser a specific information about the order of loading a web page.

When you put ‘async’ attribute in your HTML script, it doesn’t stop loading of HTML, on the other hand, it lets the browser load HTML first. The script will be loaded after the HTML.

Defer loading of Javascript (most effective method)

This is another way to optimize the loading of your website. Using this way you can customize your HTML markup in such a way that browser will fetch only those scripts which are required to load the specific page. This helps to reduce the server load and hence, improves the website performance.

Deferring loading of Javascript simply means to load the Javascript after the website contents are fully loaded. (first load page then Javascript). The code given below works awesome. I found it on Varvy when I was searching for deferring the Javascript.

Replace the path to myjavascript.js with your JS filename and location. Copy and paste this code before the closing of your </body> tag in your HTML file. Also, make sure that the path to your JS file is correct (must be present in the same HTML folder)

If you’re using WordPress then the </body> tag of your site must be present in the footer.php or index.php file. Don’t forget to specify the file path in it. The path should be specified like this,

And, Deferring Javascript is the best way to remove render-blocking Javascript. Also, this method only works in chrome 15+, safari5+, Firefox3.6+, and IE9+, not in others.

You may also like these articles,

So, guys, these are some of the ways to remove render-blocking Javascript in above the fold content of your website. If you liked this post, share it with your friends on Facebook and Twitter and help them to improve their website speed too.

Last updated: July 30, 2016

Authored by :

Hi ! I'm Prakhar Shrivastav, currently a final year BSc student and a co-founder of 3nions. I love spending quality times on Web development, Graphic designing, and SEO.



Hey Sahil, Glad you liked it.

good explanation !

Thank you!

Leave a Reply