Gatsby Link has delay on click

[maxym49]

When I click the Link component I'm waiting for about 2 seconds and then I am redirected to the next page. The weird thing is that the URL is changing instantly, but the content is not. The delay between routes depends on the content - if it's a lot of HTML stuff, the site can be loaded after 2 seconds. If the content is small it's hard to judge if the delay appears.

I read this article

But it doesn't help.

As Gatsby teammate said:
"From this point forward, your application manifest will no longer grow proportionally to the number of pages in your Gatsby application." So I am not sure if I should "turn this feature on" somewhere or it's already working.

Gatsby CLI version: 2.8.29
Gatsby version: 2.19.2

gatsby-config.js

plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-offline`,
    `gatsby-plugin-smoothscroll`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-transition-link`,
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `App`,
        short_name: `App`,
        start_url: `/`,
        background_color: `#fefefe`,
        theme_color: `#fcfcfc`,
        display: `standalone`,
        icon: `src/static/svg/icons/favicon.svg`,
      },
    },
    {
      resolve: 'gatsby-plugin-web-font-loader',
      options: {
        google: {
          families: ['Montserrat:300,500,600,700,900', 'Palanquin:300,700', 'Lato:300,600,700']
        }
      }
    }
  ],

[maxym49]

What kind of information should I provide?

[danspratling]

If you have a repo to link that would be useful, otherwise a minimum reproducible product would help debugging the issue (a fresh gatsby site which only replicates the problem and nothing else).

Creating a mrp may even help you figure out what the issue is on your own.

Looking through your plugins there's no obvious issue, though i would start by looking at the page-transitions plugin as that's something which could easily block rendering if set up incorrectly.

(as a side note it may also be worth reducing the number of fonts you're loading which will also help with initial load. Google recommends 2-3 fonts - each weight counts as 1 font)

[maxym49]

I checked before if multiple fonts have any effect on the website efficiency, but the difference is very small. And it is not the cause of the link delay. I've created a minimum reproducible product and
here is the link for repo:
https://github.com/maxym49/gatsby-link-delay-problem

As you can see after you will start the project you are able to click the middle button to redirect to home page. The page transition animation will lag for about 0,5 sec in the end.

[danspratling]

It looks like your animations are working against eachother. The page transition is running and half way through running, the page loads and the animation on the /home page starts to play, which lags the transition animation.

If you remove animations and just have text on the page, there's no noticable lag.

I haven't used this library before but in a general sense, i would use the useEffect hook to check that the state has been updated and the page transition is completed before trying to run any animations on the page itself.

The transition link plugin has the TransitionState to check against to be able to do this. https://transitionlink.tylerbarnes.ca/docs/transitionstate/

[maxym49]

I've removed all animations from the home page and the problem still persists, so animations are not the main reason for the problem. The home page now has only content with images, nothing more, so it shouldn't lag.

[theweiweiway]

Hi,
I'm also experiencing this exact same issue. No animations. And it's only in nested pages.

[LekoArts]

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[maxym49]

@LekoArts I've already done it.
https://github.com/maxym49/gatsby-link-delay-problem

[danspratling]

Reverted the issue status as a min repro already exists.

[maxym49]

Is there any chance to fix this issue?

[wardpeet]

Hey @maxym49,

can you link up a url of your repro so we can have a look at that? It speeds up our testing a little bit.

Thanks!

[danspratling]

Hey everyone, the minimal reproduction is here. https://github.com/maxym49/gatsby-link-delay-problem

It has been posted before, multiple times. Please read the past comments instead of asking the author to repeatedly post the url.

[wardpeet]

That's a github url, not a live url 😉 It's easier that I do not have to clone and deploy, that's all. Every minute we can spare is great as we have a lot of ground to cover, thanks for understanding.

[maxym49]

You didn't mention the live URL, but no problem mate. Here it is:
https://gatsby-link-problem.konarskimaks.now.sh

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[maxym49]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

Up.

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[jpalmieri]

I'm getting this issue too. @maxym49, were you able to resolve this?

[maxym49]

@jpalmieri I am still waiting for this fix.

[maxym49]

Please reopen the issue, because it still exists.

[abohannon]

Also encountering this issue. When navigating from homepage to pricing page, URL update happens immediately but actual page render occurs ~3 seconds later. Site stays on homepage for these 3 seconds.

The issue isn't present when going directly to the pricing page. Because of this, I suspect it has something to do with SSR vs. Client rendering, but not 100% sure how Gatsby Link relates. I assume when a route change happens via Gatsby Link / Reach Router, the SSR page isn't served?

When replacing nav links with regular tags, the problem disappears. @maxym49 not that this is a solution, but have you tried this to see if it fixes your issue?

[maxym49]

@abohannon Thanks for your advice, it worked, but as you mentioned before this is not the solution that we are expecting from Gatbsy.

[Ir1d]

Hi, we're getting the same issue with latest release of gatsby

repo: https://github.com/OI-wiki/gatsby-oi-wiki
demo: https://ng.oi-wiki.org/
another demo: https://stale-while-revalidate-oi-wiki.surge.sh/
best reproduction:

1. visit https://ng.oi-wiki.org/math/poly/intro/
2. click “快速傅里叶变换”, the third link under the gray button in the sidebar.
   It should direct you to this page: https://ng.oi-wiki.org/math/poly/fft/

And the problem here is that the page is stuck for a while before it finishes loading data (I guess, because the /math/ploy/fft page is very large and it's good at reproducing this)

Also, from my observation, it's different from the symptom here: https://www.gatsbyjs.org/blog/2019-06-12-performance-improvements-for-large-sites/#symptoms

@danspratling @wardpeet Could you please kindly take a look 👀

P.S, In our case the links in sidebar are MuiLink from material-ui, not Gatsby Link 🤔 Also tried switching from MuiLink to <a>, didn't work

[Ir1d]

[update]: we've found that the delay is actually caused by the lags in re-rendering the page. The first screen has SSR so its fast enough, but following route changes are provided by client side render.

Our fix: https://github.com/OI-wiki/gatsby-oi-wiki/pull/192/files

[dellwatson]

@LekoArts @wardpeet hello, i've also encounter this issue, when navigating have delay for first time open, imnot sure why, my images haven't been compressed but i think it's related to the gatsby link

demo: https://7starscustom.id
when i tried to click the button star-gold/silver-gold from index page it has delay, and continously do that when doing deep navigation.

also just some info, I did bring some states from the index page, i hope it's not related to this.

[abohannon]

[update]: we've found that the delay is actually caused by the lags in re-rendering the page. The first screen has SSR so its fast enough, but following route changes are provided by client side render.

Our fix: https://github.com/OI-wiki/gatsby-oi-wiki/pull/192/files

@Ir1d that's awesome you figured out a solution. Looking at your PR I'm a little confused why this works, though? I'm attempting to implement in my own project with no luck. Seems all you did was memoize the nav links? Any additional explanation would be appreciated!

[Ir1d]

@abohannon Along with memorizing the NavTabs component and delaying mathjax, we changed the implementation (keyword of material-ui) of a larger Drawer component from css to js, so it only renders once instead of twice.

The key reason of this delay is that the page takes a lot of time to render, I think you should dig into your components and find out which takes too much time.

[polarathene]

You didn't mention the live URL, but no problem mate. Here it is:
https://gatsby-link-problem.konarskimaks.now.sh

@maxym49 I clicked the "App Machines" link to the pricing page, saw a transition animation and no noticeable lag issues.

demo: https://7starscustom.id

@dellwatson Same case here, I clicked the buttons you mentioned and had no notable delay issues. First click was around 1 second, subsequent visits were instant.

---

I'm happy to re-open the issue if I could reproduce the error being discussed here. Perhaps it's related to your environments? I have tested only on Chrome dev v84, on Linux(Manjaro KDE) from a desktop machine built in 2016(4/4 core/threads Intel i5-6500, 32GB RAM, SSD), and an internet connection that manages 10Mbps down(about 1MB/sec).

Perhaps it could be a browser issue, subsequent visits should be cached and not show the delay, so as that's apparently not happening for you both, network speed probably isn't an issue, and I'd assume you have devices with similar hardware specs(or better) to test on that confirm it's not that if you can still reproduce it.

What browsers have you experienced the issue on? What devices were tested?

[dellwatson]

@polarathene hello yes, for the subsequent visits would be no problem, because it is cached, but for the first encounter (or private browser), it had long delay. I kinda worried, because the page is already painted, the button already showed but when it is clicked, it has delay for almost 2-5secs. and i have no idea how to tell the users if it's on loading (at least giving spin?)

so If I tried to click all the navs tab repeatedly, after the delay, the website will have uncontrollable navigation and keep moving based on the delayed click. The behaviour is totally different with Gatsby-kaldi template, even if I clicked repeatedly, it wouldnt do a leap of navigation.

imnot sure if my firebase script is the culprit,
heres my repo but there's alot of sensitive data i placed on env, so you might only can take a look of code instead reproduce https://github.com/dellwatson/gatsby-7stars

I tried em in safari + gchrome in macbookpro 2018 with :)

[polarathene]

@dellwatson I tried again with network dev tools cache disabled and slow 3G as throttle. The links are still loading relatively fast for me on that rate. I immediately see two placeholder images under featured products, and each of those load in 1-2 secs, total transfer of 47KB, only 3 requests involved.

I think I need better steps to reproduce, would be interesting if others are also using macOS. As you're only concerned about the first load, how long is the network taking for you on your connection?

A difference between us might be your mac using a high DPI display? I've only got 1080p, 2 seconds was spent from request to first byte (TTFB) on slow 3G, only 77ms unthrottled, everything done in 200ms. Your higher resolution can request bigger images, but I would doubt that to cause that much more of a slow down, unless you're on 3G speeds?

[dellwatson]

@polarathene hmmph I see, i have normal connection 7mbps.

well if u says its fine then i will investigate more first on diffrent platform, previously on my iphone was also slow but it seems okay now. that's why i thought it was the website's problem instead of device's problem.

thankyou for your effort

[hari5004]

@maxym49 @dellwatson Have you found out any solutions? I am facing the same issue

[rahulsuresh-git]

Facing the same issue.

[saadnoor]

facing same issue

[polarathene]

Provide reproductions as requested, otherwise no action can be done.

[chinmayhem]

The client-side navigation doesn't happen until the entire data for the page is loaded.

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/navigation.js#L84

When there's a delay of more than 1 second, an event is fired

    emitter.emit(`onDelayedLoadPageResources`, { pathname })

This event can be used to show feedback to the user.

Solution:
To make it easy. there's a gatsby-plugin that handles it. https://www.gatsbyjs.com/plugins/gatsby-plugin-nprogress/

[rahulsuresh-git]

Awesome, that actually made sense.
At least the user can see something now instead of just staying on the same page.

Thanks @chicho17 👏🏻

[dpw1]

I'm still dealing with the same issue.

https://www.gatsbyjs.com/plugins/gatsby-plugin-nprogress , as suggested by @chicho17 , is a potentially viable solution but in my case it's taking too long to show the loading icon.

I was unable to find a way to control the delay to show the loader in the plugin options.

[GlebDolzhikov]

issue still presented

[timonmasberg]

Same for me, this is such a dealbreaker.

[ansmlc]

This issue just suddenly appeared for me after upgrading to Gatsby 4.7 from 4.1.
After that, I proceeded to upgrade to latest 4.10 and the issue persists.

[mmaazm]

This issue is still persistent in Gatsby 4.7.2, I am not sure what seems to be the problem.

[riefer02]

Noticed a strange behavior in my local dev environment. Links were non-responsive unless I doubled clicked fortissimo.

Not sure if this is helpful, but I deleted the .cache and the public folder, and re-ran gatsby develop, and it seemed to resolve the link delay/non-responsiveness.

[MS3300studios]

I am having the same issue on my gatsby page. When I click the link from the landing page, I have to wait for 5 and sometimes up to 10 seconds for the page to open. If I however click to open the link in a new tab, the page is loaded instantly. This issue is still present, I don't understand why this ticket is closed.
Can anyone help with how to fix the behaviour? I tried disabling javascript on my browser and that helped me, but this isn't the solution as we rely on javascript in other parts of our browser.
Does anyone know the fix to this problem?