Optimizing Next.js App Performance: Font, Image, and Scripts

Web performance is critical for user retention and search engine optimization. Next.js provides built-in tools to help us optimize images, fonts, and scripts. Let's explore how to use them effectively.

1. Next-Level Image Optimization

The Next.js `<Image />` component automatically optimizes images on-the-fly, serving WebP or AVIF versions. To prevent Layout Shift (CLS), you must always provide width/height or use the `fill` layout.

import Image from 'next/image';

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

2. Zero Layout Shift Fonts

Google Fonts loaded through `next/font/google` are hosted locally inside the build bundle. This prevents the browser from showing fallback fonts while loading, avoiding text flashes and layout shifts.

import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
});

export default function Layout({ children }) {
  return (
    <html lang="en" className={inter.variable}>
      <body className="font-sans">{children}</body>
    </html>
  );
}

3. Strategic Script Loading

Third-party scripts (like analytics) can drag down performance. The Next.js `<Script />` component lets you decide when scripts should execute.

import Script from 'next/script';

export default function Analytics() {
  return (
    <Script
      src="https://example.com/analytics.js"
      strategy="afterInteractive" // Loads during idle browser time
    />
  );
}

By implementing these optimizations, your Next.js application will achieve optimal Lighthouse performance scores.