It's a common problem that animations make a bad performance score. How to fix it? Read this: https://nextjs-forum.com/post/1302625319278088244#message-1302652962375471134 (<---- click)

great site btw

So what should I change in my code? I don't need or have an actual loading page, I just need a "fake" loading screen that disappears when a video finishes playing. I will pay you if you help me fix the code

Thank you. Could you help me fix the lag on mobile?

As said do this: (see attached)

Or if you scroll down a bit you see this: https://nextjs-forum.com/post/1302625319278088244#message-1302653611393945623

I have already done that, the site is still really laggy on mobile

your page is a bit laggy on desktop as well (at least for me). So you might want to reduce the stuff the browser needs to do when rendering your page

So what exactly do you think I should change?

the part that is the most laggy part of your page is for me the tiktok part (where you show all the videos). Reduce this section to a minimum and check if it's still laggy on mobile as well. If it's not laggy anymore then, you can add more things to this section until it's balanced (balanced between: "I want to show all this" and "I want a good performance")

Cache the videos itself so this doesn't happen:

btw, this also doesn't look normal

Do the videos there load multiple times?

The code where these videos are looks like this: https://github.com/dialedwebdevelopment/heave/blob/master/app/Main/Section2.jsx

yes. Open the network tab and look what's loaded... 130 requests just for videos... and none of the videos is cached... that kills mobile data volume

Why does that happen?

And what should I change/fix?

Deliver them thought a CDN. That can be bunnyCdn or even a video service like vimeo. Then just embed it and stream it. No need to serve it thought nextjs

I did that, but the performance didn't really improve

Well.. you just doubled your performance score. Before: 39. After: 73

Google now waited for 4.5 Seconds for the LCP. Make sure you either load it instantly or remove the animation to improve your score even more

Yeah, but I had to remove one section on mobile. What platform are you using to get the score?

I am using lighthouse: https://pagespeed.web.dev/

On mobile I got a performance scrore of 42. These are the main issues, how could I improve these? How is the performance better on desktop(62)?

as you can see, the LCP takes waaaay to long to load (see attached). In the first few frames the animation is running. Google will only notice it until the animation is done. That should influence also the TBT and the SI.

So fix the LCP like this: https://nextjs-forum.com/post/1302910078147624990#message-1302983357596172320 (<----- click)

I need the animation, so what should I do then?

I wouldn't recommend to add animations in hero sections

do this: https://nextjs-forum.com/post/1302625319278088244#message-1302652962375471134 (<--- click)

Also, add priority attribute to images in hero section

If you don't add any animations there, the site is bad

then create an initial loading screen like I mentioned multiple times that serves as loading animation

User should be able to see the hero section as soon as they open the site.

I've heard that if site takes more than 3 seconds to load, you might lose 25-50% of the visitors of the site.

Once you get their attention on hero section, you can add animations further.

I tried to tell him that too... but it seems like he don't understand that :/

I personally only use loading screen if the hero image is covering the background, because if a user finds the site organically, they won't wait long before switching to other results

I've personally done this in one of the site, and not planning to do it again. I noticed my scores were <30% in one site where I added animation

And >80% In one where I didn't add

And that too isn't needed, unless th eimage has a greater size. Priority is more than enough most of the time

If a website does not have hero section animations, it's just not up to date with the best websites

Also, a nice loading screen/animations add a lot to the experience

Can you send a link of the website which has a hero animation, I'll just see how it optimises it

Except for the hero section.

And too many animations are not really good, as they don't work well on older devices.

yea... I guess I just learn from these threads that are about animations in combination with performance score: I won't accept them in the future anymore..

You tell OP what to do and there is just resistance... that sucks

@Broad-snouted Caiman There is nothing you can do.

Animations on page load is inversely proportional to performance score.

If I ever wanted to, I'd add a really light animation, like fade in, lasting < 0.5 s, or 1 s at max.(Only If its really needed)

Animation are fine, but not on the LCP

And the roller animation is completely fine, but the text writing animation, wouldn't really recommend

Also, check this out!

https://engaged.be/, https://linear.app/, https://milknetwork.com/. Just a few examples

the first link is taking too long to load, Like >10s on my laptop. That has a low performance score def. Will still run a test

this is the score for the second one on mobile

but it has no lag

first one is taking too long to load that it isn't even able to run request. it is taking >30s

Your website might be having scroll event listeners, which can be causing the lag

at least 2.1s blocking time

I just want to see what websites you are creating

mobile loading simulation of the second page with 4G:
https://www.webpagetest.org/video/video.php?tests=241104_AiDcAE_9AA-r:3-c:0&format=gif

https://anayparaswani.dev/

You can see here(scroll down)

One of them has a little poor lighthouse scroll, because of Video in hero section.

and other one is >80%

btw, the page is very much recommended. Like that I know, that I should fix this image (request 30) as it takes waaay to long to load and it doesnt start directly

@Broad-snouted Caiman solved?

The performance isn't great, but it seems like I can't improve it further

Did you do these things
1. https://nextjs-forum.com/post/1302910078147624990#message-1303064778083930183
2. https://nextjs-forum.com/post/1302910078147624990#message-1303062741413658735
3. https://nextjs-forum.com/post/1302910078147624990#message-1303062540850430012
4. https://nextjs-forum.com/post/1302910078147624990#message-1303062230685974669
5. https://nextjs-forum.com/post/1302910078147624990#message-1303057716087885874
6. https://nextjs-forum.com/post/1302625319278088244#message-1302652962375471134

By doing most of the stuff you will get a boring site that nobody will pay a lot for.

I hope your clients won't pay for the website. I hope they will pay for the product that you offer.

All of the points that we are saying is concluded in one sentence:

Animation are fine, but not on the LCP [(from here)](https://nextjs-forum.com/post/1302910078147624990#message-1303064971751456779)

So do it and you will have a good performance score as well as a good website.

Btw: people don't want to wait. People want to buy 😉

You wont be different from the competition if you create websites with not a lot of animations and modern layouts. Also, I am curious to see what websites you think are really good and what websites you have created.

it looks like this thread is not anymore about resolving your initial issue. I guess you got enough input from us on how you can get a better performance score. All the best with your project

Create animations, but light & optimized in LCP & hero section.
There is nothing you can do about it.
you also send a link of few sites, which had low performance scores.