Critical Rendering Path: Inlining JS / CSS

[LukasBombach]

Hey there!

According to best practices of performance on the web you will need some inline JavaScript and / or inline CSS at the top of your page to achieve a critical rendering path.

I was looking for mechanisms or best practices to inline JS / CSS (at the top of your page) in next.js to conform that pattern, but I could not find any.

So I am not sure if there has already been done some work on this or if there are paradigms or common practices for the critical rendering path, esp. inline (critical) JS / CSS so I'd like to start this discussion here.

[Sangdt]

idk about inline js but for css you can check this out this issue, it might not work for the latest nextjs version.

[LukasBombach]

Hey everyone,

so we have tried to tackle this issue ourselves and this is what we've come up with:

https://github.com/stroeer/next-critical