> 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
