Render blocking CSS about next.js

[mwskwong]

In this case, it makes more sense for them to be blocking. Or else we will be seeing FOUC.
More on this topic: https://web.dev/articles/critical-rendering-path/render-blocking-css

[philwolstenholme]

CSS is by render blocking in any framework unless you lazyload it, which brings it's own problems around FOUC as mentioned above. You're generally better off focusing on other performance issues and making sure you ship as little CSS as possible.

[Mifaresss]

I understood, thanks. But still, how can I ensure that they do not block rendering? Maybe some plugin which extract all critical css and put it in <style> tag in head or add preload attribute?

[philwolstenholme]

It's generally not worth worrying about, have a read of https://csswizardry.com/2022/09/critical-css-not-so-fast.

It's really hard to do critical CSS correctly, especially with dynamic content (e.g. content from a CMS) or with streaming content like Next and modern React uses. Old Next supported an experimental version of critical CSS inlining, but the app router in Next 13+ doesn't support it because it's incompatible with streaming.

[philwolstenholme]

#59989 has some more information on this by the way, you might want to follow that discussion instead of this issue :)

[Mifaresss]

Thanks! It’s probably better to close this issue then?