-
-
Notifications
You must be signed in to change notification settings - Fork 7.7k
Description
Clear and concise description of the problem
Hi
The current version of Chrome is pretty aggressive with the preload and modulepreload directive : it will download the JS first, then get the CSS files. Because CSS files are blocking page rendering, the preload directive will delay rendering.
You can use webpagetest to see the effect

The vertical green bar is the moment the page is displayed. Chrome rushes on the preloaded JS files first
then request the CSS files

In this test, it needs an additional few hundred milliseconds after the last blocking CSS file to calculate the page layout and displays it. If the JS files were not preloaded, the CSS would be downloaded sooner, and so the page first paint. We use SSR, so the first paint is good enough for the user to see and we can allow the user to see the page without JS for a few seconds.
Safari iOS and Firefox behave less aggressively and will just get the CSS first and the rest later.

Suggested solution
I would need to deactivate manually the modulepreload on the JS files, at least as long as Chrome has this behaviour.
Alternative
No response
Additional context
No response
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that request the same feature to avoid creating a duplicate.