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.
High because absent preload directives force late resource discovery, adding hundreds of milliseconds to LCP and font-render timing on every page load.
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.
ID: performance-core.loading-resource-priority.preload-critical
Severity: high
What to look for: Count all relevant instances and enumerate each. Examine the <head> of all pages for <link rel="preload"> tags. Identify which resources are critical for the initial render: the LCP image, primary web font files (.woff2), and any above-fold JavaScript that is needed for interactivity. Check whether these critical resources are being preloaded. Verify that as attributes are correct (as="image", as="font", as="script"). Look for crossorigin attribute on font preloads. Count how many critical resources load without a corresponding preload directive.
Pass criteria: All resources required for the initial above-fold render have <link rel="preload"> directives with correct as and (for fonts) crossorigin attributes. Preload tags appear early in <head> before any stylesheet links. Preloads are limited to genuinely critical resources — no more than 5-6 to avoid bandwidth contention.
Fail criteria: Critical fonts, the LCP image, or above-fold scripts load without preload directives, causing the browser to discover them late in the waterfall. Preload directives are missing or incorrect (wrong as attribute), or preloads exceed 8+ resources creating bandwidth competition.
Skip (N/A) when: The project uses only system fonts, has no above-fold images, and loads no synchronous scripts — making preload unnecessary.
Detail on fail: Specify which critical resources lack preload. Example: "Primary font Inter-Regular.woff2 discovered at 800ms — no preload directive. LCP hero image not preloaded; browser discovers it after parsing 120KB of CSS" or "7 preloads defined including low-priority below-fold images; bandwidth contention delays LCP resource".
Remediation: Preloading critical resources tells the browser to fetch them at the highest priority, before it would normally discover them. Add <link rel="preload"> in <head> for each critical resource:
<!-- Preload 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">
<!-- Preload critical font -->
<link rel="preload" as="font" href="/fonts/inter-regular.woff2"
type="font/woff2" crossorigin>
<!-- Preload critical script -->
<link rel="preload" as="script" href="/js/critical.js">
With Next.js, use the priority prop on the LCP image and next/font for fonts (which auto-preloads):
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] }) // auto-generates preload link
<Image src="/hero.jpg" alt="Hero" priority width={1200} height={600} />
Verify impact in DevTools: the preloaded resources should appear at the very start of the waterfall with high priority.