Introduction

Optimizing assets is critical for web performance and user experience. Next.js provides built-in tools to handle common performance bottlenecks, specifically around image optimization, font loading, and third-party script management. This lesson will deep dive into the powerful <Image> component for responsive and performant images, explore strategies for loading custom fonts efficiently, and demonstrate how to effectively manage third-party scripts with the <Script> component to prevent them from blocking the main thread. Mastering these features will significantly improve your Core Web Vitals and overall application speed.

Key Concepts

Image Optimization with next/image

The next/image component automatically optimizes images.

• Features:

• Automatic Optimization: Converts images to modern formats (e.g., WebP) if supported by the browser.

• Resizing: Serves images at the correct size for each device, reducing bandwidth.

• Lazy Loading: Images outside the viewport are loaded only when they scroll into view.

• Priority: Mark important images with priority to load them immediately.

• Layouts: Supports various layout options like fill, responsive, intrinsic, fixed.

• Usage: jsx import Image from 'next/image';

  <Image src="/profile.jpg" alt="Profile Picture" width={500} // Required for static images height={500} // Required for static images layout="responsive" // Or "fill", "intrinsic", "fixed" quality={75} // Optional, 1-100 priority // Optional, for LCP images />

• Domains: If using external images, you must configure images.domains in next.config.js.

Font Optimization with next/font

Efficiently loading fonts with next/font prevents layout shifts (CLS) and improves text rendering. It optimizes both Google Fonts and local fonts by removing render-blocking requests and handling self-hosting, improving performance.

• Usage (Google Fonts Example): javascript // _app.js or layout.js import { Inter } from 'next/font/google';

  const inter = Inter({ subsets: ['latin'] });

  export default function App({ Component, pageProps }) { return ( <main className={inter.className}> <Component {...pageProps} /> </main> ); }

Script Loading with next/script

Third-party scripts (analytics, ads, chat widgets) can severely impact performance. next/script helps manage their loading strategy.

• Strategies:

• strategy="beforeInteractive": Loads before any page hydration (e.g., for analytics).

• strategy="afterInteractive": Loads after the page becomes interactive (default, e.g., for tag managers).

• strategy="lazyOnload": Loads during browser idle time (e.g., for chat widgets).

• Usage: jsx import Script from 'next/script';

  function HomePage() { return ( <> <Script src="https://example.com/analytics.js" strategy="beforeInteractive" /> <Script id="my-inline-script" strategy="afterInteractive"> {console.log('Inline script loaded!');} </Script> <h1>Welcome</h1> </> ); }

Key Takeaways

• The next/image component automatically optimizes images, providing lazy loading, responsive sizing, and modern formats.

• Configure images.domains in next.config.js for external image sources.

• next/font optimizes font loading (Google and local) to reduce CLS and improve performance.

• next/script helps manage third-party scripts with different loading strategies (beforeInteractive, afterInteractive, lazyOnload) to prevent performance bottlenecks.

• Proper asset optimization is crucial for achieving good Core Web Vitals and a fast user experience.