[lxe]

This is a footgun. You'll get a very consistent flash of unstyled content. It's not just an aesthetics issue -- when layout shifts in the middle of a page load, as your "non-critical" styles are applied, and user is interacting with something, it will kill your usability.

[stevenpotts]

Yeap, I had to change some styles after applying this but managed to get CLS to 0 for the websites, I know this isn't useful for everyone but it was really useful for me as I have been using templates for clients with limited budgets that have tons of libraries, I'm sure there are other use cases where this is useful

[zaphodias]

isn't the whole point avoiding FOUC, while also avoiding to block the rendering for CSS network requests?

[lxe]

Unless you're sure that your the "non-critical" css doesn't cause layout shifts (aka, it doesn't overload any "critical" styles), you're gonna see layout shifts even on fast connections if you load some styles at the top of the document and then do a link rel at the bottom.

[rtsil]

The critical css should cover everything above the fold to avoid that visible reflow.

[youngtaff]

Where’s the fold in a world of 000’s of viewports?

[lxe]

Then what does the "non-critical" css do?

[bawolff]

The non-critical things?

I mean, i agree with you that this is insanely easy to screw up. However in most websites there is obviously css which doesn't cause reflows and is not needed for first paint. Actually separating that out correctly seems easy to mess up, but it obviously exists.