In my experience “critical styles” are necessary to load fonts efficiently if you load any, and it’s beneficial to load a few color styles at the same time. Other than that it’s better to load them as separate resources.

I’m not sure you know exactly what “critical CSS” refers to because it’s unrelated to font loading and “color styles.” It has to do with inlining the CSS required for content “above the fold” while loading the rest asynchronously.

Not necessarily just for content above the fold there is more than one way to split between critical and non-critical e.g. styles for initial page render vs those used on interaction (for a popup menu for example)

https://web.dev/extract-critical-css/

> Critical CSS is a technique that extracts the CSS for above-the-fold content in order to render content to the user as fast as possible.

You can decide to put whatever you want into the style tag, but "critical CSS" explicitly refers to above the fold.

> You can decide to put whatever you want into the style tag, but "critical CSS" explicitly refers to above the fold.

The Web Dev article might decide to define Critical CSS as about the fold but there are at least three ways of looking at Critical CSS

- Styles needed for above the fold

- Styles needed to layout a skeleton, and main content to avoid layout shifts

- Styles needed to layout the whole page

Above the fold is an arbitrary definition because it varies by device with different styles being required for different viewport sizes (at least)

The approach of scanning the rendering the page to see what styles are needed then extracting them into inline styles might work for small unchanging sites but it just doesn't scale

The only way I've seen sites maintain Critical Styles over time is to have a strong design system / patter library so they know what styles are needed to render the page and then split the styles between those needed for first render, and those needed on user interaction

> Critical extracts & inlines critical-path (above-the-fold) CSS from HTML

https://github.com/addyosmani/critical

Penthouse, the OG of Critical CSS generators

> Penthouse will return the critical CSS needed to perfectly render the above the fold content of the page

https://github.com/pocketjoso/penthouse

> Above the fold is an arbitrary definition because it varies by device

I mean, sure. But your critical path of CSS is never going to mean the whole page (unless it's a very short page). And skeleton components is objectively a completely different thing. Having definitions, even if "arbitrary," are important.