Preload directives added for critical fonts, images, and scripts

Browsers discover resources by parsing HTML top-to-bottom. Without preload directives, critical fonts are found only after the stylesheet is downloaded and parsed; the LCP image is found only after the CSS references it. That discovery gap — often 500–1000ms — is dead time during which the browser could have been fetching the resource (ISO-25010 time-behaviour). Missing a font preload causes invisible text (FOIT) or unstyled text (FOUT); missing an LCP image preload delays the most visible content on the page.

Add <link rel="preload"> in <head> for each resource required for the initial above-fold render. Order matters — place preloads before stylesheet links:

<!-- LCP image -->
<link rel="preload" as="image" href="/images/hero.jpg"
      imagesrcset="/images/hero-480.jpg 480w, /images/hero-1200.jpg 1200w"
      imagesizes="(max-width: 768px) 100vw, 1200px">

<!-- Critical font — crossorigin required for CORS fonts -->
<link rel="preload" as="font" href="/fonts/inter-regular.woff2"
      type="font/woff2" crossorigin>

With Next.js, use next/font (auto-generates preload) and priority on the LCP image:

import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })  // preload injected automatically

<Image src="/hero.jpg" alt="Hero" priority width={1200} height={600} />

Limit preloads to 5–6 genuinely critical resources. Preloading low-priority assets creates bandwidth contention and harms the resources you actually need first.