defer autoptimized css file

well, both should no longer be render-blocking, as they are now “preloaded” (rel=”preload” iso rel=”stylesheet”), isn’t that the case?

frank

i checked the source code :

<link rel="stylesheet" id="tf-compiled-options-flux-settings-css" href="https://mywebsite.com/wp-content/cache/autoptimize/css/autoptimize_single_b978d06ae3d0b13fa741a43561478b9b.css" type="text/css" media="all">

Hmm, that might be one of the edge-cases where AO 2.4 failed to switch to preload, can you try with 2.5 beta, that _should_ fix it?

I have same problem. Tried installing 2.5 beta, but still same –
Defer and inline is working, but I get rel=”stylesheet” not “preload” on my autoptimize css.

In case it helps… Site Ground (with SG optimizer switched off), Astra Theme, Beaver Builder.

Ben

can you share your site’s URL Ben?

Sorry for slow reply – https://www.getsifta.com/ (This is just a test site, so happy to enable / disable anything to help troubleshoot)

The linked CSS is not deferred because there is no matching critical CSS rule, so the aggregated CSS is inlined and the excluded CSS is not deferred. You can work around that by adding default critical CSS in the “critical CSS”-tab @beningen.

hope this helps,
frank

Thanks – I tried what you suggested, but still not working.

I have noticed something else though… If I check Dev tools > network > Response – then initial response includes rel=”preload” but dev tools > inspect shows rel=”stylesheet”.

I think this means it is being rewritten by something (?)

your HTML source code is correct now, example:

<link rel="preload" as="style" media="all" href="https://www.getsifta.com/wp-content/cache/autoptimize/css/autoptimize_318928363d4f5d90cf95568efed9b64e.css" onload="this.onload=null;this.rel='stylesheet'" />

or

<link rel='preload' as='style' onload="this.onload=null;this.rel='stylesheet'" id='dashicons-css'  href='https://www.getsifta.com/wp-includes/css/dashicons.min.css?ver=5.1.1' type='text/css' media='all' />

(never mind the <link rel="stylesheet" between <noscript> tags, those don’t apply)

I think this means it is being rewritten by something (?)

it’s supposed to, by virtue of the onload handler;

onload="this.onload=null;this.rel='stylesheet'

hope this clarifies,
frank

Thanks Frank! Now I just need to work out why my rule is not matching. I’ll start a different thread if I cannot figure it out.

hey, how did you solve the problem?

in beningen’s case the did not have a matching rule for the homepage, as a result of which all aggregated CSS was inlined, which does not trigger the preload/ defer action on linked CSS. adding a default (fallback) rule fixed that.