[🐞] Qwik fails to prefetch leading to input delay

EamonHeffernan commented 1 year ago

Which component is affected?

Qwik Runtime

Describe the bug

I have been running into this issue since around v0.18.0 and have spent maybe 20+ hours trying to work out what has been going on.

Qwik fails to preload the Javascript which leads to an interaction delay. This only occurs on the first load. It works perfectly fine after the service worker has cached the file. I have provided a reproduction which shows the issue.

https://97710ab2.preload-3fv.pages.dev/

Reproduction

https://github.com/EamonHeffernan/qwik-prefetch-issue

Steps to reproduce

pnpm install pnpm build pnpm run deploy

Once deployed, click the green square. This will load instantly as it should. Wait for any preloading to occur, press the red button. There will be a delay as javascript is fetched from the server to display the text.

System Info

System:
    OS: Linux 5.10 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 10.02 GB / 12.42 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 19.8.1 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 9.5.1 - /usr/bin/npm
  npmPackages:
    @builder.io/qwik: ^1.1.0 => 1.1.0 
    @builder.io/qwik-city: ^1.1.0 => 1.1.0 
    undici: 5.22.0 => 5.22.0 
    vite: 4.3.5 => 4.3.5

Additional Information

No response

astraldev commented 1 year ago

Same issue here

There's a slight delay when handling on click events on buttons.

EamonHeffernan commented 1 year ago

Same issue here

There's a slight delay when handling on click events on buttons.

I often have very noticeable delays of up to a second.

NexonTreeHouse commented 1 year ago

Again have this issue, any updates?

EamonHeffernan commented 1 year ago

This still occurs in the latest version of Qwik, v1.2. I've updated the demo to the latest version https://3741894d.preload-3fv.pages.dev/

hamatoyogi commented 11 months ago

I'm not seeing this delay... Is it still reproducing for you? Video shows no delay https://github.com/BuilderIO/qwik/assets/6682981/725cbfe7-e8d6-4ea4-8a21-d1850e298747

mhevery commented 11 months ago

There will always be corner cases like this. This is why it is handled with Qwik-Insights https://qwik.builder.io/docs/labs/insights/

Not sure there is anything to do with this other than to suggest you use Qwik Insights?

intellix commented 6 months ago

In this thread there was talk about waterfalling caused by transitive dependencies not being prefetched (w00t called it a missed opportunity for optimisation): https://discord.com/channels/842438759945601056/1145076169469870120/1145076169469870120

We're using insights but we're still seeing waterfalling, even though Insights has plenty of data. I've a feeling that it's only prefetching a few symbols but not everything (even after waiting).

We're also seeing that hovering over links doesn't trigger bundles to download, but we are seeing an API call to fetch builder.io CMS data on hovering.

Right now we're just prefetching everything with this strategy and it's noticeably better for us (3 seconds to 500ms to change page):

prefetchStrategy: {
  implementation: {
    linkInsert: 'html-append',
    linkRel: 'prefetch',
    workerFetchInsert: 'no-link-support',
  },
  symbolsToPrefetch: ({ manifest }) => {
    const buildBase = extractBase(opts);
    return Object.keys(manifest.bundles).map((bundleFileName) => ({ url: `${buildBase}/${bundleFileName}`, imports: [] }));
  },
},

I'll need to get a reproduction obviously, but just wanted to say that I think it's still fishy and not quite working as intended.

We're basically testing by:

Application -> Clear site data
Right click refresh and "Empty cache and hard reload" (I'm assuming we don't need to use clear site data first, but...)
Wait a couple of seconds for Chrome to stop downloading things
Click a link in the header -> we see resources are being downloaded. The thing is, if I go to Cache Storage, I can seeeeee the files referenced, but they say 0 bytes? Not sure what's going on. "Disable cache" is not ticked

JaxCavalera commented 3 months ago

I can confirm this is still an issue in the latest version v1.5.5

I did a prod bundle build and ran preview to test how it goes vs dev (which I knew was going to load the kitchen sink for hot loading purposes), it's better, but still not where it should be. If simulating Australian mobile network speeds I see a 2+ second delay between the first click event and the corresponding action taking place when browser cache has been cleared.

My temp solution has been to add a nasty pure CSS spinner onto the Navigation menu. Till this is fixed it gives me a way to let users know something is being worked on by the server (a.k.a a waterfall of code is being downloaded .. because it was never prefetched when the page first loaded).

Hopefully a fix for this is on the way 🙏 It looks like it was working at one point in the past.

ziimakc commented 1 month ago

That's the reason I stopped using qwik, if you set Slow 4g in chrome and visit https://qwikui.com/docs/styled/checkbox/ for the first time, opening a menu will take ~3 seconds, interacting with any button or checkbox ~1 second, this is just unusable and will ruin first user impression of any website build with qwik.

QwikDev / qwik