General Sluggishness
Answered
Spectacled bear posted this in #help-forum
Spectacled bearOP
Hi! I'm working on my first nextjs project, used to use vite before.
My site is a landing page, simple single paged, no heavy libraries, no problems with rerendering either
But for some reason, it feels very sluggish, scrolling doesnt feel smooth and switching between tabs takes perceptible time
never faced this with vite, can anyone point me in the general direction of what beginner mistakes I could be making? thank you
(I have all css moduled since i barely have any shared css if that could be a factor)
All the client side rendering is at the leaf nodes, and used very minimally (even though that shouldn't be an issue)
My site is a landing page, simple single paged, no heavy libraries, no problems with rerendering either
But for some reason, it feels very sluggish, scrolling doesnt feel smooth and switching between tabs takes perceptible time
never faced this with vite, can anyone point me in the general direction of what beginner mistakes I could be making? thank you
(I have all css moduled since i barely have any shared css if that could be a factor)
All the client side rendering is at the leaf nodes, and used very minimally (even though that shouldn't be an issue)
Answered by joulev
it's not related to nextjs though, if you bring this same animation to any react-based apps it will be wacky too, that's just browser limitation in lower end mobile devices
42 Replies
Spectacled bearOP
nope, still not sure of the cause
same issue with you?
@Spectacled bear same issue with you?
Dutch
no mine is lightning fast so wondered why its not on yours as you asked
Spectacled bearOP
Ah
Pretty ironic though, i moved to next because I thought it'd be faster for me lol
Dutch
it should actually, and it is
can you give me a vscode live share link to see
or deployed link
Spectacled bearOP
Hmm dont think I can, sorry
Its for a client and im not sure if they want their site disclosed yet
Its for a client and im not sure if they want their site disclosed yet
but thanks for trying to help, i'll look around on my own!
@Spectacled bear Hi! I'm working on my first nextjs project, used to use vite before.
My site is a landing page, simple single paged, no heavy libraries, no problems with rerendering either
But for some reason, it feels very sluggish, scrolling doesnt feel smooth and switching between tabs takes perceptible time
never faced this with vite, can anyone point me in the general direction of what beginner mistakes I could be making? thank you
(I have all css moduled since i barely have any shared css if that could be a factor)
All the client side rendering is at the leaf nodes, and used very minimally (even though that shouldn't be an issue)
prod mode or dev mode? dev mode is never fast, prod mode is
if prod mode: static rendering (SSG) or dynamic rendering? dynamic rendering is slower than static rendering because dynamic rendering renders your page at runtime
if prod mode: static rendering (SSG) or dynamic rendering? dynamic rendering is slower than static rendering because dynamic rendering renders your page at runtime
Spectacled bearOP
prod mode
Seems to work smooth on desktop, only noticing it on mobile
Not sure about ssg vs dynamic, I'll check it out
But from what I gather shouldn't that just affect the initial load time of the page? Not the experience after it's loaded
But from what I gather shouldn't that just affect the initial load time of the page? Not the experience after it's loaded
oh so this is about page performance by itself? probably need to go react devtools to see which component may be rerendering too much
also mobile is not known to handle certain stuff well, such as too much blur, too much animation, etc.
also mobile is not known to handle certain stuff well, such as too much blur, too much animation, etc.
@joulev oh so this is about page performance by itself? probably need to go react devtools to see which component may be rerendering too much
also mobile is not known to handle certain stuff well, such as too much blur, too much animation, etc.
Spectacled bearOP
Yess but I mentioned in my original message, nothing is rerendering
I guess might be due to the slide in animations I have on scroll though I really never thought they'd be so heavy
just have one backdrop blur for the navnar and nothing else
@Spectacled bear I guess might be due to the slide in animations I have on scroll though I really never thought they'd be so heavy
Dutch
I thought it was fresh app, we need to see some things to decide
Spectacled bearOP
oh yeah it is a fresh app
Ah well I guess showing the site shouldn't be a problem
Not even close to being finished but already sense the lag in scroll so was a bit worried
@Spectacled bear Not even close to being finished but already sense the lag in scroll so was a bit worried
Dutch
There is no links in page, or none of those are working for now
Basically it feels okay
Open page, go in mobile mode on browser, go network tab, press refresh and tell me how long it takes there
Spectacled bearOP
Yeah feels okay, but i'd expect a website this light to feel way more than just okay lol
and yes, currently the links arent set yet
@Spectacled bear Yeah feels okay, but i'd expect a website this light to feel way more than just okay lol
Dutch
If you expect less than 127ms, it probably not possible. Its around 500 in clean vite app. So your values are better than okay. It ll be more clear when you add links cuz navigation between pages could take more time depends on structure and load
In my app, 0 optimization and customization, there are 150 request at one page and around 500ms to load if you are wondering other's
But as a suggestion you can get rid of that shiny animations and rendering stuff, then it ll feel instant
Spectacled bearOP
Oh nah page load isn't the problem, just meant scrolling doesn't feel smooth on the page itself
Dutch
Yeah cause of that is animations and rendering stuff like motion
But to fix that we need to see app source
it's not related to nextjs though, if you bring this same animation to any react-based apps it will be wacky too, that's just browser limitation in lower end mobile devices
Answer
this app has way too many animations and that takes a strain on low end mobile devices
Spectacled bearOP
Gotcha, thanks for the help
Thought it was related to next because I've done similar apps in the past with vite but never faced this
I'll just work on figuring out how to optimize the animations
nextjs concerns the time taken to load the page, once the page has loaded, you are on your own
Spectacled bearOP
Never thought of it that way