Next.js Core Optimizations
Modern websites require high Core Web Vitals scores to rank well on search engines. Next.js provides built-in components to optimize media assets, web fonts, and third-party scripts automatically.
1. Image Optimization (next/image)
The Next.js Image component extends the standard HTML image tag. It automatically compresses and optimizes images to prevent Cumulative Layout Shift (CLS) bugs.
- Size Optimization: Serves correctly sized images based on the visitor screen resolution.
- Modern Formats: Automatically converts images to lighter formats like WebP or AVIF.
- Lazy Loading: Images below the fold are deferred from loading until they enter the viewport.
import Image from "next/image";
import localHero from "../public/hero.jpg";
export default function Page() {
return (
<div className="relative h-64 w-full">
{/* 1. Using a local imported image (dimensions are inferred automatically) */}
<Image src={localHero} alt="Product advertisement banner" />
{/* 2. Using a remote image path (requires explicit dimensions and config setup) */}
<Image
src="https://images.example.com/item.png"
alt="Wireless mouse illustration"
width={400}
height={300}
priority // Preloads this image immediately (useful for LCP hero banner elements)
/>
</div>
);
}If you use remote images, configure the allowed host domains in next.config.mjs:
// next.config.mjs
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'images.example.com',
},
],
},
};2. Web Font Localization (next/font)
Web fonts can cause layout shifts if the browser loads text using fallback system fonts before downloading the custom font file.
Next.js resolves this by downloading font files at build time and hosting them locally inside your application bundle, eliminating external server connections:
// src/app/layout.tsx
import { Outfit } from "next/font/google";
// Configure Outfit Google Font parameters
const outfit = Outfit({
subsets: ["latin"],
display: "swap", // Uses fallback font until Outfit download completes, avoiding hidden text
weight: ["400", "700"]
});
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={outfit.className}>
<body>{children}</body>
</html>
);
}3. Dynamic Scripts (next/script)
Embedding third-party scripts (such as Google Analytics or marketing pixels) can block page parsing and delay loading.
The Next.js Script component optimizes execution using the strategy parameter:
import Script from "next/script";
export default function AnalyticsLayout() {
return (
<div>
{/* Load script in background after page becomes interactive */}
<Script
src="https://example.com/analytics.js"
strategy="afterInteractive"
/>
</div>
);
}Strategy Options
beforeInteractive: Loads script before any React code hydrates. Use only for critical security policies.afterInteractive(Default): Loads script immediately after the page becomes interactive.lazyOnload: Loads script during idle browser periods.