Fix Eliminate render-blocking JavaScript and CSS in above-the-fold content

Posted by on

Share this

It has been found that faster web pages both rank and convert better. 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 discuss all the procedures to successively remove render-blocking JavaScript and CSS in above-the-fold content of your website.

There are many different types of methods to measure the time taken by the browser to load your website. You might like this one.

Have you tested your site speed on Google PageSpeed Insights? If yes then you are nearly familiar with an issue which arises when your enter your website’s URL in it.

It shows some peculiar results with which many of you may be unfamiliar. The most obscure and time-consuming rule is “Eliminate Render-blocking Javascript and CSS from above-the-fold content”.

screenshot from Google PageSpeed Insights, Eliminate render-blocking Javascript and CSS in above-the-fold content

screenshot from Google PageSpeed Insights

This issue mainly arises in the small-width devices such as smartphones, tablets, etc. Simply, it slows down your page loading speed in web browsers.

What is render-blocking Javascript and CSS?

In simple words, the Javascript or CSS files that block your website to render on the browser is known as render-blocking Javascript and CSS files.

This rule triggers when PageSpeed Insights detects that your HTML references a blocking external JavaScript file in the above-the-fold portion of your page.

Before the website completely loads the browser has to create a DOM (Document Object Model) tree to first load all the HTML elements of the web page. During this process, if the browser encounters any script in the above-the-fold or head content, it has to stop loading the HTML and load the script first. And hence it breaks down the 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).

For example, you have implemented a Bootstrap CSS and Javascript files to your website which is currently present on a different website say MaxCDN (by the method of including scripts using CDN links).

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

Eliminate render-blocking JavaScript and CSS in above-the-fold content

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:

How to check whether you need to Eliminate render-blocking Javascript and CSS?

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.

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 widely located automated servers within 5-6 seconds. After scanning, it will suggest some required modifications improve your site speed. If it is also resulting to “Eliminate render-blocking Javascript from above the fold content” then you should surely attempt to fix it.

How to remove render-blocking JavaScript and CSS in above-the-fold content?

HTML to Javascript, How to Eliminate or remove render-blocking JavaScript and CSS in above-the-fold content

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 (especially Beginners or non-coders). Because if you are going to fix it using the coding method 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 WordPress plugins are the primary solution, right?

How to Remove render-blocking Javascript in WordPress using a Plugin?

The plugin which I’m going to talk about is primarily made to remove render-blocking JavaScript and CSS in above-the-fold content and pass this issue on Google PageSpeed insights. This plugin will not minify your Javascript file, on the other hand, it will optimise the CSS delivery of your website.

The name of this cool plugin is Above The Fold Optimization.

For installing the Above the Fold Optimization, follow up the usual routine.

  1. Open WordPress admin >> go to the Plugins and click Add New.
  2. Enter “Above the Fold Optimization” in the search box and hit Enter.
  3. The plugin will show up as the first on the list, click “Install Now”. The plugin thumbnail must have the Google Pagespeed 100/100 score.
  4. Activate the plugin and then Go to the settings >> Above the Fold Optimization.

You will come across the page which will show the number of CSS optimisation options. For first, you have to check the boxes and enable advanced CSS editor‘ and ‘optimise CSS delivery‘.

This will automatically add ‘async‘ attribute 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 as it can be harmful if not done correctly).

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 web 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 eliminate or remove render-blocking JavaScript and CSS in above-the-fold content.

The another (complex/ by coding) way to eliminate render-blocking JavaScript and CSS in above-the-fold content from your website are 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 in which the browser takes more time to render the web page.

Inlining the Javascript is an essential move to remove render-blocking Javascript in above-the-fold content.

If the header code of your website 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 optimised 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 if 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.

Thus, it maintains your website’s speed and performance on the browser.

Defer loading of Javascript (most effective method)

This is another way to optimise the loading of your website. Using this way you can customise 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. Well, I found this 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.

HandPicked articles:

Endpoints

  • The methods mentioned above require some basic technical knowledge about WordPress, HTML, and Javascript. If you’re a beginner and unfamiliar with WordPress then I’ll not recommend you to follow up this write-up.
  • Website speed is an essential SEO factor and you should 4-way optimise it. Remember, while optimising don’t forget to Backup your site files as it is a DIY guide.
  • If you’ve problem fixing this issue on your website let me know and we will fix it together.

If you liked this post (remove render-blocking JavaScript and CSS in above-the-fold content) don’t forget to share it with your friends and on Facebook and Twitter. This will help them to improve their website speed too. Have any other methods in your mind or you’ve just discovered one ? Please share it with us in the comment.

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Last updated: November 16, 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.

4 comments

GREAT POST I HAVE EVER READ IN OTHER SITES SERIOUSLY GOOD WORK ….THANK YOU

Hey Sahil, Glad you liked it.

good explanation !

Thank you!

Leave a Reply