Preload directives added for critical fonts, images, and scripts

ab-001999 · performance-core.loading-resource-priority.preload-critical

Severity: highactive

Why it matters

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.

Severity rationale

High because absent preload directives force late resource discovery, adding hundreds of milliseconds to LCP and font-render timing on every page load.

Remediation

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.

Detection

ID: 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.

External references

iso-25010:2011 · performance-efficiency.time-behaviour — Time Behaviour

Taxons

performance

History

2026-04-18·v1.0.0·Initial import from performance-core·automated