Next.js Discord

Discord Forum

Components is taking so much time to load

Unanswered
American Shorthair posted this in #help-forum
Open in Discord
American ShorthairOP
Hello, In my Next.Js 15.2.4 app router application, some of the components is taking so much time to load, but that lags happens only after like 4 days of a restart, so when i stop the app and run the server again it's fast

83 Replies

American ShorthairOP
Website is at https://lutex.io for anyone who wants to look more
The Landing page is also taking so much time to load as well
Dutch
@American Shorthair Your home page is 5mb ?
@Dutch <@589989048005689366> Your home page is 5mb ?
American ShorthairOP
It's 51.6kb
@American Shorthair It's 51.6kb
Dutch
it shows 5mb at network tab
Dutch
also animations can make it look "loading slow" especially at slow pc s
@Dutch also animations can make it look "loading slow" especially at slow pc s
American ShorthairOP
Yea but the problem is that it's not even rendering the content
Which browser are you using?
Dutch
firefox
American ShorthairOP
That's weird
what could be the reasons of that huge size?
also in brave it's showing me that the size is 51.6kb, why did it take 5mb to load?
+ when i do a restart to the server it's loading fast as it should
Dutch
can i see your build logs @American Shorthair
@Dutch can i see your build logs <@589989048005689366>
American ShorthairOP
On local?
Dutch
vercel
American ShorthairOP
I don't use vercel
Dutch
only last block
which says static ...
American ShorthairOP
1s
@Dutch
Dutch
looks okay, maybe your host is slow
also 1s is okay for a page which have heavy animation
like threejs
@Dutch looks okay, maybe your host is slow
American ShorthairOP
hmm that's weird
@Dutch also 1s is okay for a page which have heavy animation
American ShorthairOP
no i meant 1s lemme get you the logs 😂
@American Shorthair no i meant 1s lemme get you the logs 😂
Dutch
no i meant i checked it on network tab and showed 1s to load time, its okay
@Dutch no i meant i checked it on network tab and showed 1s to load time, its okay
American ShorthairOP
Hmm, my friend said the same thing, maybe i'm the only one who have this issue
But also 5mb to load landing page? that's alot
@American Shorthair Hmm, my friend said the same thing, maybe i'm the only one who have this issue
Dutch
can we see your lighthouse reports to check what is wrong
American ShorthairOP
and will be a problem for those who have a slow internet like me
Dutch
or pagespeed insights
if you have a thing faster than 3g its okay to have 1sec load times
@Dutch can we see your lighthouse reports to check what is wrong
American ShorthairOP
Sure
Dutch
my near empty page takes 500ms
@Dutch my near empty page takes 500ms
American ShorthairOP
hmm, so my website is considered fast?
Dutch
37 requests
1.1 MB transferred
3.6 MB resources
Finish: 780 ms
American ShorthairOP
Dutch
yep but fast load is not same with fast rende
its rendering slow
that is what i mean
@Dutch yep but fast load is not same with fast rende
American ShorthairOP
Yes it's taking long time to render
Dutch
for that i need to see the code
American ShorthairOP
Can i dm?
Your local LCP value of 15.75 s is poor.
LCP element
img.w-full.h-full.object-cover
It's saying that it is because of the image under that text
Dutch
yep @American Shorthair
@Dutch yep <@589989048005689366>
American ShorthairOP
Will making it lazy load fix the issue?
i will try that
@American Shorthair Will making it lazy load fix the issue? i will try that
Dutch
okay let me know the result
@Dutch okay let me know the result
American ShorthairOP
I've completely removed the image and now it's telling me

Your local LCP value of 12.59 s is poor.
LCP element
p.max-w-2xl.mx-auto.text-description-color.text-sm.lg:text-xl

Which is the description, That is just so weird
American ShorthairOP
i removed framer-motion and it reduced to 3.12s
American ShorthairOP
@Dutch Can you tell me what does it shows for you?
@American Shorthair <@1257609464811487255> Can you tell me what does it shows for you?
Dutch
I ll check when i on the pc, but i guessed right. Animations making things so slow and sluggish.
Dutch
Also you can send me lighthouse reports and google pagespeed insights
Dutch
its 1.94 s LCP on mine, but this depends on hardware and network so its not a descriptive metric to measure performance
For me its 660ms on network tab, but your / is still large and takes most of time of 660
only 400ms is "waiting server response"
If you are not performance optimistic this values are so good, if you want more fine tuning we need to see whole codebase and hosting options
American ShorthairOP
@Dutch
only the landing page is what taking that long, other pages is fast as they should
Idk if it's framer-motion or not
@American Shorthair <@1257609464811487255>
Dutch
Looks like not
@Dutch Looks like not
American ShorthairOP
Not what exactly
Dutch
Not framer i mean
American ShorthairOP
hmm, So what's the issue
Dutch
Is it slow when you build it locally
American ShorthairOP
Hmm, a little bit, because i have some obfuscated code
but i don't use that in the landing page
Dutch
Well i need to see that code
American ShorthairOP
The langing page?
Dutch
Codebase actually
American ShorthairOP
uhhhm
I can share screen to it once i get home
Dutch
Vscode live share link would be better
American ShorthairOP
Can't give you access to the whole project sorry
Dutch
Then just send me some files
next.config, package.json, rootlayout component and landing page
Also local build logs at terminal
Only after generating static pages block
Otherwise i cant get what is wrong
Also i will need full lighthouse report as json