I'm using W3 Total Cache to minify about 15 CSS files, and also to minify 20 JS files and load those asynchronously in the footer. Running my site through PageSpeed gives me the following message:

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

What I'm wondering is, how can I load this CSS file asynchronously with W3 Total Cache? The plugin doesn't give me the option to load CSS asynchronously. You can see how things are loaded on my site here.

  • I also searched about this in past and if I remember correctly (i could be wrong too, since it was way ago), then I think what I found is, to split CSS and JS files so that you should load ATF styles & scripts first and other CSS/JS later. Which I think is not practical as well as will increase HTTP requests. Also if you are minifing & combining them then you cannot do anything about it. So I stopped worrying about it. What you can do is install google page speed on your server. Lots of developers were suggesting that.
    – Robert hue
    Oct 31 '14 at 4:54

Have much to say about both W3TC and pagespeed, but will try to stay on the point.

You should never have a JS external element in you HTML as part of the actual content, they should be either in the head element (but only scripts that must be loaded before the page finishes loading) or just before the end of the body.

CSS should be only in the head element.

The assumption is that if you decided to violate those basic performance rules you probably had a very good reason for that, and no plugin with a sane author will try to rearrange it for you as you can easily break the page if things are not being loaded in the right order.

So you need to understand first why do you have JS and/or CSS at that part of the page, and if it is not needed then you need to change your code to move them to the header or footer. Caching plugins have totally nothing to do with it and should stay away from even offering page changing functionality like that.

  • CSS is already at the head, then the question is how do I load it asychronously?
    – eclipsis
    Oct 31 '14 at 5:32
  • @eclipsis, what do you mean when you say "asynchronically"? CSS is always loaded asynchronously, you don't need to do anything for that. Only JS is loaded synchronously. Oct 31 '14 at 7:02
  • My mistake, I meant to say defer it. I have the critical path CSS inlined, I just need to know how to defer loading of the large CSS file I have. @Mark Kaplun
    – eclipsis
    Oct 31 '14 at 15:09
  • 1
    @eclipsis, no, the whole point is that all CSS should be load before <body>. I am not sure if and how you can defer it, but it will be the totally wrong thing to do. Oct 31 '14 at 16:28
  • Then how do I appease PageSpeed's request to prioritize Above the Fold Content?
    – eclipsis
    Oct 31 '14 at 16:29

Not the answer you're looking for? Browse other questions tagged or ask your own question.