[SOLVED] How to optimze FCP, LCP in Nextjs 14 or 13 (source code, published url)

How to optimze FCP, LCP in Nextjs 14 or 13 (source code, published url)

I use Nextjs 14, Vanilla Extract, mongoDB, Vercel

It takes 2.5 sec at least and 5 sec maximum to move another pages. (with no cache)

And it takes 2 sec at least to change theme. (When I click the toggle button)

The reason I supposed is the way I use vanilla extract or layout(located in post folder)

Vanila Extract theme code is

/** rootlayout */

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const cookieStore = cookies();
  const theme = cookieStore.get("theme");
  return (
    <html lang="ko-KR">
      <link rel="icon" href="/favicon.ico" sizes="any" />
      <body className={theme?.value === "light" ? ligthTheme : darkTheme}>
        <Topbar />
        <div className={styles.mainContentContainer}>
          <main className={styles.mainContent}>
            {children}
            <Footer />
          </main>
        </div>
        <BottomBar />
      </body>
    </html>
  );
}

/** toggle button */
import { moon } from "../icon/moon";
import { sun } from "../icon/sun";
import { cookies } from "next/headers";
import { toggleBtn } from "./ToggleBtn.css";
import SVGmorph from "./SVGmorph";

export default function ToggleBtn() {
  const theme = cookies().get("theme");
  const handleTheme = async () => {
    "use server";
    if (theme?.value === "dark" || !theme?.value) {
      cookies().set("theme", "light");
    } else {
      cookies().set("theme", "dark");
    }
  };
  return (
    <form action={handleTheme}>
      <button className={toggleBtn}>
        <svg
          width="28"
          height="28"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <SVGmorph paths={[sun, moon, sun]} theme={theme?.value || "dark"} />
        </svg>
      </button>
    </form>
  );
}

and css in component background: vars.themeColor.backgroundColor.glassGradientColorTop

I've tried everything for three days, but I can't find solution.

What is wrong with my code? I appreciate a little advice, so please help me...

source code : https://github.com/22JH/blog published url : https://www.joo-dev.com/

score in vercel

And when I deleted the post layout it becomes much better.(But it still takes a long time to change theme)

I tried delete svg morph and it still takes a long time.

I changed the fetch code (add api folder and route.ts). But it still takes a long time.

Solution

The biggest impact to your performance is everytime you fetch data you establish new connection to database using connectToDB() function and you install to many dependecy.