When running a Next.js (v14) site through Google Lighthouse CSS files served on my App Router always get flagged as a render-blocking resource.
When using the Page Router this isn't an issue, as Next.js preloads the CSS file - circumventing the render-blocking warning presumably.
Is it possible to configure the App Router to preload 'critical' CSS resources, similar to the Page Router?
I'd be interested to know how other developers are addressing the render-blocking issues. Is it a general consensus that if i prioritise performance (as determined by Google PageSpeed metrics), I'd be better off using the Page Router?
I came across a potential workaround by enabling server-side rendering (SSR) with styled-components. Following the Next.js guide, I was able to replace linked CSS files with style tags, thereby avoiding the render-blocking warning. However, this solution isn't perfect, particularly for larger pages. The inclusion of all CSS within the style tag can significantly increase the HTML payload, resulting in less then perfect Google Lighthouse/PageSpeed metrics