Performance & Core Web Vitals

~22 min · LCP, CLS, INP, Web Vitals

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

The three metrics that matter

Metric	Targets	Next.js levers
LCP — Largest Contentful Paint	< 2.5s	SSR, image `preload`, streaming, edge caching
CLS — Cumulative Layout Shift	< 0.1	`next/image` reserves space, `next/font` kills swap shift
INP — Interaction to Next Paint	< 200ms	Server Components shrink JS, React Transitions yield

What you get for free

Server Components — less JS shipped → faster TTI / better INP.
Automatic per-route code splitting — no extra config.
next/image serves WebP/AVIF + responsive sizes.
next/font self-hosts fonts, eliminates swap CLS.
<Link> prefetches by default.
Streaming + Suspense for perceived performance.

Measuring

Run Lighthouse in CI. Add Vercel's @vercel/speed-insights or your own Web Vitals reporter for real-user metrics. Synthetic Lighthouse is a sanity check; real users are the truth.

Code

Bundle analyzer in next.config·ts

// next.config.ts
import type { NextConfig } from 'next';
import withBundleAnalyzer from '@next/bundle-analyzer';

const withAnalyzer = withBundleAnalyzer({ enabled: process.env.ANALYZE === 'true' });

const config: NextConfig = {
  images: { remotePatterns: [{ protocol: 'https', hostname: 'images.example.com' }] },
};

export default withAnalyzer(config);

Bash to view the report·bash

ANALYZE=true npm run build
# opens .next/analyze/client.html with treemap of every client chunk

Real-user Vitals reporter·tsx

// 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>
  );
}

External links

Exercise

Run the bundle analyzer on your project. Identify the three biggest client chunks. For each, decide whether you can move work into a Server Component or lazy-load the chunk. Apply at least one fix.