Autoptimize CSS defer switching to loadCSS (soon)

Historically Autoptimize used its own JS-implementation to defer the loading of the main CSS, hooking into the domContentLoaded event and this has worked fine. I knew about Filament Group’s loadCSS, but saw no urgent reason to implement it as I saw no big advantages vs. my homegrown solution. That changed when’s Jonas contacted me, pointing out that the best way to load CSS is now using the rel="preload" approach, which as of loadCSS 1.3 is also the way loadCSS works;

<link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.rel='stylesheet'">

As rel="preload" currently is only supported by Chrome & Opera (both Blink-based), a JS polyfill is needed for other browsers which uses loadCSS to load the CSS. Hopefully other browsers catch up on rel="preload" because it is a very elegant solution which allows the CSS to load sooner then with the old code while still being non-render blocking. What more could one which for (“Unicorns” my 10yo daughter might say, but what does she know)?

Anyways; I have integrated this new approach in a separate branch on GitHub, you can download the zip-file here to test this and all the other fixes and improvements since 2.1.0. Let me know what you think. Happy preloading!

7 thoughts on “Autoptimize CSS defer switching to loadCSS (soon)

  1. Harry Milatz

    Hi Frank,

    the new version breaks my site(posts and pages): navigation, footer and sidebar.
    If you want some information in detail, so let me know.
    Hope you get enough information from the “testers”:)

    Best regards,

    1. frank Post author

      I would be very interested in more details Harry, feel free to add them in a comment or to mail me at futtta-at-gmail-dot-com!

    2. frank Post author

      Quick follow-up; the problem turned out to be with extra optimizing which stripped away the single quotes inside the onload-tag, breaking the JS. undoing part of the extra optimizing fixed this and the preloaded deferred CSS is now running fine on Harry’s site :)

  2. Gregor

    I am using your filter autoptimize_html_after_minify to get the names of all css and js files with the following regexp:
    $regexp = ‘#(src|href)=”([^”]+\.(js|css)(\?[^”]+)?)”#’;
    (it is for your support forum to implement poor-man http2- push.

    Will it still catch all CSS files after the change?

  3. frank Post author

    fyi; the branch has now been merged in MASTER, download if you want to test this (and a whole slew of other improvements).


Leave a Reply

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