Going to production · Lesson 14 of 16
Images, fonts and performance
next/image, next/font, next/dynamic, and Core Web Vitals.
10 minutes1 games
Google measures page speed with three numbers (Core Web Vitals):
- LCP: when the largest element appears (aim under 2.5 s).
- INP: how quickly the page responds to input (under 200 ms).
- CLS: how much content jumps around while loading (under 0.1).
Next.js has built-in tools that improve all three.
TypeScript
import Image from "next/image"
import hero from "@/public/hero.jpg" // a local import: width and height known automatically
export function CourseHero({ thumbnailUrl, title }: { thumbnailUrl: string; title: string }) {
return (
<>
{/* priority: the LCP image, load it first instead of lazily */}
<Image src={hero} alt="Students coding together" priority placeholder="blur" />
{/* remote image: give a size (or fill + sizes) so no space jumps (CLS) */}
<Image src={thumbnailUrl} alt={title} width={640} height={360} sizes="(max-width: 768px) 100vw, 640px" />
</>
)
}| Tool | What it solves |
|---|---|
next/image | resizing to WebP/AVIF, lazy loading, reserved space (CLS) |
next/font | fonts served from your domain, no layout shift when they swap |
next/dynamic | load heavy components only when needed |
next/script | third-party scripts (analytics) without blocking the page |
<Link> | prefetching upcoming pages |
TypeScript
// app/layout.tsx
import { Cairo, JetBrains_Mono } from "next/font/google"
const cairo = Cairo({ subsets: ["arabic", "latin"], variable: "--font-sans" })
const mono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-mono" })
// <html className={cairo.variable + " " + mono.variable}>
// A heavy client-only editor, loaded only when this component renders
import dynamic from "next/dynamic"
const CodeEditor = dynamic(() => import("@/components/code-editor"), {
loading: () => <p>Loading editor…</p>,
})Quick question
The banner at the top of the page is the largest element. What do you do with it?
Learn more from
Played 0 of 1 games
Sign in to save your progress and earn XP.