Skip to content

Option to disable modulepreload #5120

@jpvincent

Description

@jpvincent

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
image
The vertical green bar is the moment the page is displayed. Chrome rushes on the preloaded JS files first
then request the CSS files
image

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.
image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions