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.
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“.
There are a couple of ways to do that, But I am going to show you the easiest method.
Now Let’s begin the first method:
Using Async JS and CSS Plugin
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.
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:
Now, Login to your WordPress admin panel and visit “Performance>Minify“.
Now scroll down to JS and CSS section and follow below the screenshot:
By clicking Add a script button, A field will appear where you can paste the Scripts URL like below:
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.
Using Autoptimize WordPress Plugin
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.