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

You can’t solve this issue with W3 and I don’t recommend attempting to solve it if you don’t know how to fix it. Removing render blocking CSS is a pain as you need to find the critical CSS path, inline it, and load the rest of the css files with async.

That is incredibly difficult to do and it can’t be done automatically. This issue can’t be solved with W3 the best thing to do is check your load time with Pingdom and see how quickly your website loads as this is the most important factor.

Ok, thanks, Destac. I will check with Pingdom and see how my pages rank. I appreciate your help.

You can load Google fonts asynchronously. When you use Google fonts, their site also gives a javascript link. Use that.

Also I see you are using Autoptimize, you can disable W3 Total Cache CSS minification. So you won’t have a render blocking CSS file.

Ok, thanks. To load Google fonts asynchronously, which link do I use? Do I put each link in the head section of my html code?

Something like this I’m guessing?
<link rel=”stylesheet” type=”text/css” href=”https://fonts.googleapis.com/css?family=Font+Name“>
I would put that in the head section for the specific font I use for my website, right?

Sorry, I am not that good at coding and don’t understand well, but I appreciate the help.

Depends on how you added the fonts to begin with.

If your theme has it or if you are using a plugin, it depends on their settings.

But if you are already using <link rel = …>, then you need to remove it and use something like

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Roboto:300,300italic:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

Don’t use this directly, as your choice of fonts may be different. You can obtain this code in Google’s site

https://www.google.com/fonts#UsePlace:use/Collection:Roboto

and then choosing fonts you want, variants and then clicking use and then option 3 (Javascript)