I'm trying to optimize and improve light house mobile scores for my website that's using Next 14.
I'm under the impression that if users aren't seeing it on first page load, then it's a good practice to use dynamic or Suspense to lazy load the component or image or video.
For example, I have an image carousel that has multiple photos that shows on page load. I'm using next/image loading='lazy' for the images that won't be showing. I also have a video component in the carousel and I wrapped that in a Suspense because the user won't see it on first load and until they swipe to it.
I also have this button that will cause a modal to appear, and I tried dynamically importing that modal because the user won't need it until they press the button.
These have dropped my performance score by 20 points and raised the blocking time and speed index.
Or another example, on my home page, I have the components that users first see not dynamic. But for everything below it I dynamically imported and it dropped my performance points by 15-20 points as well.
I've even tried doing next/image priority instead of loading=eager but that also dropped my performance.
I'm really confused because I think I'm doing best practices, but my Lighthouse isn't reflecting it. What am I doing wrong? Is Lighthouse just not meant to work well with this?
Thank you.
& yes, I do an npm run build && npm run start and I'm in incognito