Allow async loading of minified css and js files


#1

Hello:

I loved the Breeze plugin as it needed nearly no setting for my setup. Although if you could allow async loading for compressed/combined css/js files it would be great.

This would help in loading site more faster.

Regards


#2

Hi @peeyoosh

We are glad that it improved the overall site performance and thanks for the suggestion, it has been noted. :slight_smile:


#3

I too would like to see async loading of css files with the ability to inline some CSS files in head.

Alternatively an option to have CSS deferred loading.


#4

You can do it this way in functions.php:

// Defer javascripts (except jquery.js)
if (!is_admin()) {
  function defer_parsing_of_js ( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.js' ) ) return $url;
    return "$url' defer onload='";
  }
  add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}

#5

I use WP Rocket; it has these features. They’re among the most problematic optimizations. Async loading the CSS just makes the site look terrible under every circumstance I’ve tested. Pages load unstyled, and then pop into the proper formatting later. I’d consider this a specialty feature that would be useful in rare cases.

Async loading the js works sometimes but can cause a lot of problems. I got it to work with the help of Rocket’s tech support (who are amazing). They basically went in, diagnosed the problems, and added specific files and pages to the blacklist for that feature.

Which is to say, if you’re going to have these async features, it’s probably imperative to have a way to blacklist specific files and pages, and it’s helpful to have excellent hands-on support.

Bigger picture, I think if Cloudways wants to make Breeze a hit, they should concentrate on copying everything Rocket is already doing. And then maybe they can push past Rocket, by adding controls over the different Cloudways caching layers (Redis, PHP-FPM, Memcahed, etc.), and by directly supporting server push in HTML/2.