It depends

What does the metric apply for?

There could be for example image performance if its very large in size, or videos. In addition any animation can affect your performance score. And the app itself how much JS is there happening.

Ye it’s mainly animations

Images are optimized

@Elite hmm what kind of animations

But at the end its a matter of sacrificing performance for animation.

However it still is possible to get 100% score, this is for my case

I used gsap and framer motion in my website but i still get high score.

A big reason has to do with the biggest content in your landing page

Also page loading speed and if any culminate layout shift

But yeah it depends what your animation is doing and how it affects the largest content paint

theres some threejs stuff for the background

i can send the url

its the first one in my bio

it has some framer motion too

I find it difficult to get next.js over like 60s, maybe up to 70 in mobile on CWVs (not just Lighthouse, but also in the search console). There's just too much javascript sent to the client, no matter what I do. I have thought of using preact, since React is one of the largest chunks in my bundle, but that's not possible with app router.

to answer your question directly - you would use dynamic imports on components "below the fold" - if you use it on components "above the fold" it'll actually make your scores worse in Lighthouse

Also, you should only use it for "use client" components, not server components

i see

wdym by below the fold?

alright

(I should clarify - on mobile - on desktop it's easy to get 100)

Content that loads below the default viewport (content that you'd have to scroll to see). The stuff in the default viewport is considered "above the fold" and will impact your largest contentful paint (LCP). You want that to load and render as quickly as possible, so don't use dynamic imports on that part.

ah so like stuff they gotta scroll far down far i can use dynamic imports

will that help with the speed of the above fold stuff?

In my experience, only moderately

The biggest bang for your buck, is going to be reducing bundle size, and data payload size

If you aren't using bundle analyzer, make sure you get that set up https://www.npmjs.com/package/@next/bundle-analyzer

*^ Hm what animation libraries are you using? Because framer motion offers smaller bundle sizes and lazy loading

If your using that

Three js for the background

Framer, tailwind animations, embla carousel, simplex-noise npm