Read MoreThe best VPS hosting starts from $5 per month!

Remove Render-blocking JavaScript and CSS In WordPress

Do you know what is render blocking JavaScript and CSS? Actually, Render Blocking JavaScript and CSS mean, A JavaScript or CSS file That keeping the page from loading. If you know about Google page Speed analyzer, Then you might also know that, Google recommends webmasters to remove render blocking JavaScript and CSS from above the fold of the webpage.

Actually what is render blocking JS and CSS? Ok, Let’s breakdown the phrase “render blocking” into its parts, Render (to load) blocking (to prevent). So we get JS and CSS that is preventing a page from loading.

Another reason we should remove Render Blocking JavaScript and CSS is, Web Page loading speed is a matter. It’s proven and officially announced by Google that, Decreasing page load time can rank your webpage better in search engine and Improve user experience. It also increases revenue as well.

So, Why you are still waiting and haven’t removed render blocking JavaScript & CSS from your web page. There can be two reasons, one is, you don’t know how to remove render blocking JavaScript & CSS and another is, You are still not informed about it. That’s why, through this article, I am informing you and showing you how to fix this issue in WordPress.

Today, Through this article, I am going to show how to remove render-blocking JS and CSS in WordPress. It’s for WordPress, Because the maximum number of Web sites built with WordPress. Let me now show you “HOW“.

How To Remove Render Blocking JavaScript & CSS

There are a couple of ways to do that, But I am going to show you the easiest method.

If you aren’t using W3 Total Cache and Don’t even want to use it, Then follow our first method. And if you are already using W3 Total cache to accelerate your WordPress, You needn’t worry about this. Because W3 Total Cache has built in functionality to asynchronously load JavaScript and CSS or remove Render Blocking JavaScript & CSS from WordPress. It’s just need a little configuration.

Now Let’s begin the first method:

Using Async JS and CSS Plugin

Async JS and CSS plugin no longer maintained by it’s author. This plugin is outdated and some of my fellows reported issues about this plugin and it no longer work with latest version of WordPress But, you can give it a try at your own risk. I recommend you to follow The W3 Total Cache Method or Autoptimize WordPress Plugin Method.

In this method, We are going to use a plugin which called Async JS and CSS. It’s a free plugin and you can download it from WordPress Plugin Directory. First download Async JS and CSS and install to your WordPress. Once you have installed the plugin to your WordPress, It will start eliminating render blocking Java & CSS from your WordPress.

It’s as easy as I wrote here. It can also minify Java and CSS to your WordPress. To minify JaveScript and CSS using Async JS and CSS plugin you will have to enable it through “Settings>Async Settings” menu. Now check your WordPress through Google Page Speed insight. Wow! ZERO Render blocking JavaScript and CSS.

However, I recommend everyone to use the 2nd method which is using W3 Total Cache.

Using W3 Total Cache

So, You have installed W3 Total cache to your WordPress and configured it with the best settings. Now let’s eliminate render blocking JS & CSS.

First, I recommend you to configure W3 Total Cache with recommended settings. Once you have configured W3 Total Cache properly with recommended settings now follow the instructions below:

First Scan your WordPress through Google Page Speed Insight and note down all the Render-blocking JavaScript and CSS file URL listed by Google Page Speed Insight. I have also attached a screenshot of Google page speed insight Report below:

Render blocking JS and CSS files

Now, Login to your WordPress admin panel and visit “Performance>Minify“.

Now scroll down to JS and CSS section and follow below the screenshot:

remove render blocking css and js

By clicking Add a script button, A field will appear where you can paste the Scripts URL like below:

add scripts in W3 total cache

After pasting all the render-blocking JS click the “Save all settings button”. You have just finished removing render-blocking JS. Now it’s time to remove Render-blocking CSS. Do the same things you have done in JS, just make sure that, you have added the render-blocking CSS file URL instead of JS.

Now “Empty All Caches” and check your WordPress site through Google Page Speed insight. Wow! There is no Render-Blocking JavaScript and CSS.

Using Autoptimize WordPress Plugin

Autopmize is a simple WordPress Plugin that makes your WordPress website fast and save bandwidth by aggregating and minimizing HTML, JS and CSS. It also helps you to asynchronously load your JavaScript and CSS. There is no critical settings needed to remove render blocking JavaScript and CSS.

Just install Autoptimize WordPress plugin and go to Settings > Autoptimize and then tick on the Optimize HTML CodeOptimize Javascript Code and Optimize CSS Code.

Remove Render Blocking JavaScript and CSS Using Autoptimize

Once you are done with Autoptimize plugin it will concatenates all scripts and styles, minifies and compresses them, adds expires headers, caches them and more. If you are an advanced user you may try Advance option by clicking Show Advanced Settings from the top right corner.

Hope above these methods works great for you, If you have found this tutorial useful, Please consider sharing because, Sharing is the way to say thanks in Web. Also If you have any question about this issue, please feel free to let us know via below the discussion box. We will try to do our best.

33 Comments

Leave a Reply