Preload only what's critical

Preload only what first paint needs: the LCP image and one font.

From nextjs-pagespeed.

RTT 150 ms

Same page, same pipe

Press Race, then change bandwidth and race again.

Preload everythingBad
Hero + one fontGood
// app/layout.tsx: next/font preloads the one essential font
const inter = Inter({ subsets: ["latin"], weight: ["400", "600"], display: "swap" });

// app/pricing/layout.tsx: route-only font stays on its route
const mono = JetBrains_Mono({ subsets: ["latin"] });

// app/page.tsx
export default function Page() {
  return (
    <>
      <Image src={hero} alt="" priority sizes="100vw" /> {/* the one priority image */}
      <Carousel slides={rest} />                         {/* no priority: lazy */}
      <PlanDialog />                                     {/* next/dynamic: fetched on open */}
      <Script src="/a.js" strategy="lazyOnload" />       {/* after load, never preloaded */}
    </>
  );
}

Spend the preload budget

Tick preloads, then change how the hero is found.

Waterfall
LCP–
vs critical only–
Font ready–
Extra preloaded–

Why it matters, pros and cons

Why it matters

A preload fetches now, at high priority. The hero waits behind every early byte.

Pros

  • Hero and body font start immediately.
  • Fewer font swaps, less layout shift.
  • No “preloaded but not used” warnings.

Cons

  • An <img> in HTML is already found; use fetchpriority.
  • Root layout preloads ship on every route.
  • Font preload without crossorigin downloads twice.