How to Eliminate Render-blocking Javascript and CSS in WordPress

0
Eliminate render blocking js and css in WordPress

Eliminate render blocking js and css in WordPress

If you have used Google Pagespeed, In most of the cases you will see a suggestion that you should “Eliminate render-blocking JavaScript and CSS in above-the-fold content”.

What does Eliminate Render-blocking JavaScript and CSS means?

This is what Google says for Javascript:

Before a browser can render a page to the user, it has to parse the page. If it encounters a blocking external script during parsing, it has to stop and download that Javascript. Each time it does that, it is adding a network round trip, which will delay the time to first render of the page.

This is what Google says for CSS:

This rule triggers when PageSpeed Insights detects that a page includes render blocking external stylesheets, which delay painting of content to the screen.

Means as per google content above the fold should be shown to user as soon as a user lands on a page without waiting for these files to be downloaded on user system and for this Google recommends that you should Inline necessary Javascript and CSS files, which isn’t practical in most of the cases as most of the WordPress users aren’t coder and it’s like coding a new theme almost and also it kills the Importance of stylesheet(This is what they do with google search page).

So,What is the solution?
1.Do what Google saysInline the important sections(Not possible here).
2.Load the Files Asynchronously.

What’s the Aim and is it Possible to achieve?
Before we move, we should know what is our aim and what google says. As I said above google wants content above the fold should be shown to a user without waiting for these files to be downloaded means the aim is to reduce the waiting time, Remember the aim is to reduce waiting time, not to get a better Pagespeed score.

Remember It’s always about Improving User Experience.

Is it Possible?
Yes it is if you wish to reduce waiting time but in case if you wish to improve pagespeed score may be or may be not,depends on some factors.

Using W3 Total Cache

Fixing the issues using w3 Total Cache (we have written the settings for W3 Total Cache Plugin)

It’s not possible any more to get the exact desired result using W3, therefore we will be using other possible ways, but still you can load Javascript asynchronously using W3 total cache, that’s half of our aim.

1. Navigate to Performance (i.e, W3 total cache) > minify tab,

Now Here under the settings “JS” i.e, javascript enable “JS minify settings” and choose “Non-blocking using async” as shown in the below image, now javascript files will be loading asynchronously.

js Minify

js Minify

Using Speed Booster Pack

With the help of  W3 total cache you can only load Javascript files asynchronously but with “Speed Booster pack” you will be able to load both CSS and Javascript files asynchronously which will eliminate the error completely.

  1. Install plugin “Speed Booster Pack” from WordPress Plugin Directory.
  2. Now Navigate to Settings > Speed Booster Pack
  3. At the top in “General Option” enable the options “Move scripts to the footer” and “defer parsing of javascript files” and this will eliminate the blocking javascript files as they will now be loading asynchronously.
  4. Now move on to end of page, expand the option “Still need more speed?” and enable option “load CSS asynchronously”, this will remove the CSS part error.
  5. You are done.
Speed Booster Options

Speed Booster Options

Speed Booster Options After

Speed Booster Options After

Their is one more plugin you can use i.e, “Speed Booster Pack” Download it from Here. But remember it has not been updated from a year now still you can give it a try.

Settings for plugin:

1.Load Javascript Asynchronously: Enable
2.Detect <script> tags in wp_head: Disable
3.Detect <script> tags in wp_footer: Disable
4.Load CSS asynchronously: Enable
5.CSS loading method: Leave as it is
6.Minify CSS: Enable
7.Remove “?ver=XXX” part from URLs: Enable

You are done.

Abhijit is a Certified Digital Marketer and passion-driven creative individual based in Maharashtra (Karad). He is also Freelance Blogger, Enterprenuer and Webmaster.