Render blocking CSS

[Mifaresss]

Link to the code that reproduces this issue

https://github.com/Mifaresss/nextjs-css-render-blocking

To Reproduce

1. Initialize new next.js app: npx create-next-app@latest (current 14.1.0v)
2. Deploy app (on Vercel, for example)

Current vs. Expected behavior

CSS should not block render, but result is: https://www.webpagetest.org/result/240224_BiDcPN_7X3/1/details/

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
Binaries:
  Node: 20.10.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.0
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next build (local), next start (local), Vercel (Deployed), Other (Deployed)

Additional context

I also add experimental optimizeCSS in next.config.mjs, but it still render blocking..

Pure nextjs app, npm run start:

[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