How to Fix Eliminate render-blocking JavaScript and CSS in above-the-fold content 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 Eliminating blocking CSS and Javascript 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 the content above the fold should be shown to the user as soon as a user lands on a page without waiting for these files to be downloaded and for this Google recommends that you should Inline the 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. So,What is the solution? 1.Do what Google says,Inline theimportant 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 that the 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 time before a user sees the content of the page,Remember the aim is to reduce the waiting time not to get a better Pagespeed score. Is it Possible? Yes it is if you wish to reduce the time but in case if you wish to improve the pagespeed score may be or may be not,depends on some factors.

Removing render-blocking JavaScript and CSS

Fixing the issues using w3 Total Cache (we have written the settings for W3 Total Cache) 1.First run the Pagespeed and get all the URLs that are causing the issue and get the URLs it shows,we need them. Eliminate render-blocking JavaScript and CSS in above-the-fold content2.Now open Performance tab(i.e, W3 total cache settings) and navigate to Genereal Settings and Minify settings tab. 3.Now Enable the option minify and choose the option “Manual” in Minify Mode and other settings in the section should be like:

  • Minify Cache Method – Disk
  • HTML Minifier – Default
  • JS Minifier – JSMin
  • CSS Minifier – Default

Save the settings. 4.Now open the minify tab(in W3 Total cache from the sidebar)  and move to the section “JS” and set the settings as given below:

  • JS Minify settings: Enable
  • Operations in Area for before Minify and Non-Blocking using “async” in embed type.

Now you will see an option “JS File Management” choose the theme you are using and click on “Add a script” and enter the URLs of those Javascript files you got in the first step during Google Page speed test,you may use the “Verify URL” to check if you have entered the right URL and the Embed Location option should be “Embed in Head” and “All Templates” for template section. So,Now the section will be something like this: Eliminate render-blocking JavaScript and CSS in above-the-fold content5.Now on the same Page “Minify”,move to the section CSS and enable the CSS Minify settings and choose the theme you are using and Enter the URL of CSS stylesheet you got during the first step and now the section will be something like this. Eliminate render-blocking JavaScript and CSS in above-the-fold content Now run the test again on Google Page speed and here is the result. Eliminate render-blocking JavaScript and CSS in above-the-fold content If you are not using W3 Total Cache,you may use the Plugin “Async JS and CSS settings” Download it from Here. Settings for the plugin: 1.Load Javascript Asynchronously: Enable 2.Detect