Suleman Ahmed - BlogOptimizing 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.
More Articles
A Guide to Effective Unit Testing with Vitest and React Testing Library
Learn how to write reliable tests for your React components. Covers API mocking, event simulations, and clean assertions.
Tailwind CSS v4: The Future of Utility-First CSS
Explore the key improvements in Tailwind CSS v4, featuring native CSS variables, a highly optimized CSS compiler, and simplified config files.
React 19 Server Components: What You Need to Know
Get ready for React 19. Understand how Server Components differ from Client Components, and how they improve page load performance.