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


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.

[h]#1 Enabling Minify[/h]

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.

[h]#2 Fixing Render-Blocking JavaScript[/h]

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.

[h]#3 Fixing CSS-Minify[/h]

  • 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

Partner Posts

20 thoughts on “How To Fix Render-Blocking JavaScript and CSS Using W3 Total Cache”

  1. Thanks Adarsh for sharing this informative post.
    Hey, I just read a post a few hours back it says, “Google has trouble reading JavaScript links. is that true?
    Thanks for sharing this informative tuto.
    Keep sharing.
    Have a great and profitable June ahead.
    ~ Philip

    • Hi,

      Google has no trouble in reading JavaScript links of any type. Their bots can crawl every JavaScript links.
      And we have to fix render-blocking JavaScript because it effects the page loading speed by increasing the number of requests.

      Thank you

  2. Highly simplified for non tech people like me, I do have W3 cache but have not yet fix render blocking JS.. shall go & check this all out tomorrow for sure!

  3. This was quite informative! I will have to definitely go step by step to figure this out. It’s like another language 🙂

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Share This