Critical CSS

It reduces round-trips. The ultimate goal used to be (in the 2010s) to ensure the first tcp packet had everything the browser needed to render the layout without any additional round-trips. Rare to go that extreme these days, of course.

But it increases overall bandwidth, because you're adding a bunch of CSS to every page that can't be cached.

That's a terrible tradeoff.

And if a site has a single CSS file, there's only ever a CSS round-trip on the first page. There aren't any round-trips afterwards.

Well, yes, but also no. It really depends on your website. SPAs can benefit, especially ones that utilize server-side rendering, as they don't have multiple pages anyway. And not all MPAs need to optimize for multi-page navigation either; sometimes websites aren't intended to be heavily navigated, or if they are, common navigation can make use of preloads.

This technique is usually combined with preloads so the parser can identify assets that should be prefetched while the remaining packets are still being downloaded.

If your "Critical CSS" is small enough (i.e., it fit well within the client's CWND), it is very possible it doesn't increase the total number of roundtrips at all.

As a web developer, if you are optimizing for above-the-fold CSS, you are already optimizing in lots of other ways, and should be fully cognizant of the potential trades for the optimization solutions that are available to you.

I really continue to disagree. SPA's seem like the least likely to benefit of anything at all -- they often don't even have a concept of "below the fold", as they have a workspace-like environment, not a scrolling-document one. And not only is loading time generally less important for them (unlike news articles), but they're used constantly, so the CSS is almost always cached anyways.

There are lots of ways to optimize CSS. I continue to think this particular one is not a good idea under any circumstance, because it's anti-caching and eliminating a since round-trip once is just not ever going to be worth it.

Doesn't matter if you disagree, it is still an optimization tool that can be used in some circumstances.

The data is most definitely cached if the server sets the cache expiry for the HTML file, so "anti-caching" makes no sense and is completely orthogonal to the optimization.

If the page's critical CSS is small enough you can deliver an HTML page where the initial render a) happens sooner, and b) is a complete Skelton of your layout + initial content. All at the low low price of ~0 additional client-server roundtrips.

Fun fact: facebook inlines a `style` tag and all HTML necessary to render their initial loading screen. It isn't what I would call "above the fold" CSS, but it is what is referred to as "Critical CSS".

Aside: the most popular and most-used SPAs are scrollers: twitter, instagram, facebook, github, etc, so now I wonder if you might be just trolling?