> 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
> 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.
I didn't mention skeleton components, I said 'lay out a skeleton and main content'
I'm well aware of Addy and Jonas' work…
In my experience trying to just extract and maintain ATF styles is impractical at scale as there 1,000s of viewport sizes, and large sites often have 10,000 pages – I've seen many a team try it and abandon it for something more realistic
I've used a broad definition of Critical CSS for a long time and will continue to do so as the narrow definition is impractical at scale IMV
> 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.