next/font and next/image — how do they combine for Core Web Vitals?

Q: next/font and next/image — how do they combine for Core Web Vitals?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Easy > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block says which version it ran on. ## 1. Why This Even Matters — A Story First A page loading is like a stage being set before a show. The biggest prop (the LCP element) should be carried in first, and it should be the right size for the stage. The actors (the text) should already stand where they will stay, even before their costumes (the web font) arrive. next/image handles the props; next/font makes sure the costume change does not move anyone. ## 2. The Core Idea 📌 **Interview term: LCP** —

The problem

Question presented to candidate: "Our Lighthouse report shows a slow LCP and some layout shift on the landing page. How would next/image and next/font help, and which settings would you change?"

What a strong answer should cover:

LCP (Largest Contentful Paint) is usually the hero image or heading: preload the hero image and serve it at the right size and format.
CLS (Cumulative Layout Shift) comes from images without reserved space and fonts that swap to a different size.
next/image reserves space from width and height, lazy-loads below-the-fold images and serves WebP or AVIF at the right width.
next/font self-hosts and preloads fonts and adds a size-adjusted fallback so the swap does not shift text.
In Next.js 16 use preload (or fetchPriority="high") instead of the deprecated priority for the LCP image.

Clarifying questions expected:

"What is the LCP element on this page?" — the fix differs for an image or a text block.
"Where does the shift happen?" — images, fonts, or late-inserted content like banners.

Code / implementation expected: Yes — a landing page hero using both.

next-font
next-image

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Easy

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block says which version it ran on.

1. Why This Even Matters — A Story First

A page loading is like a stage being set before a show. The biggest prop (the LCP element) should be carried in first, and it should be the right size for the stage. The actors (the text) should already stand where they will stay, even before their costumes (the web font) arrive. next/image handles the props; next/font mak

The solution is hidden so you can try first

5 min read · 8 sections

Read the code

A landing hero with both tools

// app/page.tsx
import Image from "next/image";
import { Inter } from "next/font/google";
import hero from "@/public/hero.jpg";

const inter = Inter({ subsets: ["latin"], display: "swap" });

export default function Landing() {
  return (
    <main className={inter.className}>
      <h1>Summer collection</h1>
      <Image src={hero} alt="Models in the summer collection" preload sizes="100vw" placeholder="blur" />
      <Image src="/grid-1.jpg" alt="Shirt" width={600} height={800} sizes="(max-width: 768px) 50vw, 25vw" />
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.