#Interactivity issues on Qwik's documentation website - which we also face (UX)

23 messages · Page 1 of 1 (latest)

cedar remnant
#

I've reported this before and was told to wait for smarter prefetching which is coming up at some point. However, I wanted to check in if things changed since last reported since I see the same issues now on Qwik's website which is worrying (I thought it was just me). The main issue is: when a button is clicked, feedback (UI changes) should almost be instant. However, in many cases in our app, a button is clicked and nothing happens for >500-1000ms. The ability to show "loading" state is limited (since Qwik has to download the code that shows the "loading" state).

We see this when we try to search for something in Qwik's documentation website. When I click on the search box I need to wait >1 sec for the search dialog to appear. The same happens when I click enter to search, nothing is shown to indicate that Qwik is loading results.

I understand there are ways to overcome this - but they're on a case-by-case basis and not intuitive - one has to dive deep into how Qwik works to minimize the impact of streaming components that should not have a delay of more than 200ms when interacted with (e.g. in a text editor, the ability to change text color.).

Are there efforts to make prefetching smarter and ways to manually select components to be prefetched easier?
Also - it seems like some components which are prefetched automatically are impacting our lighthouse score. For example, we have a Stripe payment component 2-3 pages deeper than the homepage. Yet, when running the Lighthouse test, it complains that JS code that is not used is impacting the page load speed. This also has something to do with prefetching not working optimally.

We moved our store from Angular to Qwik thinking we'd gain a lot by the fast initial pageload - but it seems like we're losing more by the unresponsive buttons in the critical purchase path.

coral falcon
#

We are experiencing the same issues. But in our case the delay is way higher, up to 20 - 40 seconds when testing in incognito.

timber terrace
spiral sluice
#

Hey Yasser, we also saw that 1s-3s delays on qwik docs site and just fixed it yesterday actually

#

could you play with the qwik docs again and see if you still see any weird delay?

#

the problem on qwik.dev was that qwik-insights wasn't running. I saw 3s delays personally. By re-enabling it, everything is basically instant again on my end again.

#

The reason qwik insights is needed here is because Qwik is so surgical about lazy-loading that it separates the code for the search modal into multiple bundles. So when you click on the search input, it lazy-executes the modal component code that was lazy-loaded and cached by the service worker, but what's inside the modal hasn't been lazy loaded because it is being dynamically rendered with a useTask, and so Qwik cannot statically know that it should have lazy-loaded those bundles too.

The solution is either a manual API for the developer to say what should be bundled together. Or it is automatically done based on real user data, and that's what qwik-insights do.

TLDR: if you're seeing delays, chances are that qwik-insights will solve that problem for you.

#

Also - it seems like some components which are prefetched automatically are impacting our lighthouse score. For example, we have a Stripe payment component 2-3 pages deeper than the homepage. Yet, when running the Lighthouse test, it complains that JS code that is not used is impacting the page load speed. This also has something to do with prefetching not working optimally.
That sounds like a different problem. Maybe add qwik-insights first, then we can try to help you out on that next problem in another help thread.

#

Last thing, are you on latest qwik version?

#

Note to self: we need to do a better job at documenting qwik-insights, explaining how useful it can be, and directing people towards it

cedar remnant
#

@spiral sluice I actually don't know much about qwik-insights and how I can effectively use it to tackle prefetching issues. Quick pointers on how to get started (a thread here on discord?) would be great.

cedar remnant
cedar remnant
spiral sluice
#

cc @unreal tulip and @lunar gull maybe?

tidal bay
#

Anyone can sign up. No need for me to do anything.

spiral sluice
#

Ah thanks

#

we need to update the docs then 😁

spiral sluice
#

you can look at how it's setup on the qwik.dev docs

lunar gull
cedar remnant
#

@spiral sluice than you! I read somewhere that we can self-host this. I'll look into that as well. I had issues with the installation before but that was a year ago which is why I abandoned it.