Why Autoptimize doesn’t touch non-local CSS/JS

Earlier today I got this question on the wordpress.org support forum for Autoptimize;

Will there be Google fonts support in the future? I now include the google font’s like this:

wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,700,600|Varela+Round' );

Is it possible to add this css to the combined and minified by this plugin file?

The basic question if Autoptimize can aggregate external resources has been asked before and I felt it was time to dig in.

I did a little test, requesting the same Google Font CSS, changing browser user agents. For my good ole Firefox on Ubuntu Linux I got (snippet);

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

Whereas the exact same request with an MSIE7 useragent gives (again, extract);

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);
}

It’s not surprising Google has specific CSS based on browser useragent (probably browser-version), but this is a simple example of how dynamic remote CSS or JS can be (the scala of variables that could lead to 3rd parties serving up different CSS/JS is huge, really).

So although theoretically it would be possible to have AO cache remote JS/CSS (such as Google Font’s) and include it in the aggregated CSS- or JS-file (and that way removing render blocking resources), the problem is that AO will never be able to apply whatever logic the 3rd party applies when getting requests. Hence the design decision (made by the original developer, Turl, a long long time ago) not to aggregate & minify external resources. This is how it should be.

4 thoughts on “Why Autoptimize doesn’t touch non-local CSS/JS

  1. Celso Bessa

    We’ve been tackling cases like this.

    We dequeue the theme’s fonts stylesheet and then selectively add only the need fonts using Google Font Loader javascript (the one you find on Google Fonts website). This way, AO gets the script, minifies it and concatenates. Thus, making the font loading assyncronous.

    For those worrying about FOUT (Flash of Unstyled Text): if the website is optimize, FOUT happens really fast and is not a real concern.

    Maybe this logic could be implemented on AO in the future?

    Reply
  2. Gero

    Hi,

    why not include external CSS in your defered CSS loading script (and noscript at top)? This way you won’t mess with the actuall css but still defer load the file.

    This basically is what Celso propses but without the need of yet another script being loaded.

    regards!

    Reply
  3. frank Post author

    Hi Gero;
    Deferring CSS will inevitably lead to content being shown unstyled for somewhere between 100ms and 3s, which is something to be avoided really.

    frank

    Reply
    1. photokullinar

      Hi Frank.

      I agree with Gero. I really need to defer css from some 3rd plugins. This styles placed in header and make too many requests. They are no need for site rendering and do search e.t.c. I want to place it to footer for better TTFB (Time to First Byte).

      Regards.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *