No CSS loading in background

Hi superpoincare!

The async loading of the CSS from the header-position causes an extra factor to trigger the “Eliminate render-blocking JavaScript and CSS in above-the-fold content” warning.

I have included an option to choose the position in the latest update.

Best Regards,
Jan Jaap

Thanks Jan.

I think your latest has a small bug. I cannot deselect “Localize Javascript”. That is even if I deselect and save, the refreshed page shows it as selected.

Jan,

About your point on PageSpeed. It doesn’t matter since RequestAnimationFrame doesn’t block render. However your code uses modified loadCSS as a fallback for old browsers, so their render will be blocked. Anyway doesn’t matter since PageSpeed tests use modern browsers and also less people use old browsers, so one can choose to fire the CSS in the head.

Jan,

Think you have a bug. When I choose the option to include it in the head, IE8 throws up an error saying object expected. It happens because it doesn’t support RAF and hence uses the other part of the code which runs into the jquery/ready part.

Btw, you can rely on loadCSS completely.

This video by Google recommends it. https://www.youtube.com/watch?v=d5_6yHixpsQ

(Or you can give an option to use loadCSS and/or raf.

I realize now that your combination of loadCSS and raf is wonderful. Better than both.

Anyway, the problem remains for IE oldies. I fixed it by conditionally loading jquery on top for old IEs and it goes away.

Dear Superpoincare,

Thanks a lot for the valuable suggestions. I have fixed the bugs and implemented the suggestions in v2.3.3.

Best Regards,
Jan Jaap

Hi Jan,

Great. No error in IE8.

I am still figuring why you have two options for loading CSS async, but won’t be hard to figure.

On the issue of W3TC minification turned on, I still see it loading the CSS on top (render-blocking) with with the theme CSS files loading async. .

I have figured how to make W3TC load CSS async. This can be done by keep CSS minification on in manual mode and then modifying the file

wp-content/plugins/w3-total-cache/lib/W3/Plugin/Minify.php

with (original code commented):

/* return "<link rel=\"stylesheet\" type=\"text/css\" href=\"" . str_replace('&', '&', $url) . "\" media=\"all\" />\r\n"; */
            return <<<EOT
<script id="loadcss">
function loadCSS(e,n,o,t){"use strict";var d=window.document.createElement("link"),i=n||window.document.getElementsByTagName("script")[0],r=window.document.styleSheets;return d.rel="stylesheet",d.href=e,d.media="only x",t&&(d.onload=t),i.parentNode.insertBefore(d,i),d.onloadcssdefined=function(e){for(var n,o=0;o<r.length;o++)r[o].href&&r[o].href===d.href&&(n=!0);n?e():setTimeout(function(){d.onloadcssdefined(e)})},d.onloadcssdefined(function(){d.media=o||"all"}),d}
</script>
<script>
loadCSS( "$url", document.getElementById("loadcss") )
</script>
EOT;

This is without using your plugin. However it is risky, so handling it with your plugin is much better. Just throwing some ideas. IMO, using your plugin +W3TC should be enough. Just that I can’t seem to use the W3TC minify output with your plugin in the current production.

Thanks. Wonderful plugin.