Use Minified Files Output

Ummm…. If you want to attempt something like that use Autoptimize which has inline and defer built in.

Yeah, already use that.

Just trying my hand with some code with some different way of loading the deferred CSS.

I did it like this. Inlined critical CSS in the head and wrote this code in custom_functions.php

function below_the_fold() {
    echo '<!-- W3TC-include-css -->';
}
add_action( 'wp_footer', 'below_the_fold' );

W3TC moves the CSS to the footer then, hence deferring.

So the code is:

add_action('wp_head','critical_css');
function critical_css() {
    echo <<<EOT
<style>

/* Critical CSS goes below this */

...

/* Critical CSS goes above this */

</style>
EOT;
}

function below_the_fold() {
    echo '<!-- W3TC-include-css -->';
}
add_action( 'wp_footer', 'below_the_fold' );

CSS Minification of course should be enabled.

Just loading the CSS in the footer is not deferred loading. You should load it with async like autoptimize and use noscript in case the browser doesn’t support it.

Yeah I know what Autoptimize does.

It is fine to inline critical CSS and load the full CSS in footer because the browser starts painting with the inline CSS. You can see the difference with webpagespeedtest.

So this way is not render-blocking.

https://gist.github.com/scottjehl/87176715419617ae6994

Thanks Destac,

loadCSS is nice. It tricks the browser by setting media to “only x” and making it load in a non-render blocking way and then switching to to media = all after it loads.

So it obviously loads faster as it goes in the head.

Trick is to how make it work with W3TC.

There is an advantage of using Autoptimize. It loads the CSS after the DOM is ready so other files can be loaded before.

Interesting stuff!