Performance Optimisation and Core Web Vitals | Next.js 15

Core Web Vitals

Google's user-experience metrics that directly impact SEO rankings:

LCP (Largest Contentful Paint): When did the largest content load? → must be <2.5s
CLS (Cumulative Layout Shift): How much does the layout shift? → must be <0.1
INP (Interaction to Next Paint): How fast does the UI respond to input? → must be <200ms

Bundle Analysis

npm install @next/bundle-analyzer

// next.config.ts
import bundleAnalyzer from "@next/bundle-analyzer";

const withBundleAnalyzer = bundleAnalyzer({
  enabled: process.env.ANALYZE === "true",
});

export default withBundleAnalyzer({});

ANALYZE=true npm run build  # Opens interactive bundle map

Code Splitting with Dynamic Import

import dynamic from "next/dynamic";

// Lazy-load heavy library
const Chart = dynamic(() => import("recharts").then(m => m.LineChart), {
  loading: () => <p>Loading chart...</p>,
  ssr: false,
});

// Modal — load only when opened
const Modal = dynamic(() => import("@/components/Modal"), {
  ssr: false,
});

Prevent Unnecessary Renders

import { memo, useCallback, useMemo } from "react";

const ExpensiveComponent = memo(function ExpensiveComponent({
  data,
  onClick,
}: {
  data: number[];
  onClick: () => void;
}) {
  return <div>{data.map(v => <span key={v}>{v}</span>)}</div>;
});

export default function Parent() {
  const handleClick = useCallback(() => {
    console.log("clicked");
  }, []);

  const processedData = useMemo(() => expensiveCalculation(rawData), [rawData]);

  return <ExpensiveComponent data={processedData} onClick={handleClick} />;
}

Vercel Analytics

npm install @vercel/analytics @vercel/speed-insights

// app/layout.tsx
import { Analytics } from "@vercel/analytics/react";
import { SpeedInsights } from "@vercel/speed-insights/next";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  );
}

Önemli Noktalar

Target LCP <2.5s, CLS <0.1, INP <200ms
dynamic import lazy-loads heavy components
React.memo and useCallback prevent unnecessary re-renders
Vercel Analytics tracks real-user performance metrics