rikidaniel.
Back to Blog

Complete Guide to Optimizing Next.js Performance & Core Web Vitals

Complete Guide to Optimizing Next.js Performance & Core Web Vitals

Why Core Web Vitals Matter

Web performance impacts user experience and plays a crucial role in Google SEO rankings. The three core metrics are:

  1. LCP (Largest Contentful Paint): Measures loading performance (Target: < 2.5s).
  2. INP (Interaction to Next Paint): Measures page responsiveness (Target: < 200ms).
  3. CLS (Cumulative Layout Shift): Measures visual stability (Target: < 0.1).

Strategy 1: Image Optimization with next/image

Always use the priority attribute for above-the-fold images to optimize LCP:

import Image from 'next/image';

export function HeroBanner() {
  return (
    <div className="relative h-96 w-full">
      <Image
        src="/hero-cover.jpg"
        alt="Hero Cover"
        fill
        priority
        fetchPriority="high"
        sizes="(max-width: 768px) 100vw, 50vw"
        className="object-cover"
      />
    </div>
  );
}

Strategy 2: Code Splitting with Dynamic Imports

Defer heavy non-critical components using dynamic loading:

import dynamic from 'next/dynamic';

const HeavyChart = dynamic(() => import('@/components/HeavyChart'), {
  loading: () => <div className="h-64 animate-pulse bg-muted rounded-xl" />,
  ssr: false,
});

Strategy 3: Server Components First

Keep interactivity scoped to leaves of the component tree to keep client JavaScript bundles lightweight.

Conclusion

Leveraging React Server Components, image prioritization, and code-splitting will significantly boost your Lighthouse audit scores.

Related articles