WordPress WordPress Errors

How To Fix Render-Blocking JavaScript and CSS Using W3 Total Cache

Fix Render-Blocking
Written by Adarsh M

 

Have you ever noticed Render-blocking JavaScipt in your Speed test results?

If you haven’t noticed it yet, kindly do a speed test of your site on GTmetrix or Google Page Speed Insights.

Have you seen it? Now, I will show you how to fix it.

How to fix Render-Blocking JavaScript and CSS in WordPress using W3 Total Cache plugin. I know, you have already activated Minify on it. But, that’s a basic thing. And there are something we can do manually in W3 Total Cache.

By doing this, you can reduce the number of requests and page speed to an extent. You can read the complete guide for WordPress Speed Optimization for better performance of your WordPress site.

Before that, this is a bit technical stuff. If you did something that hurts the site, I’m not responsible for it.

We need W3 Total Cache plugin to do this. So, install W3 Total Cache plugin from WordPress directory. I think, you know, how to install a plugin in WordPress.

For better understanding, I have divided this into three steps so you won’t get confused. I know, you are good enough to understand all these stuff, but I think I should not make any confusion to anyone reading this.

    #1 Enabling Minify

This is the process of enabling Minify in W3 Total Cache plugin. This can be done after activating the plugin.

  • Install the Plugin-W3 Total Cache
  • Move the mouse pointer to Performance » Click on General Settings

  • Enable Minify
  • Select Manual in Minify mode
  • Click on Save Settings & Purge Caches

We usually give the Minify mode as Auto, but now, we should change it into Manual as we have to do this process manually. Enabling Manual mode will give an extra option to add the URLs of the render-blocking JavaScript and CSS.

    #2 Fixing Render-Blocking JavaScript

This has to be done in W3 Total Cache Minify Settings. This helps in reducing requests and to increase loading speed.

  • Performance » Minify

  • Enable JS minify settings
  • Change Embed type from Default (blocking) to Non-blocking using “async” in Before. Leave <body> and </body as default.
  • You should run a speed test on Google Page Speed Insights or GTmetix to get the links of Render-Blocking JavaScript.
  • And copy the Render-Blocking JavaScript URL and paste it into the box you see after clicking on Add Script.
  • By default, the Embed Location will be Embed in <head> and you should change it into Embed before </body>
  • You have to add all links of render-blocking JavaScript into the box. And Click on Save Settings & Purge Caches.

Now, render-blocking JavaScript is fixed.

    #3 Fixing CSS-Minify

  • Enable CSS minify settings
  • Now, copy and paste the CSS URLs that you want to minify
  • Save Settings & Purge Caches

Now, you can run a speed test and check if there are any render-blocking JavaScript or CSS.

Would like to know if it helped you to reduce the number of requests. Would you mind sharing your thoughts in comments? Thank you

About the author

Adarsh M

Adarsh.M is a blogger and a web designer from South India. He writes about WordPress, SEO, and Related things.
Follow him on Facebook
Twitter Google Plus

Leave a Comment

20 Comments

Claim Your Free DO Credit of $10 NowGive me
+ +