How to Load CSS asynchronous in NextJS

[akshaymhk]

I want my global CSS file to load asynchronous, i.e without render-blocking. My page is waiting for FCP until it gets CSS loaded.
So, How can I achieve this in next js.

What I am getting :

<link rel="stylesheet" href="/_next/static/css/eb4e3a560474a24ae771.css" data-n-g="">

What is Expected :

<link rel="stylesheet" href="/_next/static/css/eb4e3a560474a24ae771.css" data-n-g="" media="all" onload="this.media='all'">

[akellbl4]

Hi @akshaymhk
I don't think async loading of CSS a great idea. Just because your browser will render HTML without CSS and when CSS has loaded a page will be rerendered again.

First of all, a user will see a broken layout (without styles).
The second thing is you will have a bad LCS score.

I can suggest revising your CSS code and try to eliminate unused CSS.

[akshaymhk]

Hi @akellbl4
Thanks for your suggestion. I will use style jsx for important page components and CSS modules for others. But I just wanted to know if it is possible to load CSS asynchronous in next.js.

[akellbl4]

Cool, interesting idea, but I still not sure how it will affect LCS.
As far as I know, it's not possible. But maybe somebody has a solution.

[akshaymhk]

Thanks @akellbl4 for your concern, but I just want to make css asynchronous and get my FCP ASAP, and I will take care of rest of the web vitals, i.e CLS and LCP. If anybody have any solution about this, then please suggest.

[childrentime]

#12984