Fetching linked pages' resources after the First User Interaction

[RafidMuhymin]

Gatsby fetches linked pages' resources to speed up navigation between pages. It first fetches with lower priority when the Link component enters the user viewport using the Intersection Observer API. And, then it increases the priority when the user hovers over the Link component.

Gatsby does this whether the user interacts with the page or not. But won't it be better if Gatsby prefetches the resources after the First User Interaction? It'll improve the page loading experience greatly by reducing TBT, amount of requests, and load time. It'll prevent bots like GTMetrix and Lighthouse to provide (misleading) results as their bots never interact.

[herecydev]

It'll improve the page loading experience greatly by reducing TBT, amount of requests, and initial load time.

I'm not sure I follow that, if a user's first action is to click a link then you've lost the ability to prefetch that resource. That would actually dramatically impact the "responsiveness" of moving between pages.

I also don't see how using the Intersection Observer is affecting TBT or initial load time. You're just registering a handful of callbacks.

[RafidMuhymin]

That's precisely what Intersection Observer is doing, how would you do anything differently?

I'm not suggesting anyone to stop using Intersection Observer. I'm just saying to register the Observer and the onMouseOver event upon the First User Interaction. It's clear, okay?

You asked me what if the user clicks on a Link first. I said he'll notice degraded performance in that case. But it's also uncommon. In most cases, mousemove, mouseup, mousedown, click on other areas, touchup, touchdown, keyup, keydown, events will be triggered before triggering click event or pressing the enter button. So by then, the Observer API and the onMouseOver event will have started fetching.

Where are you plucking these numbers from? Are you suggesting that using Intersection Observer would take a page load from 300ms to 900ms?

From the Lighthouse reports run using GTMetrix and Web.dev. Check the attached image below.

You can see that the highlighted request is the first request from prefetching. The previous request finished at 416ms, and it started at 539ms and increased the page loading time to 1060ms.

I don't see how prefetching anything would meaningfully interfere with TBT or initial load time. It's simply a hint to the browser to get stuff prepared.

Yeah, I was wrong here. Those don't contribute to the TTB. But they contribute greatly to the loading time.

[herecydev]

The red/pink line is the load event. They clearly aren't interrupting it at all, the load event completes long before the resources are prefetched.

[RafidMuhymin]

I know that the load event was completed long before the resources were prefetched. But are you saying that the additional 600ms didn't have any impact on the Lighthouse score? And 600ms is too low. In a 3G connection, it may take more than 1.5s.

[herecydev]

But are you saying that the additional 600ms didn't have any impact on the Lighthouse score

I mean prove it yourself with a setTimeout and then prefetch something. There's no metric that I know of in lighthouse that cares after the page has rendered and is interactive.

[RafidMuhymin]

Hmm... I created a page with a lot of LInk components which generates 97 requests onload. Well, the increased loading time and this huge number of requests scored a perfect 100 in the Lighthouse test. Though the blank page just had those Links, it proves me wrong. Thank you for your patience.