Nextjs performance problem,

[modest ibex]

How am I getting worse performance on my landing page when I'm using dynamic imports, if I'd use static imports then it would be 30%. Why is my performance so bad? What can I do?

Landingpage:
˛```ts
import Link from "next/link";
import { styles } from "../utils/contants";

import CTA from "../components/Landingpage/CTA";
import Footer from "../components/Landingpage/Footer";
import { ToastContainer } from "react-toastify";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import SocialMedia from "@/components/Landingpage/SocialMedia";
import { useEffect } from "react";

import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import Intro from "@/components/Landingpage/Intro";
import dynamic from "next/dynamic";

const Navbar = dynamic(() => import("@/components/Landingpage/Navbar"));
const Hero = dynamic(() => import("@/components/Landingpage/Hero"));
const Features = dynamic(() => import("@/components/Landingpage/Features"));
const Suggestion = dynamic(
() => import("@/components/Landingpage/Suggestion")
);
const SuggestionMobile = dynamic(
() => import("@/components/Landingpage/SuggestionMobile")
);

return (
<div className="bg-primary w-full overflow-hidden">
<div className={sm:px-16 px-6 flex justify-center items-center}>
<div className={xl:max-w-[1280px] w-full}>
<Navbar />
</div>
</div>

  <div className={`bg-primary hero-base flex justify-center items-start`}>
    <div className={`${styles.boxWidth}`}>
      <Hero />
    </div>
  </div>

  <div className={`bg-primary ${styles.paddingX} ${styles.flexCenter}`}>
    <div className={`${styles.boxWidth}`}>
      <Intro />
      <Features />
      <SuggestionMobile />
      <Suggestion />
      <SocialMedia />
      <CTA />
      <Footer />
    </div>
  </div>
</div>

);
};

export default Home;

[paper gyro]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)

[tender delta]

i dont think ive ever seen that low

that is impressive

pages or app

[modest ibex]

pages

[modest ibex]

😄 Thank you

[modest ibex]

The weird thing is that after if I remove the dynamic imports then it goes back to 30%

[tender delta]

aw damn. if it was app dir i could help. i have no idea about pages tho

[tender delta]

yeah that is ass backwards as far as i am aware

[modest ibex]

Well IDK, but my production site has the performance of 97% which is compared to what I've got locally is again weird af

[tender delta]

keep in mind that dev server royally fucks up lighthouse

if you wanna test lighthouse you gotta build+start

(because of hmr)