Fixed: Eliminate render-blocking Javascript and CSS in WordPress

Optimising your site for search engines is the first thing you should do. And when doing that, Google PageSpeed is one of those services that tells you what you need to do to optimise your website for speed and eventually, SEO. When checking website with Google PageSpeed, Most of the users gets this issue: Eliminate render-blocking Javascript and CSS in above-the-fold content

That is a serious problem and you should fix it right away to increase your website’s loading speed and optimise it for search engines. To fix this issue, We’ll be using W3 Total Cache plugin. As many of you already know, W3 Total Cache is one of the best WordPress plugins, and it helps in speed up your website very drastically.

Most of the websites using WordPress would have installed W3 Total Cache, but not all will be using it to maximum advantage. With this guide, you’ll be able to Minify your JS and CSS files, which is crucial and as a result, you won’t be getting “Eliminate render-blocking Javascript and CSS” issue anymore.

Anyway, Without further ado, Let’s get right into it.

How to Eliminate render-blocking Javascript and CSS in WordPress

Step 1

After installing W3 Total Cache, In Admin panel, go to Performance -> General Settings and find “Minify” section and set Minify Mode to Manual.

Select Manual Mode For Minify in W3 Total Cache

Doing that would provide some additional options on Minify settings page. Now, Head on to Performance -> Minify page. There, Scroll on to JS section. If you haven’t already, Enable JS minify settings first. Then make sure the following things are set exactly like this:

Enable JS Minify Settings: Eliminate render-blocking Javascript and CSS

Step 2

After doing all that, Scroll to JS File Management section and ensure that you have selected your active theme in Theme option. Now, Below it, There is a text: No JS files added and an option to Add scripts.

Select Theme: JS File Management

Click on Add a script and you’ll see an option to add file path. Now, Go back to Google PageSpeed and below the Eliminate render-blocking JavaScript and CSS in above-the-fold content issue, Click on Show how to fix. It’ll look like the image below.

Eliminate render-blocking Javascript and CSS in above-the-fold content

It’ll show you which JS files and CSS files you should minify. From there you can easily copy all file paths by hovering over them.

Step 3

Now in Admin panel, Paste the JS file URL to field you added in the last step. Add another field and paste another link from Google PageSpeed data. Do it until all JS files are added.

Note: Make sure you enter only JS files and not CSS files in this section.

Note: It is advisable to check the site after adding each script before adding the next one. That way you can find if a JS file is not compatible with this.

Step 4

After all javascript files are added, we should now do the same thing for CSS files. On Performance -> Minify, Go to CSS section and do the same thing we did for JS.

Also, Make sure to have CSS minify settings Enabled.

CSS Minify Settings: W3 Total Cache

Leave a Reply

Your email address will not be published. Required fields are marked *