How to Remove WordPress Render Blocking JS, CSS, and Web Font To Get Better Google Page Speed Insight Score
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?
- 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
Now the Plugins are added, let’s configure them
- Click on Settings under Dashboard and select Autoptimize
- Click on Show Advanced Settings
- Under the CSS Options, Tick the option Optimize CSS Code
- Click on Save Changes and Empty Cache Option
- Select the Settings tab
- 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
- 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.
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.