Home
Support Forums

Performance Issue with Gatsby <Link> Pre-Fetching Functionality

Hi,

first. We are under time pressure and have to go online this month. It’s the only issue left.

Issue

Visiting our page takes some time for pre-fetching happens. If user navigates before pre-fetching completes, she will see a huge delay without any visual hint, that something still loads.

I filed an issue at Github Gatsby. You can read a complete description including reproduction steps here:

I’m not sure, if it has to do with Gatsby or with the Netlify Deployment. Locally, I can’t reproduce the delay.

That’s interesting, I’m seeing a very small amount of delay when trying exactly as you say. It does happen only for the first company and doesn’t happen again even if we load another company.

To be sure, you’re talking about the delay in the click and actual page load time, correct?

While I cannot be sure, it might be something to do with Netlify (but I’d like if Gatsby can confirm this too). However, the overall page load is so fast that it’s difficult to actually count that as a slow page.

Yes, the delay is only after the first page load. After prefetching completed, pages load very fast. Sometimes, I can’t reproduce the delay easily. This usually works:

  1. Clear Browser Cache
  2. Close Browser (Chrome/FF) completely. Shut it down.
  3. Wait a Minute
  4. Visit page and click “Hersteller”
  5. Quickly click a brand. If You wait too long, all pages get prefetched.

Edit: Sometimes, the delay is 5 seconds or even longer. Before we used the component even at the start page (Brands) and observed exactly the same behavior. Now we substituted the Gatsby Link componen with HTML achor tag and do not see the issue at the start page. We observe the issue at different locations, in Europe Portugal and Germany.

Another thing you can try, maybe disable JavaScript and load the page and see if you can reproduce it?

If enabling JS adds the issue, it’s definitely something Gatsby is doing.

I can confirm that both (disabling JavaScript and substituting Gatsby Link Component with HTML anchor tag) resolves the issue. But this would be a very bad work-around. Pre-Fetching is an important feature.

I have not the skills analyzing deeply this issue. All I can guess is the following:

Visiting a page like this with many links triggers pre-fetching which takes some time. Only after pre-fetching completes navigation occurs.

  1. User vist page
  2. Pre-fetching starts
  3. User clicks a link
  4. Nothing happens
  5. Pre-fetching completes and the linked page opens

It’s all I can guess.

But this scenario isn’t that strange. So I wonder why only we encounter this issue. Perhaps we miss something.

Any help would be great

Hey there, @don-esteban :wave:

Thanks for your patience here. I see you have identified the probable root of this problem and closed the issue linked above (also here). Are you still looking for Netlify support here? Let us know :slight_smile:

Status Quo

I saw some large JSON files, generated by Gatsby due to some poor designed static queries. We optimized these queries. At the moment, there is something left to optimize, but nothing crucial.

I closed the issue filed at Github/Gatsby.

Not resolved!

We still encounter unpredictable, significant freezes/delays when visiting the page. Probably it’s an issue of the CDN/Network. See attached Screenshot. 161 bytes cause a delay of 11.54 seconds?

Thanks @hillary and @hrishikesh. Yes, I would like to continue with Netlify support.

Could you specify the URL to the page that’s calling that file and the URL to the file itself?

A HAR file recording would be a bonus.

I’m afraid, I can’t :slight_smile:

I’m aware of not supplying sufficient information at the moment. It’s due to the nature of the issue. It happens only sometimes and only once. Visiting the page and surfing slowly won’t generate delays. My colleagues told me, they see similar delays only at the first visit after new deployments.

Next time, I encounter the issue, I’ll generate a HAR file. In the meantime, no action required from your side. Thanks for Your engagement!

1 Like

Thanks for the extra details there, @don-esteban. Should this issue come up again, just follow up on this thread. Thanks!