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 criticalcss.com’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!

10 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,
    Harry

    Reply
    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!

      Reply
    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 :)

      Reply
  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?

    Reply
  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).

    Reply
  4. Con

    Hey Frank,

    I’ve been using your latest beta for a while and it’s been great. That option to disable optimization for logged-in users has proven to be super useful ;)

    However, I noticed on a website today that when I enabled inline & defer option, the concatenated CSS file would not load at all. It doesn’t appear in the network tab of dev tools.

    The site is hosted on 1and1. Also, in that site using the CSS deferring option of ‘Above the fold optimization’ plugin produces the same result: The concatenated CSS file is not loaded at all, if that helps.

    Let me know if you want more details on the issue.

    Cheers,
    Con

    Reply
    1. Con

      PS: This happens on Firefox but not on Opera! Also, a Pingdom test reveals that it doesn’t load the autoptimized CSS file. Really weird!

      Reply

Leave a Reply

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