Css bundles are not preloaded

[jweb89]

Qwik Version

0.13.3

Operating System (or Browser)

browser

Node Version (if applicable)

16

Which component is affected?

Qwik Rollup / Vite plugin

Expected Behaviour

Qwik should preload css bundles. Currently it does not preload them

Current head tag for css:

<link rel="stylesheet" href="/build/q-ee850e53.css">

Actual Behaviour

Should preload the css bundles as they are render blocking and can cause CLS issues if not preloaded

<link rel="preload" href="/build/q-47ef043c.css" as="style">
<link rel="stylesheet" href="/build/q-47ef043c.css">

Additional Information

No response

[manucorporat]

Adding a new <link> next to each other, will not change anything, i am not sure i understand the issue

[nnelgxorz]

I think the preloading of non-critical css is the issue? https://web.dev/preload-critical-assets/#preloading-css-files

But, adding a preload link next to regular link wouldn't have much of an effect.

It would be interesting to do preload for css that is not immediately visible on the page. But that's probably a whole other issue.

If the css is critical to the page load I would just inline it directly into the document.

[jweb89]

The only reason I noticed this was because I was running some pagespeed audits on our qwik page against our Next JS page and it was saying to preload css since it is render blocking and Next JS does the preload. @manucorporat What you're saying makes sense though, it doesn't seem like there would be any difference if they're back to back since preload is meant for things not found early in the document.

However, it seems surprising Next JS would do it if there wasn't any additional benefit?

[manucorporat]

it's surprising... only reason i can think of is that nextjs does it to "look" faster for lighthouse test, but no real difference happens :( hate to be in the business of cheating to look faster...

Keeping this issue open to see if what strategy we can better do...