How to Remove WordPress Render Blocking JS, CSS, and Web Font To Get Better Google Page Speed Insight Score

Google PageSpeed Insights is a tool to measure a website performance. This tool shows the components what are affecting a website performance. For example, Image Optimization, JavaScript Optimization, CSS Optimization, Server Respond Time etc.. One of the major factor to get lower score are render blocking JS and CSS.

Take the example of a Website that has 21 Blocking JS and 13 Blocking CSS

These scripts will also include Google Web Font (if you use). So how to fix these errors?

How to Remove Render Blocking JS and CSS Error in Google PageSpeed Insights for a WordPress blog?

You will need 2 WordPress Plugins to Fix this; Autoptimize and Async JavaScript

• Log in to Your WordPress Blog as an Admin
• Under the Dashboard, click on Plugins option, and select Add New
• Type Autoptimize is the search field, and install this free plugin and activate it

• Add another plugin Async JavaScript and activate this one as well

Now the Plugins are added, let’s configure them

For Autoptimize

• Click on Settings under Dashboard and select Autoptimize
• Click on Show Advanced Settings

• Under JavaScrip Options Tick Optimize JavaScript Code and Also Aggregate Inline JS

• Under the CSS Options, Tick the option Optimize CSS Code

• Click on Save Changes and Empty Cache Option

For Async JavaScript

• Click on Settings Under Dashboard and Select Async JavaScript
• Select the Settings tab
• Tick the option Enbale Async JavaScript
• Under Async JavaScrip Method, Select Defer option
• For jQuery, Select Exclude
• Under the Plugins Autoptimize option Tick the option Enable Autoptimize Support and select Defer jQuery Method

• Save the settings

If you use Google Webfont, you will require another plugin “Google Webfont Optimizer”

• Add the plugin “Google Webfont Optimizer” and activate it

• Now click on Settings option under Dashboard, and select GWF Optimizer option
• Tick the option Enable for Enable or Disable GWFO
• For Select your loader, you should select Javascript Web Font Loader
• Save the settings now

Clear Cache of the website if you are using any Cache Plugin and Visit Google PageSpeed Insights page and test your website performance. You will surely be amazed to see how it has improved. Now there are only 1 blocking JS and 3 Blocking CSS that used to be 21 and 13 respectively. It’s not just this, but it also fixes the minification error of JS and CSS that you used to see while checking your website performance.

Can I remove all the Render Blocking CSS and JavaScript?

I don’t think so. There will always be a couple of them. Removing all will break your website for sure. So don’t waste your time to find something like that.

I use Disqus Comment System that Autoptimize has disabled, what to do now?

You should read this article to fix it.

Why Google PageSpeed Test Shows Lower Score after following the process? Or Why the Server Respond Time Increased?

Everytime you clear cache of your website and test the web page, it will show you a pathetic score. It has nothing to do with the process you just followed. So Test again to see the real score. After clearing caches, everything gets loaded from the server instead of cache file, so it increases the respond time.

Still facing issue? Let us know by comment.