I am using an aceternity component with framer motion at the top of the website

THE LCP is on a <p> tag that is animated with framer motion

website: https://besteel.pro/

your bundle size is too large. you have to reduce it.

please, tell me how to research this topic, I know people used swcminify, but its on by default, please what do i do

bundle size is a very app-specific problem, there is no general solution. look up "nextjs large bundle size" on google for some common causes and how to debug

could it be caused by unused imports in my tsx files?

^ 🙏

like this

may be, but may also not be. shadcn navigation menu is quite lightweight. use the bundle analysers like https://nextjs.org/docs/app/building-your-application/optimizing/bundle-analyzer to see what are being used in the bundle and how you can perhaps get rid of them

thank you thank you

seems... normal?

when you build, what is the build log for the / page?

you want me to run npm run build and tell you if it logs something?

^ for the / page

something like this will show up when you build the app. what is the number?

what is the icon next to the /?

i use next/intl

thats /

* your page is currently dynamically rendered, i.e. it is run on demand, not at build time. this is slower. check [next-intl documentation](https://next-intl-docs.vercel.app/docs/getting-started/app-router/with-i18n-routing#static-rendering) on how to make your page statically rendered.

* that 234kB is a big number. reduce it.

I import a bunch of images in /, can that contribute to the size?

as in:

import asdf from "@/assets/image.webp"

<Image src={asfg} />

^ would that import the image to the bundle?

would src={asfg.url} not do that?
I'm not sure

no it doesn't. it only imports a (very small) object with info on the image url, size and so on

it's not the culprit

You can use lazymotion

Instead of motion

Simply google framer motion lazy loading

It reduces the bundle sizes by a lot like > 1MB

Also if you have an image background

Use blurDataUrl or

priority

Depending on your need

I dont know what it is, i will research what you told me, thank you. Btw the issues are on mobile, on pc it gets 94/100, mobile is now 52/100

@Cinnamon also keep on mind , local dev may not result in the full lighthouses score

Because on production, vercel uses gzip and has caching enabled

Which is disabled on local dev

That was for my case, on slow network my hero section didnt load for a full minute on local dev

But on production with throttling slow network it loaded super fast

I selfhost on vps