Resource Hints — Cheat Sheet

Print-ready reference card for Lesson 01. All hints, syntax, traps, and lead one-liners in one place.

How to use: Reprint this before the round. Cover the right column and recite each one-liner from memory — if you hesitate, re-read the lesson.

The two jobs

Job	Hints	One-liner
Warm the pipe (connection)	`dns-prefetch`, `preconnect`	Pay DNS/TCP/TLS before you need the origin.
Fetch the bytes (content)	`preload`, `modulepreload`, `prefetch`, Speculation Rules	Download a resource before discovery (this page) or before navigation (next page).

Quick reference

Hint	Does	Cost	Priority	Page
`dns-prefetch`	DNS only	tiny	—	this/next
`preconnect`	DNS+TCP+TLS	high (holds socket)	—	this
`preload`	fetch known asset now	med	high / as-typed	this
`modulepreload`	fetch+parse ESM graph	med	high	this
`prefetch`	fetch for later, cache	low (idle)	lowest	next
Speculation Rules	prefetch or full prerender	tunable	eagerness	next

Syntax

// warm critical cross-origin
<link rel="preconnect" href="https://cdn...">
<link rel="dns-prefetch" href="https://cdn...">

// LCP hero — preload + make it WIN
<link rel="preload" as="image"
  href="/hero.avif"
  fetchpriority="high">

// font — crossorigin MANDATORY
<link rel="preload" as="font"
  type="font/woff2"
  href="/f.woff2" crossorigin>

Speculation Rules

<script type="speculationrules">
{
  "prerender": [{
    "where": { "href_matches": "/hotel/*" },
    "eagerness": "moderate"
  }]
}
</script>

prefetch = next doc · prerender = full invisible page
eagerness: conservative → moderate → eager
in-memory cache (not HTTP disk cache)
Chromium-only; prerender executes JS → guard analytics w/ Page Visibility

Lead one-liners (memorize)

Hints “A hint is a bet on what you'll need next. Bet right → faster. Bet wrong → wasted bandwidth. So only bet on sure things.”

Priority “fetchpriority is a ranking, not a megaphone. If everything's high, nothing is. One high for the LCP, low for its competitors.”

Modules “preload gets you the bytes; modulepreload gets you the parsed module — and flattens the import waterfall. For ESM, reach for modulepreload.”

Platform mapping

preconnect → image CDN, payments, maps
preload + fetchpriority=high → first hotel photo (LCP)
dns-prefetch → analytics / experimentation tags
prerender (Speculation Rules) → top search result on hover = “instant” detail page

Don't fail the interview

1. preload needs as — without it: wrong priority + double fetch.

2. Font preloads need crossorigin even same-origin — mismatched mode → downloads twice.

3. Preloading an image ≠ high priority. Images default Low; add fetchpriority="high".

4. Preconnect is not free — each holds a socket. Cap at ~2–4; dns-prefetch the rest.

5. <link rel=prerender> is legacy — say Speculation Rules instead.

6. Everything fetchpriority=high = nothing is. One bucket → tie-break on document order → shared bandwidth → LCP can get slower. One high for the LCP, low for the rest.

7. For ES modules use modulepreload, not preload as=script — it parses+compiles into the module map & can fetch the import graph. Safari only ≥17.5 → falls back to preload.