Option to be able to exclude preloads being injected into HTML

[spacedawwwg]

Description

Preloading everything (JS, CSS, Image assets) is bad for performance. It would be nice to have an option to prevent these being injected into the HTML, either as global toggle or on a file extension/mim-type basis.

We are currently doing this as a "post-build" task on statically generated pages, but this is not suitable for pages generated via SSR.

[brillout]

You'll be able to do that with #419 (comment).

Also, we should adjust vps's default behavior: what assets does vps currently preload that you think shouldn't?

[spacedawwwg]

You'll be able to do that with #419 (comment).

Also, we should adjust vps's default behavior: what assets does vps currently preload that you think shouldn't?

I don't think images should be preloaded at all (you can use attributes like loading and fetchpriority to achieve this). I'd say CSS shouldn't be preloaded either, devs can use other methods to load critical CSS.

preloading JS seems to be Vite's default, but I disagree with that too, I think any preload should be opt-in, not opt-out vitejs/vite#3133

[brillout]

Why do you believe that? Happy to change my mind and with it vps's defaults.

[spacedawwwg]

I suppose I'm looking at this from a website perspective over an 'app' perspective.

The fact that HTML is pre-rendered, the hydration is secondary and shouldn't block the page load.. especially if people are using lazy load strategies for some modules (e.g. using intersection observer)

https://www.debugbear.com/blog/rel-preload-problems

[spacedawwwg]

I suppose the modulepreload's would be the only thing I'd consider keeping personally… but even then, as per my lazy-load reasoning, I'd have to run tests to see if preloading all the scripts upfront is less performant than just letting the modules do their round trips 🤔

[brillout]

If the preload links are included at the end of the HTML, then I believe the initial render is not blocked by them.

That's why, so far, I think the current default is correct.

[brillout]

https://vite-plugin-ssr.com/preload

Released in 0.4.52.

With that release, only font preload and modulepreload are injected by default. The rest is opt-in.

In case your company is up for it: https://github.com/sponsors/brillout.