Bug: link order been messed up after upgrade to next version about react

[lili21]

the link order is important cause we want to preload some critical image to decrease the LCP time

[lili21]

downgrade the version to 18.2.0, and the order is expected.

[SamarthBagga]

Hi @lili21 , i am new to open source could i get a chance to work on this issue?

[gaearon]

When you say "messed up" do you mean some tags or missing? Or can you be more specific?

[lili21]

the order of links is not expected.

[lili21]

those <link rel=modulepreload /> tags have been moved into head, which should be in body.

[lili21]

it's hurting our performance. you can check the similar problem with vitejs/vite#5120.

after upgrade to react@canary version, we see the same effect in production, the FCP increase about 1s. because all the <link rel=modulepreload /> have been moved into head.

[rossipedia]

@gaearon <link rel="modulepreload" /> tags are being moved to before <link rel="stylesheet" /> tags. Since stylesheets are blocking, if you have a decent amount of modulepreloads then you end up delaying the initial render by however long it takes the browser to free up a network connection to fetch the stylesheet due to all the in-flight preloads.

I think modulepreloads should ideally be moved to after the last stylesheet link tag, which would let the browser fetch the blocking CSS as fast as possible before attempting to preload any JS modules, which can occur asynchronously and won't block the initial paint.