What is Render-Blocking JavaScript and CSS and how to fix?

By Faruque Ahamed Mollick

Rendered-Blocking JavaScript and CSS is so common issue for websites that you can find when testing your site on Google’s PageSpeed Insights. It also shows you the “Show how to fix” and you will see some CSS and javaScript file link from your site.

Well, many of site owners and bloggers don’t know what is rendered blocking JavaScript and CSS and they have no idea how to fix it.

So in this article, I am going to help you so that you will understand and know about render-blocking JavaScript and CSS.

So what is Render-Blocking JavaScript and CSS?

When a web browser loads a page from a website, the JavaScript and CSS resources usually prevent the page from displaying to the user until they are loaded completely and processed by the browser. These CSS and JavaScript resources are called render-blocking. Well, for example, render pure HTML before the CSS will show a flash of the unstyled web page which creates a poor and bad user experience. So, in that case, it is needed to load JavaScript and CSS first.

However, in many cases, the CSS and JavaScript resources are conditional and only applied in specific cases. In this situation, there are simply no need to render JS and CSS above-the-fold content. To make your web page for fastest possible experience for your users you should always try to eliminate these render-blocking JavaScript and CSS resources that are not required to display above-the-fold content.

How to fix or eliminate Render-Blocking JavaScript and CSS problem?

Before I am going to tell you how to eliminate Render-Blocking javaScript and CSS I want to be clear at one point that it needs so much effort or simply it is impossible to remove all the render-blocking resources. So most probably it is not possible to eliminate these resources on your site completely.

if you are running a self-hosted WordPress blog then there are some plugins may create render blocking resources that are almost impossible for you. For this reason, you have to remove plugins that are responsible for render blocking resources. But if the plugins are really so useful then you can not remove it and thus you can not remove render-blocking JavaScript and CSS.

Just remember that it is not our goal to score perfect website speed on Google’s page speed insights, our goal is to create the best possible user experience. We can not remove render blocking resources completely, but we should try to minimize it.

The best practice is to use jQuery and JavaScript resources to keep below the fold. It can reduce the render-blocking resources on your site. but on a WP site, render-blocking JavaScript generated through plugins is almost not possible to keep below the fold and also it should not be as an update of the plugin will erase it.

If you are a developer and can develop WordPress theme then there is a chance to reduce the render-blocking JavaScript by keeping these resources below the fold. In my case, I have given some plugin functionality directly in my theme which has helped me to minimize the number of plugins on my site and thus it helps me to remove unwanted resources.

In the case of render blocking CSS, you can minimize it by properly calling your CSS files, by reducing the number of CSS files in the critical path, by using less amount of CSS overall etc. You should not call CSS files by using @import. Calling CSS using @import and improperly labeled CSS are cause render blocking issue.

Also, I suggest you use fewer CSS files in the critical path. The critical rendering path is another way to say what to do by the browser before showing your web page. If you are using a number of CSS on your site then removing each CSS file will help you to speed up your site. I suggest you remove all the CSS file keeping the CSS code in the same file.

So what happened if you are not able to remove render blocking resources?

If it is not possible for you to remove render-blocking JavaScript and CSS resources from your site then I again want to say you not to worry about it. You will find almost all the popular sites and blogs has to render blocking resources. So if they success with these types of resources then why it will stop you from success?

With these, render blocking resources also your site can rank well on search engines like Google. Just concentrate on creating great and quality content and you will see your site is improving. but again want to suggest you if it is possible then try to minimize these types of resources.

So have you learn something new from this article? Is it helpful to you? please let me know if you want to know about any other things that are related to render-blocking JavaScript and CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *