Reduce TTI by one waterfall by inlining the preloader plus a smaller chunk of the bundle-graph

[maiieul]

What is it about?

No response

What's the motivation for this proposal?

Problems you are trying to solve:

• Qwik apps currently have a delta of ~4-6s between LCP and TTI on 3G throttling, even with Insights.
• There is always one waterfall to load the preloader and bundle-graph before anything else.
• The bundle-graph can get very large in size.

Goals you are trying to achieve:

• Make the delta be ~2s.
• Make the bundle-graph less heavy.
• Inline qwikloader, preloader, and bundle-graph part of the interacted code to reduce waterfalls to zero.

---

Proposed Solution / Feature

What do you propose?

We could chunk the bundle-graph into route-graph(s), loading the current route first and then the future ones based on <Link prefetch>.

Links / References

No response

[wmertens]

so we already have "preloader-lite" by emitting modulepreload links for the current page, can't we make it embed more links maybe?

[maiieul]

Hmmm maybe that could do the trick for the waterfalls yes. We need to make sure that the bundles are also in the most probable order in there too.

[maiieul]

From discussion with @wmertens on Discord:

I think we should make inlined: true be the default again.

1. We need people to be able to play with their apps internally and immediately see the speed gains without having to think about cached vs not-cached.

2. There are too few cases where inlining actually hurts LCP.

For inline to really hurt LCP in a noticeable way it requires all of:
• no font blocking
• no image LCP
• fully inlined CSS
• slow network

Only then can 5-10kb of scripts in add noticeable 100s of ms to LCP.

This is probably less than 1% of cases.

For example at 50KB/s (typical 3G) 10kb takes 200ms to load, which is quite likely less than the latency for another round-trip for fonts/images/css.