Critical CSS

I also see that this brings in CSS variable definitions (sorry, ~custom properties~) and things like that. Since critical CSS's size matters so much, it might be worth giving an option to compile all of that down.

> Place your original non-critical CSS <link> tags just before the closing </body> tag

I don't recommend doing this: you still want the CSS downloaded urgently, critical CSS is a façade. Moving to the end of body means the good stuff is discovered late, and thus downloaded late (and will block render if the preloader[0] discovers it).

These days I'd recommend:

    <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">

    <noscript><link rel="stylesheet" href="styles.css"></noscript>

When the stylesheet loads and is applied to the CSSOM it’s going to trigger layout and style calculations for the elements it’s applied to maybe even the whole page

Browsers are pretty eager at fetching stylesheets even those at the bottom of the page

> Browsers are pretty eager at fetching stylesheets even those at the bottom of the page

Browsers begin fetching resources as they discover them. For a big enough document, that will mean low placed resources will suffer.

The whole philosophy of critical styles philosophy being those about the fold is a mistake in my view

Far better to adopt approaches like those recommended by Andy Bell that dramatically reduces stylesheet size

And do critical styles “correctly” i.e. load those that are needed to render the initial page and load the ones that rely on interactions separately